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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<q-btn-dropdown
|
<q-btn
|
||||||
rounded
|
rounded
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
no-caps
|
no-caps
|
||||||
content-style="border: 1px solid var(--border-color)"
|
|
||||||
:menu-offset="[0, 10]"
|
|
||||||
color="dark"
|
color="dark"
|
||||||
class="q-pa-none account-menu-down dropdown-menu"
|
class="q-pa-none account-menu-down dropdown-menu"
|
||||||
>
|
>
|
||||||
<template v-slot:label>
|
<div class="row items-center">
|
||||||
<q-item dense class="q-pa-none">
|
<div class="q-pa-none">
|
||||||
<q-item-section avatar class="q-pa-none" style="min-width: 30px">
|
<q-avatar
|
||||||
<q-avatar class="surface-1 bordered">
|
class="surface-1 bordered"
|
||||||
<img :src="userImage" v-if="userImage" />
|
:size="$q.screen.lt.sm ? '30px' : '40px'"
|
||||||
<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"
|
|
||||||
>
|
>
|
||||||
<q-item-label class="text-caption column">
|
<img :src="userImage" v-if="userImage" />
|
||||||
<span
|
<q-icon
|
||||||
v-if="isLoggedIn()"
|
name="mdi-account"
|
||||||
class="text-weight-bold q-pb-xs ellipsis"
|
v-else
|
||||||
style="max-width: 9vw"
|
: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() }}
|
{{ getName() }}
|
||||||
<q-tooltip>
|
</q-tooltip>
|
||||||
{{ getName() }}
|
</span>
|
||||||
</q-tooltip>
|
<span
|
||||||
</span>
|
v-else
|
||||||
<span
|
class="text-weight-bold q-pb-xs ellipsis"
|
||||||
v-else
|
style="max-width: 9vw"
|
||||||
class="text-weight-bold q-pb-xs ellipsis"
|
>
|
||||||
style="max-width: 9vw"
|
{{ 'Guest' }}
|
||||||
>
|
<q-tooltip>
|
||||||
{{ 'Guest' }}
|
{{ 'Guest' }}
|
||||||
<q-tooltip>
|
</q-tooltip>
|
||||||
{{ 'Guest' }}
|
</span>
|
||||||
</q-tooltip>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div style="font-size: 11px; color: var(--surface)">
|
<div style="font-size: 11px">
|
||||||
{{ filterRole?.join(' | ') }}
|
{{ filterRole?.join(' | ') }}
|
||||||
</div>
|
</div>
|
||||||
</q-item-label>
|
</div>
|
||||||
</q-item-section>
|
</div>
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div no-padding class="row justify-center" style="width: 273.797px">
|
<div v-if="$q.screen.gt.sm" class="text-right">
|
||||||
<div class="column col-12 items-center">
|
<q-icon name="mdi-chevron-down" />
|
||||||
<div class="full-width row justify-center" style="position: relative">
|
</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
|
<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 }"
|
:class="{ dark: $q.dark.isActive }"
|
||||||
></div>
|
>
|
||||||
<div class="avartar-border">
|
{{ filterRole?.join(' | ') }}
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="column col-12">
|
||||||
class="text-subtitle2 q-mb-xs text-center"
|
<q-separator />
|
||||||
style="margin-top: 58px"
|
<div class="column justify-center">
|
||||||
>
|
<q-list :dense="true" v-for="op in options" :key="op.label">
|
||||||
<span v-if="isLoggedIn()">
|
<q-item
|
||||||
{{ getName() }}
|
v-if="op.label !== 'mode'"
|
||||||
</span>
|
clickable
|
||||||
<span v-else>{{ 'Guest' }}</span>
|
:id="`btn-${op.label}`"
|
||||||
</div>
|
@click="$emit(op.label)"
|
||||||
<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 v-for="(mode, index) in themeMode" :key="index">
|
<q-item-section avatar>
|
||||||
<q-item
|
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||||
clickable
|
</q-item-section>
|
||||||
@click="
|
<q-item-section class="q-py-sm">
|
||||||
() => {
|
{{ $t(op.label) }}
|
||||||
changeMode(mode.value);
|
</q-item-section>
|
||||||
}
|
</q-item>
|
||||||
"
|
|
||||||
>
|
<q-separator v-if="op.label === 'mode'" />
|
||||||
<q-item-section>
|
<q-item
|
||||||
<div class="row justify-between">
|
v-if="op.label === 'mode'"
|
||||||
<span>
|
clickable
|
||||||
{{ $t(mode.label) }}
|
:id="`btn-${op.label}`"
|
||||||
</span>
|
@click="$emit(op.label)"
|
||||||
<q-icon v-if="mode.isActive" name="mdi-check" />
|
>
|
||||||
</div>
|
<q-item-section avatar>
|
||||||
</q-item-section>
|
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||||
</q-item>
|
</q-item-section>
|
||||||
</div>
|
<q-item-section class="q-py-sm">
|
||||||
</q-menu>
|
<div class="row justify-between">
|
||||||
</q-item>
|
<span>
|
||||||
</q-list>
|
{{ $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>
|
</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>
|
||||||
</div>
|
</q-menu>
|
||||||
</q-btn-dropdown>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,10 @@ function navigateTo(destination: string) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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
|
<AppBox
|
||||||
class="column inline-flex items-center"
|
class="column inline-flex items-center"
|
||||||
:class="{ disabled: !!v.disabled }"
|
:class="{ disabled: !!v.disabled }"
|
||||||
|
|
@ -61,7 +64,7 @@ function navigateTo(destination: string) {
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.menu-container {
|
.menu-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: var(--size-6);
|
gap: var(--size-6);
|
||||||
& > * {
|
& > * {
|
||||||
transition: 100ms border-color ease-in-out;
|
transition: 100ms border-color ease-in-out;
|
||||||
|
|
|
||||||
|
|
@ -175,7 +175,7 @@ onMounted(async () => {
|
||||||
<!-- drawer control -->
|
<!-- drawer control -->
|
||||||
<div
|
<div
|
||||||
style="position: relative"
|
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
|
<q-avatar
|
||||||
size="36px"
|
size="36px"
|
||||||
|
|
@ -209,20 +209,25 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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"
|
style="height: calc(100vh - 32px); flex-wrap: nowrap"
|
||||||
>
|
>
|
||||||
<!-- header -->
|
<!-- header -->
|
||||||
<div
|
<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"
|
style="position: sticky; top: 0; z-index: 8"
|
||||||
>
|
>
|
||||||
<div class="column">
|
<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
|
utilsStore.currentTitle?.title
|
||||||
? $t(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>
|
||||||
<span class="text-caption">
|
<span class="text-caption">
|
||||||
|
|
@ -241,6 +246,7 @@ onMounted(async () => {
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
class="noti-circle"
|
class="noti-circle"
|
||||||
|
:size="$q.screen.lt.sm ? 'sm' : ''"
|
||||||
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
||||||
style="color: var(--surface-1)"
|
style="color: var(--surface-1)"
|
||||||
@click="notiOpen = !notiOpen"
|
@click="notiOpen = !notiOpen"
|
||||||
|
|
@ -254,7 +260,6 @@ onMounted(async () => {
|
||||||
:offset="[0, 10]"
|
:offset="[0, 10]"
|
||||||
anchor="bottom middle"
|
anchor="bottom middle"
|
||||||
self="top middle"
|
self="top middle"
|
||||||
style="width: 300px"
|
|
||||||
@before-hide="notiOpen = false"
|
@before-hide="notiOpen = false"
|
||||||
>
|
>
|
||||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||||
|
|
@ -334,19 +339,19 @@ onMounted(async () => {
|
||||||
<q-btn
|
<q-btn
|
||||||
round
|
round
|
||||||
unelevated
|
unelevated
|
||||||
|
:size="$q.screen.lt.sm ? 'sm' : ''"
|
||||||
v-model="currentLanguage"
|
v-model="currentLanguage"
|
||||||
class="no-uppercase"
|
class="no-uppercase"
|
||||||
size="md"
|
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
v-if="currentLanguage === 'English'"
|
v-if="currentLanguage === 'English'"
|
||||||
icon="circle-flags:us"
|
icon="circle-flags:us"
|
||||||
style="width: 36px; height: 35px"
|
:width="$q.screen.lt.sm ? '28px' : '36px'"
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
v-else
|
v-else
|
||||||
icon="circle-flags:th"
|
icon="circle-flags:th"
|
||||||
style="width: 36px; height: 35px"
|
:width="$q.screen.lt.sm ? '28px' : '36px'"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-menu
|
<q-menu
|
||||||
|
|
@ -393,7 +398,7 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<q-page class="col">
|
<q-page class="col q-px-lg">
|
||||||
<router-view />
|
<router-view />
|
||||||
</q-page>
|
</q-page>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue