From be089ba47b0d91dc3038fc4c0e1cb52c3d4a8599 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 11 Dec 2024 12:25:45 +0100
Subject: [PATCH] Improve images display on mobile #53

---
 src/assets/css/src/1.0.global.css                |  2 ++
 src/assets/css/src/2.blocks.project.css          |  6 ++++++
 .../project/brief/ImageDetailsModal.vue          | 16 ++++++++++++++++
 src/views/Brief.vue                              | 11 ++++++++++-
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index cfbc138..fd99dd2 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/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%;
diff --git a/src/assets/css/src/2.blocks.project.css b/src/assets/css/src/2.blocks.project.css
index 46ba555..a3584ae 100644
--- a/src/assets/css/src/2.blocks.project.css
+++ b/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;
diff --git a/src/components/project/brief/ImageDetailsModal.vue b/src/components/project/brief/ImageDetailsModal.vue
index 6ce2679..75095dd 100644
--- a/src/components/project/brief/ImageDetailsModal.vue
+++ b/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>
diff --git a/src/views/Brief.vue b/src/views/Brief.vue
index ade3954..60afc76 100644
--- a/src/views/Brief.vue
+++ b/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>
\ No newline at end of file