From 9a98809d4b453f8850c8dc6385955f2d08bab5d6 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 27 Sep 2024 15:21:02 +0700
Subject: [PATCH] fix: profile banner sm

---
 src/components/ProfileBanner.vue | 162 +++++++++++++++++++++++++++++--
 1 file changed, 155 insertions(+), 7 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index 258b3fd9..f376839c 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -21,7 +21,7 @@ defineProps<{
   useToggle?: boolean;
 
   menu?: { icon: string; color: string; bgColor: string }[];
-  tabsList?: { name: string | number; label: string }[];
+  tabsList?: { name: string | number; label: string }[] | boolean;
 }>();
 
 defineEmits<{
@@ -46,9 +46,10 @@ const showOverlay = ref(false);
 </script>
 <template>
   <q-img
+    v-if="$q.screen.gt.sm"
     fit="cover"
     class="cover rounded bordered relative-position"
-    :style="`height: ${tabsList ? '12rem' : '10rem'}`"
+    :style="`height: ${tabsList ? '180px' : '10vw'}`"
     :src="coverUrl || fallbackCover || '/blank-cover.png'"
     @error="coverUrl = ''"
   >
@@ -69,8 +70,8 @@ const showOverlay = ref(false);
           style="border-radius: 50%; border: 4px solid var(--surface-1)"
         >
           <q-avatar
-            size="6rem"
-            font-size="3rem"
+            size="6vw"
+            font-size="3vw"
             class="relative-position"
             style="z-index: 1; box-shadow: var(--shadow-2)"
             :style="{
@@ -136,7 +137,7 @@ const showOverlay = ref(false);
               v-if="!hideActive"
               class="absolute-bottom-right"
               style="
-                border-radius: 10px;
+                border-radius: 50%;
                 width: 20px;
                 height: 20px;
                 z-index: 2;
@@ -145,7 +146,7 @@ const showOverlay = ref(false);
             >
               <q-badge
                 class="absolute-center"
-                style="border-radius: 7px; width: 14px; height: 14px"
+                style="border-radius: 50%; width: 14px; height: 14px"
                 :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
               ></q-badge>
             </q-badge>
@@ -241,10 +242,11 @@ const showOverlay = ref(false);
               active-class="active-tab text-weight-bold"
               class="app-text-muted full-width"
               align="left"
+              v-if="typeof tabsList === 'object'"
             >
               <q-tab
-                :id="`tab-${tab.label}`"
                 v-for="tab in tabsList"
+                :id="`tab-${tab.label}`"
                 v-bind:key="tab.name"
                 class="content-tab text-capitalize"
                 :name="tab.name"
@@ -256,6 +258,152 @@ const showOverlay = ref(false);
       </div>
     </nav>
   </q-img>
+
+  <!-- small -->
+  <q-img
+    v-else
+    fit="cover"
+    class="cover rounded bordered relative-position"
+    :style="`height: 45px`"
+    :src="coverUrl || fallbackCover || '/blank-cover.png'"
+    @error="coverUrl = ''"
+  >
+    <nav
+      class="full-width full-height row no-wrap items-center"
+      :style="`background-image: linear-gradient(
+          90deg, ${
+            $q.dark.isActive
+              ? `hsla(var(--gray-10-hsl) / ${hideFade ? '0' : '1'}) 10%,hsla(var(--gray-10-hsl) / 0) 100%`
+              : `rgba(255, 255, 255, ${hideFade ? '0' : '1'}) 10%,rgba(255, 255, 255, 0) 100%`
+          }
+        )`"
+    >
+      <!-- profile -->
+      <div class="flex items-center full-height q-pl-lg" style="z-index: 1">
+        <div
+          class="surface-1"
+          style="border-radius: 50%; border: 2px solid var(--surface-1)"
+        >
+          <q-avatar
+            size="35px"
+            font-size="20px"
+            class="relative-position"
+            style="z-index: 1; box-shadow: var(--shadow-2)"
+            :style="{
+              color: `${color || 'white'}`,
+              cursor: `${noImageAction ? 'default' : 'pointer'}`,
+            }"
+            @mouseover="showOverlay = true"
+            @mouseleave="showOverlay = false"
+            @click.stop="$emit('view')"
+          >
+            <div
+              v-if="img"
+              class="full-width full-height"
+              :style="{
+                background: `${bgColor || 'var(--brand-1)'}`,
+                color: `${color || 'white'}`,
+              }"
+            >
+              <q-img id="profile-view" :src="img" :ratio="1">
+                <template #error>
+                  <q-img
+                    v-if="fallbackImg"
+                    :src="fallbackImg"
+                    :ratio="1"
+                    style="background-color: transparent"
+                  >
+                    <template #error>
+                      <div
+                        class="full-width full-height flex items-center justify-center"
+                        :style="{
+                          background: `${bgColor || 'var(--brand-1)'}`,
+                          color: `${color || 'white'}`,
+                        }"
+                      >
+                        <q-icon
+                          class="full-width full-height flex items-center justify-center"
+                          :name="icon || 'mdi-account'"
+                        />
+                      </div>
+                    </template>
+                  </q-img>
+                  <div
+                    v-else
+                    class="full-width full-height flex items-center justify-center"
+                    :style="{
+                      background: `${bgColor || 'var(--brand-1)'}`,
+                      color: `${color || 'white'}`,
+                    }"
+                  >
+                    <q-icon
+                      class="full-width full-height flex items-center justify-center"
+                      :name="icon || 'mdi-account'"
+                    />
+                  </div>
+                </template>
+              </q-img>
+            </div>
+            <div
+              v-else
+              class="full-width full-height flex items-center justify-center"
+              :style="{
+                background: `${bgColor || 'var(--brand-1)'}`,
+                color: `${color || 'white'}`,
+              }"
+            >
+              <q-icon
+                class="full-width full-height flex items-center justify-center"
+                :name="icon || 'mdi-account'"
+              />
+            </div>
+
+            <div
+              v-if="!hideActive"
+              class="absolute-bottom-right"
+              style="
+                border-radius: 50%;
+                width: 10px;
+                height: 10px;
+                z-index: 2;
+                background: var(--surface-1);
+              "
+            >
+              <div
+                class="absolute-center"
+                style="border-radius: 50%; width: 8px; height: 8px"
+                :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
+              />
+            </div>
+          </q-avatar>
+        </div>
+      </div>
+
+      <div class="col column full-height text-caption q-ml-md">
+        <span class="text-bold ellipsis absolute" style="bottom: 16px">
+          {{ title }}
+          <q-tooltip anchor="bottom left" self="center left" :delay="300">
+            {{ title }}
+          </q-tooltip>
+        </span>
+        <span
+          v-if="title"
+          class="app-text-muted absolute"
+          style="font-size: 10px; bottom: 4px"
+        >
+          {{ caption }}
+        </span>
+      </div>
+
+      <ToggleButton
+        v-if="useToggle"
+        class="q-mr-lg"
+        two-way
+        :model-value="toggleStatus !== 'INACTIVE'"
+        @click="$emit('update:toggleStatus', toggleStatus)"
+      />
+    </nav>
+  </q-img>
 </template>
 
 <style lang="scss">