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