layout for community pages

spx-gui/src/components/community/CenteredWrapper.vue

@@ -0,0 +1,20 @@
+<template>
+ <section class="centered">
+ <slot></slot>
+ </section>
+</template>
+
+<style scoped lang="scss">
+$threshold: 1920px; // TODO: reconfirm here with @qingqing
+
+.centered {
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+
+ width: 1020px;
+ @media (min-width: $threshold) {
+ width: 1280px;
+ }
+}
+</style>

spx-gui/src/components/community/TopNav.vue

@@ -0,0 +1,8 @@
+<template>
+ <TopNav :project="null"></TopNav>
+ <!-- TODO -->
+</template>
+
+<script setup lang="ts">
+import TopNav from '@/components/top-nav/TopNav.vue'
+</script>

spx-gui/src/pages/community/explore.vue

@@ -1,3 +1,20 @@
 <template>
- <div>Explore</div>
+ <section class="header">
+ <CenteredWrapper>Explore</CenteredWrapper>
+ </section>
+ <CenteredWrapper>Projects</CenteredWrapper>
 </template>
+
+<script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+</script>
+
+<style lang="scss" scoped>
+.header {
+ height: 72px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--ui-color-grey-100);
+}
+</style>

spx-gui/src/pages/community/home.vue

@@ -1,3 +1,7 @@
 <template>
- <div>Home</div>
+ <CenteredWrapper>Home</CenteredWrapper>
 </template>
+
+<script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+</script>

spx-gui/src/pages/community/index.vue

@@ -1,4 +1,19 @@
 <template>
- <header>Community Navbar</header>
- <router-view />
+ <div class="wrapper">
+ <TopNav></TopNav>
+ <router-view />
+ </div>
 </template>
+
+<script setup lang="ts">
+import TopNav from '@/components/community/TopNav.vue'
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ background-color: var(--ui-color-grey-300);
+}
+</style>

spx-gui/src/pages/community/projects.vue

@@ -1,3 +1,20 @@
 <template>
- <div>Projects</div>
+ <section class="header">
+ <CenteredWrapper>Projects</CenteredWrapper>
+ </section>
+ <CenteredWrapper>Search Result</CenteredWrapper>
 </template>
+
+<script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+</script>
+
+<style lang="scss" scoped>
+.header {
+ height: 72px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--ui-color-grey-100);
+}
+</style>

spx-gui/src/pages/community/user/index.vue

@@ -1,9 +1,13 @@
 <template>
- <h2>User {{ name }}</h2>
- <router-view />
+ <CenteredWrapper>
+ <h2>User {{ name }}</h2>
+ <router-view />
+ </CenteredWrapper>
 </template>
 
 <script setup lang="ts">
+import CenteredWrapper from '@/components/community/CenteredWrapper.vue'
+
 defineProps<{
  name: string
 }>()