studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Improve ImageDetailsModal display #53

Browse source
This commit is contained in:
Timothée Goguely 2024-12-11 13:11:16 +01:00
parent be089ba47b
commit b5c328b91b
3 changed files with 36 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/project/brief/ImageDetailsModal.vue
View file

@ -6,7 +6,9 @@
header="Détails de l’image"
class="bg-white | text-grey-800 | rounded-2xl | overflow-hidden"
>
<img :src="image.url" alt="" class="bg-grey-200" loading="lazy" />
<picture :style="'--image: url('+image.url+')'">
<img :src="image.url" alt="" class="bg-grey-200" loading="lazy">
</picture>
<div class="flex flex-col | p-32" style="--row-gap: var(--space-32)">
<fieldset class="image__tags">
<legend class="text-sm text-grey-700 | mb-8">Tags</legend>
@ -147,13 +149,14 @@ function remove() {
<style>
#image-details {
width: min(100vw - var(--gutter) * 2, 62.5rem);
width: min(100vw - var(--gutter) * 2, 70rem);
height: min(100vh - var(--gutter) * 2, 50rem);
flex-direction: row !important;
}
#image-details [data-pc-section="header"] {
position: absolute;
left: 50%;
width: 100%;
max-width: min(480px, 50%);
right: 0;
z-index: 1102;
padding: 1.5rem var(--space-32);
@ -163,12 +166,35 @@ function remove() {
#image-details [data-pc-section="content"] {
display: flex;
}
#image-details [data-pc-section="content"] img {
object-fit: contain;
max-height: 100%;
z-index: 1;
}
#image-details [data-pc-section="content"] picture {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
flex-grow: 1;
}
#image-details [data-pc-section="content"] picture::before {
content: '';
position: absolute;
inset: -3rem;
background-image: var(--image);
background-repeat: no-repeat;
background-size: cover;
filter: blur(3rem);
opacity: .4;
}
#image-details [data-pc-section="content"] > * {
width: 50%;
}
#image-details [data-pc-section="content"] > div {
padding-top: 5rem;
overflow-y: auto;
max-width: 480px;
}
@media (max-width: 767px) {
#image-details [data-pc-section="content"] {
@ -177,10 +203,14 @@ function remove() {
#image-details [data-pc-section="header"] {
top: 50%;
left: 0;
max-width: 100%;
}
#image-details [data-pc-section="content"] > * {
width: 100%;
height: 50%;
}
#image-details [data-pc-section="content"] > div {
max-width: 100%;
}
}
</style>