fix: fixed mobile layout header size and menu icon

metalmon · Oct 31, 2024 · d3a6694 · d3a6694
1 parent 5ee2717
commit d3a6694
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 19 deletions.
diff --git a/frontend/src/components/Icons/DetailsIcon.vue b/frontend/src/components/Icons/DetailsIcon.vue
@@ -1,20 +1,16 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
-    viewBox="0 0 24 24"
+    viewBox="0 0 16 16"
     fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="lucide lucide-list-collapse"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="m3 10 2.5-2.5L3 5" />
-    <path d="m3 19 2.5-2.5L3 14" />
-    <path d="M10 6h11" />
-    <path d="M10 12h11" />
-    <path d="M10 18h11" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.7499 2H4.24988C3.42145 2 2.74988 2.67157 2.74988 3.5V12.5C2.74988 13.3284 3.42145 14 4.24988 14H11.7499C12.5783 14 13.2499 13.3284 13.2499 12.5V3.5C13.2499 2.67157 12.5783 2 11.7499 2ZM4.24988 1C2.86917 1 1.74988 2.11929 1.74988 3.5V12.5C1.74988 13.8807 2.86917 15 4.24988 15H11.7499C13.1306 15 14.2499 13.8807 14.2499 12.5V3.5C14.2499 2.11929 13.1306 1 11.7499 1H4.24988ZM5.99997 8.125C5.99997 8.47018 5.72015 8.75 5.37497 8.75C5.02979 8.75 4.74997 8.47018 4.74997 8.125C4.74997 7.77982 5.02979 7.5 5.37497 7.5C5.72015 7.5 5.99997 7.77982 5.99997 8.125ZM5.37497 5.75C5.72015 5.75 5.99997 5.47018 5.99997 5.125C5.99997 4.77982 5.72015 4.5 5.37497 4.5C5.02979 4.5 4.74997 4.77982 4.74997 5.125C4.74997 5.47018 5.02979 5.75 5.37497 5.75ZM5.99997 11.125C5.99997 11.4702 5.72015 11.75 5.37497 11.75C5.02979 11.75 4.74997 11.4702 4.74997 11.125C4.74997 10.7798 5.02979 10.5 5.37497 10.5C5.72015 10.5 5.99997 10.7798 5.99997 11.125ZM7.24997 4.625C6.97383 4.625 6.74997 4.84886 6.74997 5.125C6.74997 5.40114 6.97383 5.625 7.24997 5.625H11.25C11.5261 5.625 11.75 5.40114 11.75 5.125C11.75 4.84886 11.5261 4.625 11.25 4.625H7.24997ZM6.74997 8.125C6.74997 7.84886 6.97383 7.625 7.24997 7.625H11.25C11.5261 7.625 11.75 7.84886 11.75 8.125C11.75 8.40114 11.5261 8.625 11.25 8.625H7.24997C6.97383 8.625 6.74997 8.40114 6.74997 8.125ZM7.24997 10.625C6.97383 10.625 6.74997 10.8489 6.74997 11.125C6.74997 11.4011 6.97383 11.625 7.24997 11.625H11.25C11.5261 11.625 11.75 11.4011 11.75 11.125C11.75 10.8489 11.5261 10.625 11.25 10.625H7.24997Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/frontend/src/components/Icons/MenuIcon.vue b/frontend/src/components/Icons/MenuIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.5 3.2002C2.5 2.92405 2.72386 2.7002 3 2.7002H13C13.2761 2.7002 13.5 2.92405 13.5 3.2002C13.5 3.47634 13.2761 3.7002 13 3.7002H3C2.72386 3.7002 2.5 3.47634 2.5 3.2002ZM2.5 8.00024C2.5 7.7241 2.72386 7.50024 3 7.50024H13C13.2761 7.50024 13.5 7.7241 13.5 8.00024C13.5 8.27639 13.2761 8.50024 13 8.50024H3C2.72386 8.50024 2.5 8.27639 2.5 8.00024ZM3 12.3003C2.72386 12.3003 2.5 12.5242 2.5 12.8003C2.5 13.0764 2.72386 13.3003 3 13.3003H13C13.2761 13.3003 13.5 13.0764 13.5 12.8003C13.5 12.5242 13.2761 12.3003 13 12.3003H3Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="#app-header" v-if="showHeader">
     <slot>
-      <header class="flex h-10.5 items-center justify-between py-[7px] pl-5">
+      <header class="flex h-10.5 items-center justify-between py-[7px] sm:pl-5 pl-2">
         <div class="flex items-center gap-2">
           <slot name="left-header" />
         </div>

diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="flex border-b pr-3">
-    <div class="z-20 -mr-4 ml-1 flex items-center justify-center">
-      <Button variant="ghosted" @click="sidebarOpened = !sidebarOpened">
-        <FeatherIcon name="menu" class="size-4" />
+  <div class="flex pr-3">
+    <div class="z-20 ml-2 flex items-center justify-center">
+      <Button
+        class="size-7"
+        variant="ghosted"
+        @click="sidebarOpened = !sidebarOpened"
+      >
+        <MenuIcon class="h-4" />
       </Button>
     </div>
     <div id="app-header" class="flex-1" />
@@ -11,6 +15,7 @@
 </template>
 
 <script setup>
+import MenuIcon from '@/components/Icons/MenuIcon.vue'
 import CallUI from '@/components/CallUI.vue'
 import { mobileSidebarOpened as sidebarOpened } from '@/composables/settings'
 </script>
diff --git a/frontend/src/pages/MobileDeal.vue b/frontend/src/pages/MobileDeal.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader v-if="deal.data">
     <header
-      class="relative flex h-12 items-center justify-between gap-2 py-2.5 pl-5"
+      class="relative flex h-10.5 items-center justify-between gap-2 py-2.5 pl-2"
     >
       <Breadcrumbs :items="breadcrumbs">
         <template #prefix="{ item }">

diff --git a/frontend/src/pages/MobileLead.vue b/frontend/src/pages/MobileLead.vue
@@ -1,7 +1,7 @@
 <template>
   <LayoutHeader v-if="lead.data">
     <header
-      class="relative flex h-12 items-center justify-between gap-2 py-2.5 pl-5"
+      class="relative flex h-10.5 items-center justify-between gap-2 py-2.5 pl-2"
     >
       <Breadcrumbs :items="breadcrumbs">
         <template #prefix="{ item }">