Improve ImageDetailsModal display #53

src/assets/css/src/0.2.variables.css

@@ -83,6 +83,7 @@
   --auto-grid-placement: auto-fill;
   --gap: var(--space-16);
   --wrapper-max-width: 52.875rem; /* 846px */
+  --p-scrollbar-width: var(--gutter);
 
   /* Borders */
   --rounded-xs: 1px;

src/assets/css/src/2.blocks.project.css

@@ -181,11 +181,12 @@
   flex-wrap: wrap !important;
 }
 .project-details > * {
-  min-width: 20rem;
+  min-width: 17rem;
 }
 .project-details textarea {
   resize: none;
   max-height: 5rem;
+  max-width: calc(100vw - var(--gutter) * 2 - var(--space-32));
 }
 .project-details__filters button:first-of-type {
   margin-right: calc(var(--space-12) + 1px);

src/components/project/brief/ImageDetailsModal.vue

@@ -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>