fix: header fonts

np-inprove · Aug 1, 2023 · 19b8bb3 · 19b8bb3
1 parent 796bc8e
commit 19b8bb3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 32 deletions.
diff --git a/components/forum-post/Header.vue b/components/forum-post/Header.vue
@@ -16,13 +16,21 @@ const { data: forum, isLoading: forumIsLoading } = useForum(props.forumId)
 </script>
 
 <template>
-  <header class="header flex items-center justify-between border-b-1 border-b-$surface-border border-b-solid px6 py4">
-    <Skeleton v-if="groupIsLoading || forumIsLoading" height="20px" width="30%" />
+  <header class="header flex items-center border-b-1 border-b-$surface-border border-b-solid px6 py4">
+    <div md:hidden>
+      <Button text size="small" :pt="{ root: { style: 'padding: 0 !important' } }" @click="visible = !visible">
+        <div v-if="visible" class="text-xl" i-tabler-layout-sidebar-left-collapse />
+        <div v-else class="text-xl" i-tabler-layout-sidebar-left-expand />
+      </Button>
+    </div>
 
+    <Skeleton v-if="groupIsLoading || forumIsLoading" height="20px" width="30%" />
     <Transition v-else-if="group && forum" appear>
       <span flex="~ gap3 items-center">
         <NuxtLink to="../../..">
-          {{ group.name }}
+          <strong>
+            {{ group.name }}
+          </strong>
         </NuxtLink>
         <span>
           /
@@ -41,15 +49,6 @@ const { data: forum, isLoading: forumIsLoading } = useForum(props.forumId)
         </small>
       </span>
     </Transition>
-
-    <div flex items-center gap3>
-      <div md:hidden>
-        <Button text size="small" :pt="{ root: { style: 'padding: 0 !important' } }" @click="visible = !visible">
-          <div v-if="visible" class="text-xl" i-tabler-layout-sidebar-left-collapse />
-          <div v-else class="text-xl" i-tabler-layout-sidebar-left-expand />
-        </Button>
-      </div>
-    </div>
   </header>
 </template>
 

diff --git a/components/forum/Header.vue b/components/forum/Header.vue
@@ -86,13 +86,21 @@ function createPost() {
     </form>
   </Dialog>
 
-  <header class="header flex items-center justify-between border-b-1 border-b-$surface-border border-b-solid px6 py4">
-    <Skeleton v-if="groupIsLoading || forumIsLoading" height="20px" width="30%" />
+  <header class="header flex items-center border-b-1 border-b-$surface-border border-b-solid px6 py4">
+    <div md:hidden>
+      <Button text size="small" :pt="{ root: { style: 'padding: 0 !important' } }" @click="visible = !visible">
+        <div v-if="visible" class="text-xl" i-tabler-layout-sidebar-left-collapse />
+        <div v-else class="text-xl" i-tabler-layout-sidebar-left-expand />
+      </Button>
+    </div>
 
+    <Skeleton v-if="groupIsLoading || forumIsLoading" height="20px" width="30%" />
     <Transition v-else-if="group && forum" appear>
       <span flex="~ gap3 items-center">
         <NuxtLink to="../..">
-          {{ group.name }}
+          <strong>
+            {{ group.name }}
+          </strong>
         </NuxtLink>
         <span>
           /
@@ -112,15 +120,8 @@ function createPost() {
       </span>
     </Transition>
 
-    <div flex items-center gap3>
+    <div flex flex-1 items-center gap3>
       <Button :pt="{ root: { style: 'padding: 6px !important' } }" size="small" outlined type="button" label="New post" @click="formData.visible = true" />
-
-      <div md:hidden>
-        <Button text size="small" :pt="{ root: { style: 'padding: 0 !important' } }" @click="visible = !visible">
-          <div v-if="visible" class="text-xl" i-tabler-layout-sidebar-left-collapse />
-          <div v-else class="text-xl" i-tabler-layout-sidebar-left-expand />
-        </Button>
-      </div>
     </div>
   </header>
 </template>

diff --git a/components/group/Header.vue b/components/group/Header.vue
@@ -12,23 +12,25 @@ const { data: group, isLoading: groupIsLoading } = useGroup(props.groupId)
 </script>
 
 <template>
-  <header class="header flex items-center justify-between border-b-1 border-b-$surface-border border-b-solid px6 py4">
+  <header class="header flex items-center border-b-1 border-b-$surface-border border-b-solid px6 py4">
+    <div md:hidden>
+      <Button text size="small" :pt="{ root: { style: 'padding: 0 !important' } }" @click="visible = !visible">
+        <div v-if="visible" class="text-xl" i-tabler-layout-sidebar-left-collapse />
+        <div v-else class="text-xl" i-tabler-layout-sidebar-left-expand />
+      </Button>
+    </div>
+
     <Skeleton v-if="groupIsLoading" height="20px" width="30%" />
     <Transition v-else-if="group" appear>
       <span>
-        {{ group.name }}
+        <strong>
+          {{ group.name }}
+        </strong>
         {{ " " }}
         <small>
           {{ group.description }}
         </small>
       </span>
     </Transition>
-
-    <div md:hidden>
-      <Button text size="small" :pt="{ root: { style: 'padding: 0 !important' } }" @click="visible = !visible">
-        <div v-if="visible" class="text-xl" i-tabler-layout-sidebar-left-collapse />
-        <div v-else class="text-xl" i-tabler-layout-sidebar-left-expand />
-      </Button>
-    </div>
   </header>
 </template>