chamomind/jws-frontend
chamomind/jws-frontend
7
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>
</div>
<div class="row full-width" style="flex: 1">
<div class="col-3" v-if="$slots['person-card']">
<div
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>
</div>
<div
:class="{
'col-9': $slots['person-card'],
'col-12': !$slots['person-card'],
'q-ml-md': $q.screen.xs,
}"
class="relative-position"
>

6
src/components/DrawerInfo.vue
View file

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

6
src/components/FormDialog.vue
View file

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

12
src/components/ProfileUpload.vue
View file

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