feat: topbar title & transitions

lcpu-club · Dec 20, 2024 · 1ba7fae · 1ba7fae
1 parent 6a31f8a
commit 1ba7fae
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 25 deletions.
diff --git a/src/components/TopbarComponent.vue b/src/components/TopbarComponent.vue
@@ -3,20 +3,23 @@ import { HomeIcon, Bars3BottomLeftIcon } from '@heroicons/vue/24/outline';
 
 defineProps<{
   toggleSidebarFn: ((collapse?: boolean) => void) | undefined;
+  title: string;
+  showTitle: boolean;
 }>();
 </script>
 
 <template>
   <div lg:hidden fixed top-0 left-0 right-0 backdrop-blur-xl class="bg-white/80 dark:bg-[#121212]/80" h-14
     flex="~ items-center">
-    <div w-full flex="~ items-center" max-w-800px m-x-auto>
-      <button cursor-pointer @click="toggleSidebarFn?.()" p-0 border-none bg-transparent m-l-3 h-12 w-12
-        flex="~ items-center justify-center">
+    <div flex="~ items-center" w-full class="max-w-[calc(800px+3rem)]" m-x-auto p-x-6 gap-6 box-border>
+      <button cursor-pointer @click="toggleSidebarFn?.()" p-0 border-none bg-transparent>
         <Bars3BottomLeftIcon class="w-6 h-6 text-black dark:text-white" />
       </button>
-      <a href='/' p-0 border-none bg-transparent h-12 w-12 flex=" ~ items-center justify-center">
+      <a href='/' p-0 border-none bg-transparent>
         <HomeIcon class="w-6 h-6 text-black dark:text-white" />
       </a>
+      <span block text-lg text-ellipsis overflow-hidden text-nowrap font-bold transition-all duration-200 translate-y-2
+        opacity-0 :class="{ 'opacity-100 translate-y-0!': showTitle }">{{ title }}</span>
     </div>
   </div>
 </template>
diff --git a/src/views/ActivityView.vue b/src/views/ActivityView.vue
@@ -18,6 +18,7 @@ const activityModules = inject('activityModules') as Record<string, () => Promis
 const title = useTitle('', { titleTemplate: '%s | 活动 - 北京大学 Linux 俱乐部' });
 const currentActivity = ref<Activity | null>();
 const scrollViewRef = ref<HTMLDivElement>();
+const showTitle = ref(false);
 const sidebarRef = useTemplateRef('sidebar-ref')
 
 // let's also update page title since we have access to the pathname property.
@@ -47,19 +48,26 @@ watch(route, async (newVal) => {
   const module = await resolvePageModule(newVal.path);
   if ('default' in module) Content.value = module.default;
   else Content.value = module;
-  // no idea why this only works on lg
   scrollViewRef.value?.scrollTo({ top: 0, behavior: 'auto' });
-  scrollViewRef.value?.scrollIntoView({ behavior: 'auto' });
 })
 
 onMounted(() => {
   scrollViewRef.value?.scrollTo({ top: 0, behavior: 'auto' });
-  scrollViewRef.value?.scrollIntoView({ behavior: 'auto' });
 })
+
+function handleScroll() {
+  const scrollTop = scrollViewRef.value?.scrollTop;
+  if (scrollTop == undefined) return;
+  if (scrollTop > 60) {
+    showTitle.value = true;
+  } else {
+    showTitle.value = false;
+  }
+}
 </script>
 
 <template>
-  <div lg:grid lg:grid-cols-4 h-screen class="h-100dvh!">
+  <div lg:grid lg:grid-cols-4 h-screen class="h-100dvh!" overflow-auto>
     <SidebarComponent ref="sidebar-ref">
       <h3 m-b-2><a href="/activities/" class="text-unset!" decoration-none @click="sidebarRef?.toggleSidebar()">活动</a>
       </h3>
@@ -72,13 +80,28 @@ onMounted(() => {
       </div>
     </SidebarComponent>
 
-    <div lg:col-span-3 p-y-12 p-x-6 lg:p-x-12 overflow-auto ref="scrollViewRef" class="svr">
-      <TopbarComponent :toggleSidebarFn="sidebarRef?.toggleSidebar" />
+    <div lg:col-span-3 p-y-12 p-x-6 lg:p-x-12 overflow-auto h-screen box-border ref="scrollViewRef"
+      @scroll="handleScroll">
+      <TopbarComponent :toggleSidebarFn="sidebarRef?.toggleSidebar" :title="title ?? '活动'" :show-title="showTitle" />
       <div v-if="currentActivity" m-b-8 max-w-800px m-x-auto m-t-4 lg:m-t-0>
         <h1 m-0>{{ currentActivity.title }}</h1>
         <span text-gray-500 block m-t-2 dark:text-gray-300>{{ dateString(currentActivity.time) }}</span>
       </div>
-      <component :is="Content" max-w-800px m-x-auto />
+      <Transition mode="out-in">
+        <component :is="Content" max-w-800px m-x-auto />
+      </Transition>
     </div>
   </div>
 </template>
+
+<style lang="css" scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -24,19 +24,20 @@ useTitle('北京大学 Linux 俱乐部')
 </script>
 
 <template>
-  <main>
-    <div w-full md:h-screen class="md:h-100dvh!" md:grid md:grid-cols-3 max-w-1680px m-x-auto>
-      <div flex="~ items-center justify-center col" w-full h-full m-t-24 md:m-t-0>
+  <main p-l-6 lg:p-l-12>
+    <div w-full box-border sm:h-screen class="md:h-100dvh!" sm:grid sm:grid-cols-2 lg:grid-cols-3 max-w-1680px m-x-auto
+      gap-6 lg:gap-12>
+      <div flex="~ items-center justify-center col" w-full h-full box-border m-t-24 sm:m-t-0 p-r-6 sm:p-r-0>
         <AutoDarkImage h-48 :src="LcpuDark" :src-dark="LcpuLight" />
-        <span m-t-8 text-3xl font-semibold>北京大学 Linux 俱乐部</span>
+        <h1 m-t-8 m-b-0 text-center>北京大学 Linux 俱乐部</h1>
         <span m-t-1 text-lg>Linux Club of Peking University</span>
         <a href="https://github.com/lcpu-club" h-8 w-8 m-t-8>
           <AutoDarkImage :src="GithubMark" :src-dark="GithubMarkWhite" h-full w-full />
         </a>
       </div>
-      <div col-span-2 p-x-6 p-y-12 md:p-x-12 overflow-auto>
+      <div lg:col-span-2 overflow-auto p-y-12 p-r-6 lg:p-r-12>
         <h2>项目</h2>
-        <div grid md:grid-cols-2 lg:grid-cols-3 gap-2>
+        <div grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2>
           <ProjectCard v-for="project in projects" :key="project.title" :project="project" />
         </div>
 

diff --git a/src/views/NewsView.vue b/src/views/NewsView.vue
@@ -18,6 +18,7 @@ const newsModules = inject('newsModules') as Record<string, () => Promise<unknow
 const title = useTitle('', { titleTemplate: '%s | 新闻 - 北京大学 Linux 俱乐部' });
 const currentNews = ref<News | null>();
 const scrollViewRef = ref<HTMLDivElement>();
+const showTitle = ref(false);
 const sidebarRef = useTemplateRef('sidebar-ref')
 
 async function resolvePageModule(routerPath: string): Promise<Module | never> {
@@ -47,18 +48,26 @@ watch(route, async (newVal) => {
   if ('default' in module)
     Content.value = module.default;
   else Content.value = module;
-  scrollViewRef.value?.scrollTo({ top: 0, behavior: 'auto' });
-  scrollViewRef.value?.scrollIntoView({ behavior: 'auto' });
+  scrollViewRef.value?.scrollTo({ top: 0, behavior: 'smooth' });
 })
 
 onMounted(() => {
-  scrollViewRef.value?.scrollTo({ top: 0, behavior: 'auto' });
-  scrollViewRef.value?.scrollIntoView({ behavior: 'auto' });
+  scrollViewRef.value?.scrollTo({ top: 0, behavior: 'smooth' });
 })
+
+function handleScroll() {
+  const scrollTop = scrollViewRef.value?.scrollTop;
+  if (scrollTop == undefined) return;
+  if (scrollTop > 60) {
+    showTitle.value = true;
+  } else {
+    showTitle.value = false;
+  }
+}
 </script>
 
 <template>
-  <div lg:grid lg:grid-cols-4 h-screen class="h-100dvh!">
+  <div lg:grid lg:grid-cols-4 h-screen class="h-100dvh!" overflow-auto>
     <SidebarComponent ref="sidebar-ref">
       <h3 m-b-2>新闻</h3>
       <div flex="~ col gap-2">
@@ -70,8 +79,9 @@ onMounted(() => {
       </div>
     </SidebarComponent>
 
-    <div lg:col-span-3 p-y-12 p-x-6 md:p-x-12 overflow-auto ref="scrollViewRef">
-      <TopbarComponent :toggleSidebarFn="sidebarRef?.toggleSidebar" />
+    <div lg:col-span-3 p-y-12 p-x-6 lg:p-x-12 overflow-auto h-screen box-border ref="scrollViewRef"
+      @scroll="handleScroll">
+      <TopbarComponent :toggleSidebarFn="sidebarRef?.toggleSidebar" :title="title ?? '新闻'" :show-title="showTitle" />
       <div v-if="currentNews" m-b-8 max-w-800px m-x-auto m-t-4 lg:m-t-0>
         <h1 m-0>{{ currentNews.title }}</h1>
         <div flex="~ items-center gap-1" m-t-2 text-gray-500 dark:text-gray-300>
@@ -80,7 +90,21 @@ onMounted(() => {
           <span v-if="currentNews.category?.trim()">{{ currentNews.category }}</span>
         </div>
       </div>
-      <component :is="Content" max-w-800px m-x-auto />
+      <Transition mode="out-in">
+        <component :is="Content" max-w-800px m-x-auto />
+      </Transition>
     </div>
   </div>
 </template>
+
+<style lang="css" scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>