fix: menu item first page responsive
This commit is contained in:
puriphatt
parent
6491a761e3
commit
805603e9c2
3 changed files with 212 additions and 186 deletions
|
|
@ -149,200 +149,218 @@ onMounted(async () => {
|
|||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<q-btn-dropdown
|
||||
<q-btn
|
||||
rounded
|
||||
dense
|
||||
flat
|
||||
no-caps
|
||||
content-style="border: 1px solid var(--border-color)"
|
||||
:menu-offset="[0, 10]"
|
||||
color="dark"
|
||||
class="q-pa-none account-menu-down dropdown-menu"
|
||||
>
|
||||
<template v-slot:label>
|
||||
<q-item dense class="q-pa-none">
|
||||
<q-item-section avatar class="q-pa-none" style="min-width: 30px">
|
||||
<q-avatar class="surface-1 bordered">
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
<q-icon name="mdi-account" v-else size="sm" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
v-if="$q.screen.gt.xs"
|
||||
class="text-left q-pa-none q-px-md"
|
||||
<div class="row items-center">
|
||||
<div class="q-pa-none">
|
||||
<q-avatar
|
||||
class="surface-1 bordered"
|
||||
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
||||
>
|
||||
<q-item-label class="text-caption column">
|
||||
<span
|
||||
v-if="isLoggedIn()"
|
||||
class="text-weight-bold q-pb-xs ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
<q-icon
|
||||
name="mdi-account"
|
||||
v-else
|
||||
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-left q-px-md"
|
||||
v-if="$q.screen.gt.sm"
|
||||
style="color: var(--foreground)"
|
||||
>
|
||||
<div class="text-caption column">
|
||||
<span
|
||||
v-if="isLoggedIn()"
|
||||
class="text-weight-bold ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
{{ getName() }}
|
||||
<q-tooltip>
|
||||
{{ getName() }}
|
||||
<q-tooltip>
|
||||
{{ getName() }}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-weight-bold q-pb-xs ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-weight-bold q-pb-xs ellipsis"
|
||||
style="max-width: 9vw"
|
||||
>
|
||||
{{ 'Guest' }}
|
||||
<q-tooltip>
|
||||
{{ 'Guest' }}
|
||||
<q-tooltip>
|
||||
{{ 'Guest' }}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
</q-tooltip>
|
||||
</span>
|
||||
|
||||
<div style="font-size: 11px; color: var(--surface)">
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<div style="font-size: 11px">
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div no-padding class="row justify-center" style="width: 273.797px">
|
||||
<div class="column col-12 items-center">
|
||||
<div class="full-width row justify-center" style="position: relative">
|
||||
<div v-if="$q.screen.gt.sm" class="text-right">
|
||||
<q-icon name="mdi-chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-menu :offset="[5, 10]">
|
||||
<div
|
||||
no-padding
|
||||
class="row justify-center bordered rounded"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<div class="column col-12 items-center">
|
||||
<div
|
||||
class="full-width account-cover"
|
||||
class="full-width row justify-center"
|
||||
style="position: relative"
|
||||
>
|
||||
<div
|
||||
class="full-width account-cover"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
></div>
|
||||
<div class="avartar-border">
|
||||
<q-avatar
|
||||
id="changeAvatar"
|
||||
size="72px"
|
||||
class="surface-1 bordered"
|
||||
:class="{ 'hover-profile': isLoggedIn() }"
|
||||
@click="
|
||||
() => {
|
||||
isLoggedIn() ? inputFile.click() : '';
|
||||
}
|
||||
"
|
||||
>
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
<q-icon name="mdi-account" v-else />
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-subtitle2 q-mb-xs text-center"
|
||||
style="margin-top: 58px"
|
||||
>
|
||||
<span v-if="isLoggedIn()">
|
||||
{{ getName() }}
|
||||
</span>
|
||||
<span v-else>{{ 'Guest' }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="badge q-px-sm q-mb-md text-caption"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
></div>
|
||||
<div class="avartar-border">
|
||||
<q-avatar
|
||||
id="changeAvatar"
|
||||
size="72px"
|
||||
class="surface-1 bordered"
|
||||
:class="{ 'hover-profile': isLoggedIn() }"
|
||||
@click="
|
||||
() => {
|
||||
isLoggedIn() ? inputFile.click() : '';
|
||||
}
|
||||
"
|
||||
>
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
<q-icon name="mdi-account" v-else />
|
||||
</q-avatar>
|
||||
>
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-subtitle2 q-mb-xs text-center"
|
||||
style="margin-top: 58px"
|
||||
>
|
||||
<span v-if="isLoggedIn()">
|
||||
{{ getName() }}
|
||||
</span>
|
||||
<span v-else>{{ 'Guest' }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="badge q-px-sm q-mb-md text-caption"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ filterRole?.join(' | ') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
<q-separator />
|
||||
<div class="column justify-center">
|
||||
<q-list :dense="true" v-for="op in options" :key="op.label">
|
||||
<q-item
|
||||
v-if="op.label !== 'mode'"
|
||||
clickable
|
||||
:id="`btn-${op.label}`"
|
||||
@click="$emit(op.label)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
{{ $t(op.label) }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator v-if="op.label === 'mode'" />
|
||||
<q-item
|
||||
v-if="op.label === 'mode'"
|
||||
clickable
|
||||
:id="`btn-${op.label}`"
|
||||
@click="$emit(op.label)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(op.label) }}
|
||||
</span>
|
||||
<span class="app-text-muted-2">
|
||||
{{ $t(currentTheme) }}
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</span>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-menu
|
||||
class="bordered rounded"
|
||||
anchor="top right"
|
||||
self="top left"
|
||||
max-width="200"
|
||||
:offset="[10, 0]"
|
||||
style="width: 160px"
|
||||
<div class="column col-12">
|
||||
<q-separator />
|
||||
<div class="column justify-center">
|
||||
<q-list :dense="true" v-for="op in options" :key="op.label">
|
||||
<q-item
|
||||
v-if="op.label !== 'mode'"
|
||||
clickable
|
||||
:id="`btn-${op.label}`"
|
||||
@click="$emit(op.label)"
|
||||
>
|
||||
<div v-for="(mode, index) in themeMode" :key="index">
|
||||
<q-item
|
||||
clickable
|
||||
@click="
|
||||
() => {
|
||||
changeMode(mode.value);
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(mode.label) }}
|
||||
</span>
|
||||
<q-icon v-if="mode.isActive" name="mdi-check" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
{{ $t(op.label) }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator v-if="op.label === 'mode'" />
|
||||
<q-item
|
||||
v-if="op.label === 'mode'"
|
||||
clickable
|
||||
:id="`btn-${op.label}`"
|
||||
@click="$emit(op.label)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(op.label) }}
|
||||
</span>
|
||||
<span class="app-text-muted-2">
|
||||
{{ $t(currentTheme) }}
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</span>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
<q-menu
|
||||
class="bordered rounded"
|
||||
anchor="top right"
|
||||
self="top left"
|
||||
max-width="200"
|
||||
:offset="[10, 0]"
|
||||
style="width: 160px"
|
||||
>
|
||||
<div v-for="(mode, index) in themeMode" :key="index">
|
||||
<q-item
|
||||
clickable
|
||||
@click="
|
||||
() => {
|
||||
changeMode(mode.value);
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(mode.label) }}
|
||||
</span>
|
||||
<q-icon v-if="mode.isActive" name="mdi-check" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</q-menu>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-btn
|
||||
v-if="isLoggedIn()"
|
||||
no-caps
|
||||
dense
|
||||
unelevated
|
||||
class="q-ma-md app-text-negative"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
:label="$t('logout')"
|
||||
@click="$emit('logout')"
|
||||
id="btn-logout"
|
||||
style="background-color: hsla(var(--negative-bg) / 0.1)"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
no-caps
|
||||
dense
|
||||
color="primary"
|
||||
unelevated
|
||||
class="q-ma-md app-text-negative"
|
||||
:label="$t('login')"
|
||||
@click="$emit('login')"
|
||||
id="btn-login"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-btn
|
||||
v-if="isLoggedIn()"
|
||||
no-caps
|
||||
dense
|
||||
unelevated
|
||||
class="q-ma-md app-text-negative"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
:label="$t('logout')"
|
||||
@click="$emit('logout')"
|
||||
id="btn-logout"
|
||||
style="background-color: hsla(var(--negative-bg) / 0.1)"
|
||||
v-close-popup
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
no-caps
|
||||
dense
|
||||
color="primary"
|
||||
unelevated
|
||||
class="q-ma-md app-text-negative"
|
||||
:label="$t('login')"
|
||||
@click="$emit('login')"
|
||||
id="btn-login"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-btn-dropdown>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,10 @@ function navigateTo(destination: string) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="menu-container">
|
||||
<div
|
||||
class="menu-container"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.gt.sm ? 4 : $q.screen.gt.xs ? 2 : 1}, 1fr)`"
|
||||
>
|
||||
<AppBox
|
||||
class="column inline-flex items-center"
|
||||
:class="{ disabled: !!v.disabled }"
|
||||
|
|
@ -61,7 +64,7 @@ function navigateTo(destination: string) {
|
|||
<style scoped>
|
||||
.menu-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
gap: var(--size-6);
|
||||
& > * {
|
||||
transition: 100ms border-color ease-in-out;
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ onMounted(async () => {
|
|||
<!-- drawer control -->
|
||||
<div
|
||||
style="position: relative"
|
||||
:style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 1'"
|
||||
:style="$q.screen.gt.xs ? 'z-index: 1000' : 'z-index: 10'"
|
||||
>
|
||||
<q-avatar
|
||||
size="36px"
|
||||
|
|
@ -209,20 +209,25 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="surface-3 bordered rounded q-px-lg q-pb-lg scroll column"
|
||||
class="surface-3 bordered rounded q-pb-lg scroll column"
|
||||
style="height: calc(100vh - 32px); flex-wrap: nowrap"
|
||||
>
|
||||
<!-- header -->
|
||||
<div
|
||||
class="row items-center justify-between q-pb-md surface-3 q-pt-lg"
|
||||
class="q-px-lg row items-center justify-between q-pb-md surface-3 q-pt-lg"
|
||||
style="position: sticky; top: 0; z-index: 8"
|
||||
>
|
||||
<div class="column">
|
||||
<span class="title-gradient text-h6 text-weight-bold">
|
||||
<span
|
||||
class="title-gradient text-weight-bold"
|
||||
:class="{ 'text-h6': $q.screen.gt.xs }"
|
||||
>
|
||||
{{
|
||||
utilsStore.currentTitle?.title
|
||||
? $t(utilsStore.currentTitle?.title)
|
||||
: 'Welcome to Jobs Worker Service'
|
||||
: $q.screen.gt.xs
|
||||
? 'Welcome to Jobs Worker Service'
|
||||
: 'Jobs Worker Service'
|
||||
}}
|
||||
</span>
|
||||
<span class="text-caption">
|
||||
|
|
@ -241,6 +246,7 @@ onMounted(async () => {
|
|||
dense
|
||||
flat
|
||||
class="noti-circle"
|
||||
:size="$q.screen.lt.sm ? 'sm' : ''"
|
||||
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
||||
style="color: var(--surface-1)"
|
||||
@click="notiOpen = !notiOpen"
|
||||
|
|
@ -254,7 +260,6 @@ onMounted(async () => {
|
|||
:offset="[0, 10]"
|
||||
anchor="bottom middle"
|
||||
self="top middle"
|
||||
style="width: 300px"
|
||||
@before-hide="notiOpen = false"
|
||||
>
|
||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||
|
|
@ -334,19 +339,19 @@ onMounted(async () => {
|
|||
<q-btn
|
||||
round
|
||||
unelevated
|
||||
:size="$q.screen.lt.sm ? 'sm' : ''"
|
||||
v-model="currentLanguage"
|
||||
class="no-uppercase"
|
||||
size="md"
|
||||
>
|
||||
<Icon
|
||||
v-if="currentLanguage === 'English'"
|
||||
icon="circle-flags:us"
|
||||
style="width: 36px; height: 35px"
|
||||
:width="$q.screen.lt.sm ? '28px' : '36px'"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
icon="circle-flags:th"
|
||||
style="width: 36px; height: 35px"
|
||||
:width="$q.screen.lt.sm ? '28px' : '36px'"
|
||||
/>
|
||||
|
||||
<q-menu
|
||||
|
|
@ -393,7 +398,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-page class="col">
|
||||
<q-page class="col q-px-lg">
|
||||
<router-view />
|
||||
</q-page>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue