chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: menu item first page responsive

Browse source
This commit is contained in:
puriphatt 2024-07-03 06:45:12 +00:00
parent 6491a761e3
commit 805603e9c2
3 changed files with 212 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/layouts/MainLayout.vue
View file

@ -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>