fix: profile banner sm
This commit is contained in:
puriphatt
parent
7b92765f6a
commit
9a98809d4b
1 changed files with 155 additions and 7 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue