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

fix: responsive drawer info & form dialog

Browse source
This commit is contained in:
puriphatt 2024-07-24 04:18:30 +00:00
parent 3e5a4ea0e9
commit d7337c9e95
4 changed files with 21 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/02_personnel-management/InfoForm.vue
View file

@ -49,14 +49,19 @@ const employeeTab = defineModel<string>('employeeTab');
</q-tabs> </q-tabs>
</div> </div>
<div class="row full-width" style="flex: 1"> <div
<div class="col-3" v-if="$slots['person-card']"> class="full-width no-wrap"
:class="$q.screen.gt.xs ? 'row' : 'column'"
style="flex: 1"
>
<div class="col-3 q-mb-xs" v-if="$slots['person-card']">
<slot name="person-card"></slot> <slot name="person-card"></slot>
</div> </div>
<div <div
:class="{ :class="{
'col-9': $slots['person-card'], 'col-9': $slots['person-card'],
'col-12': !$slots['person-card'], 'col-12': !$slots['person-card'],
'q-ml-md': $q.screen.xs,
}" }"
class="relative-position" class="relative-position"
> >

6
src/components/DrawerInfo.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { computed, ref } from 'vue';
import AppBox from './app/AppBox.vue'; import AppBox from './app/AppBox.vue';
withDefaults( withDefaults(
@ -24,6 +24,8 @@ withDefaults(
}, },
); );
const windowSize = ref(window.innerWidth);
const drawerOpen = defineModel<boolean>('drawerOpen', { const drawerOpen = defineModel<boolean>('drawerOpen', {
default: false, default: false,
}); });
@ -50,7 +52,7 @@ function reset() {
: 1200 : 1200
: 1000 : 1000
: 700 : 700
: 510 : windowSize
" "
v-model="drawerOpen" v-model="drawerOpen"
behavior="mobile" behavior="mobile"

6
src/components/FormDialog.vue
View file

@ -204,8 +204,8 @@ const currentTab = defineModel<string>('currentTab');
<div <div
v-if="!noAppBox" v-if="!noAppBox"
bordered bordered
class="column full-height surface-1 bordered rounded scroll" class="column surface-1 bordered rounded"
:class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'}`" :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'} ${!noPaddingTab && 'q-pt-lg q-pl-lg'} ${$q.screen.gt.xs && 'full-height scroll'}`"
style="padding-right: 0; padding-bottom: 16px" style="padding-right: 0; padding-bottom: 16px"
> >
<div <div
@ -237,7 +237,7 @@ const currentTab = defineModel<string>('currentTab');
<slot name="qr-code"></slot> <slot name="qr-code"></slot>
<slot name="location"></slot> <slot name="location"></slot>
<slot name="by-type"></slot> <slot name="by-type"></slot>
<div class="col-12"></div> <div v-if="$q.screen.gt.xs" class="col-12"></div>
</div> </div>
</div> </div>

12
src/components/ProfileUpload.vue
View file

@ -25,7 +25,10 @@ defineEmits<{
<template> <template>
<div class="text-center"> <div class="text-center">
<div class="upload-img-preview"> <div
class="upload-img-preview"
:style="$q.screen.lt.md ? 'height: 200px' : 'height: 12vh'"
>
<q-img <q-img
v-if="urlProfile" v-if="urlProfile"
:src="urlProfile" :src="urlProfile"
@ -44,7 +47,7 @@ defineEmits<{
<q-icon <q-icon
v-else v-else
name="mdi-account full-height" name="mdi-account full-height"
size="3vw" size="4rem"
style="color: var(--border-color)" style="color: var(--border-color)"
/> />
</div> </div>
@ -102,8 +105,8 @@ defineEmits<{
:class="{ dark: $q.dark.isActive }" :class="{ dark: $q.dark.isActive }"
@click="$emit('inputFile')" @click="$emit('inputFile')"
/> />
<q-separator class="col-12 q-my-md" /> <q-separator class="col-12 q-my-lg" />
<div class="text-left q-pt-md" v-if="hideToggle"> <div class="text-left q-pb-md" v-if="hideToggle">
<q-toggle <q-toggle
id="toggle-status" id="toggle-status"
dense dense
@ -123,7 +126,6 @@ defineEmits<{
.upload-img-preview { .upload-img-preview {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: var(--radius-2); border-radius: var(--radius-2);
height: 12vw;
background-color: var(--surface-1); background-color: var(--surface-1);
} }