Improve images display on mobile #53

src/assets/css/src/1.0.global.css

@@ -43,6 +43,8 @@ main {
   min-height: calc(100vh - var(--gutter) * 2);
 }
 main > header {
+  --column-gap: 1rem;
+  --row-gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;

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

@@ -177,6 +177,12 @@
   transform: translateX(-50%);
 }
 
+.project-details {
+  flex-wrap: wrap !important;
+}
+.project-details > * {
+  min-width: 20rem;
+}
 .project-details textarea {
   resize: none;
   max-height: 5rem;

src/components/project/brief/ImageDetailsModal.vue

@@ -157,6 +157,8 @@ function remove() {
   right: 0;
   z-index: 1102;
   padding: 1.5rem var(--space-32);
+  height: auto;
+  background: var(--color-background);
 }
 #image-details [data-pc-section="content"] {
   display: flex;
@@ -166,5 +168,19 @@ function remove() {
 }
 #image-details [data-pc-section="content"] > div {
   padding-top: 5rem;
+  overflow-y: auto;
+}
+@media (max-width: 767px) {
+  #image-details [data-pc-section="content"] {
+    flex-direction: column;
+  }
+  #image-details [data-pc-section="header"] {
+    top: 50%;
+    left: 0;
+  }
+  #image-details [data-pc-section="content"] > * {
+    width: 100%;
+    height: 50%;
+  }
 }
 </style>

src/views/Brief.vue

@@ -5,8 +5,9 @@
         :to="'/' + page.parent"
         class="btn btn--white"
         data-icon="arrow-left"
+        aria-labelledby="back-to-project"
       >
-        <span>Retour au projet</span>
+        <span id="back-to-project">Retour au projet</span>
       </router-link>
       <button class="btn | ml-auto">Valider et envoyer le brief</button>
     </header>
@@ -47,3 +48,11 @@ function setInitialStep() {
   if (hasImages) return "Images";
 }
 </script>
+
+<style scoped>
+@media (max-width: 540px) {
+  #back-to-project {
+    display: none;
+  }
+}
+</style>