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

refactor: improve layout and responsiveness for ImageUploadDialog component

Browse source
This commit is contained in:
puriphatt 2025-01-28 10:19:51 +07:00
parent 48f886caa8
commit 0750d77b98
1 changed files with 29 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/ImageUploadDialog.vue
View file

@ -193,14 +193,21 @@ watch(
</div> </div>
<!-- body --> <!-- body -->
<div class="q-px-lg surface-2 col row full-width"> <section
<div class="surface-2 col row full-width no-wrap q-pa-md items-center"
class="image-dialog-body q-my-lg relative-position rounded surface-1 flex items-center" :class="{
row: $q.screen.gt.sm,
column: $q.screen.lt.md,
}"
>
<aside
class="image-dialog-body relative-position rounded surface-1 flex items-center"
:class="{ 'q-mr-sm': $q.screen.gt.sm, 'q-mb-sm': $q.screen.lt.md }"
> >
<img <img
:src="tempImage || fallbackUrl" :src="tempImage || fallbackUrl"
v-if="tempImage || fallbackUrl" v-if="tempImage || fallbackUrl"
style="object-fit: contain; width: 100%" style="object-fit: contain; height: 100%; width: 100%"
@error=" @error="
() => { () => {
tempImage = ''; tempImage = '';
@ -237,12 +244,12 @@ watch(
style="color: hsla(var(--stone-0-hsl) / 0.7)" style="color: hsla(var(--stone-0-hsl) / 0.7)"
></q-btn> ></q-btn>
</div> </div>
</div> </aside>
<div <aside
v-if="!hiddenFooter" v-if="!hiddenFooter"
class="col q-ml-md q-pt-sm q-my-md" class="self-start col"
style="width: 40em; height: 30em; overflow: auto" style="overflow: auto; height: 30em"
> >
<div class="row items-center q-gutter-sm"> <div class="row items-center q-gutter-sm">
<div <div
@ -254,6 +261,8 @@ watch(
object-fit: cover; object-fit: cover;
height: 5vw; height: 5vw;
width: 5vw; width: 5vw;
min-width: 70px;
min-height: 70px;
overflow: hidden; overflow: hidden;
" "
@click="selectImg('')" @click="selectImg('')"
@ -274,7 +283,12 @@ watch(
? selectedImg === img ? selectedImg === img
: selectedImg === img.split('/').pop(), : selectedImg === img.split('/').pop(),
}" }"
style="height: 5vw; width: 5vw" style="
height: 5vw;
width: 5vw;
min-width: 70px;
min-height: 70px;
"
@click="selectImg(img)" @click="selectImg(img)"
> >
<q-btn <q-btn
@ -339,8 +353,8 @@ watch(
</div> </div>
</template> </template>
</div> </div>
</div> </aside>
</div> </section>
<!-- footer --> <!-- footer -->
<div <div
@ -410,6 +424,10 @@ watch(
overflow: hidden; overflow: hidden;
width: 30em; width: 30em;
height: 30em; height: 30em;
/* width: calc(400px - 5vw); */
/* height: calc(400px - 5vw); */
/* max-width: 400px;
max-height: 400px; */
} }
.upload-image-btn { .upload-image-btn {