From 32c2979ac54ee31dd491cea49e6c443812484998 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Thu, 26 Sep 2024 14:39:07 +0800
Subject: [PATCH] layout for community pages

---
 .../components/community/CenteredWrapper.vue  | 20 +++++++++++++++++++
 spx-gui/src/components/community/TopNav.vue   |  8 ++++++++
 spx-gui/src/pages/community/explore.vue       | 19 +++++++++++++++++-
 spx-gui/src/pages/community/home.vue          |  6 +++++-
 spx-gui/src/pages/community/index.vue         | 19 ++++++++++++++++--
 spx-gui/src/pages/community/projects.vue      | 19 +++++++++++++++++-
 spx-gui/src/pages/community/user/index.vue    |  8 ++++++--
 7 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 spx-gui/src/components/community/CenteredWrapper.vue
 create mode 100644 spx-gui/src/components/community/TopNav.vue

diff --git a/spx-gui/src/components/community/CenteredWrapper.vue b/spx-gui/src/components/community/CenteredWrapper.vue
new file mode 100644
index 000000000..b11f26a6f
--- /dev/null
+++ b/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>
diff --git a/spx-gui/src/components/community/TopNav.vue b/spx-gui/src/components/community/TopNav.vue
new file mode 100644
index 000000000..d5ff27f08
--- /dev/null
+++ b/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>
diff --git a/spx-gui/src/pages/community/explore.vue b/spx-gui/src/pages/community/explore.vue
index 4ece3228d..253607acf 100644
--- a/spx-gui/src/pages/community/explore.vue
+++ b/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>
diff --git a/spx-gui/src/pages/community/home.vue b/spx-gui/src/pages/community/home.vue
index f9db97c7c..7745f419a 100644
--- a/spx-gui/src/pages/community/home.vue
+++ b/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>
diff --git a/spx-gui/src/pages/community/index.vue b/spx-gui/src/pages/community/index.vue
index 42bf0afc9..64252668c 100644
--- a/spx-gui/src/pages/community/index.vue
+++ b/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>
diff --git a/spx-gui/src/pages/community/projects.vue b/spx-gui/src/pages/community/projects.vue
index ef7e97505..7cb4e2a10 100644
--- a/spx-gui/src/pages/community/projects.vue
+++ b/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>
diff --git a/spx-gui/src/pages/community/user/index.vue b/spx-gui/src/pages/community/user/index.vue
index 5967b6cd1..e4cf2d726 100644
--- a/spx-gui/src/pages/community/user/index.vue
+++ b/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
 }>()