From 7ea436269673d3355e6782c2f572dfecc18123b5 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Mon, 27 Jan 2025 15:23:46 +0100
Subject: [PATCH] fix: DTLPanel + VirtualSample dialog display

close #105
---
 .../css/src/2.blocks.design-to-light.css      | 20 ++++++++++++++++++-
 src/assets/css/src/2.blocks.dialog.css        |  7 +++++++
 src/components/design-to-light/DTLPanel.vue   |  6 ++++--
 .../project/virtual-sample/VirtualSample.vue  |  2 +-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/src/2.blocks.design-to-light.css b/src/assets/css/src/2.blocks.design-to-light.css
index 9e05bc2..a60f880 100644
--- a/src/assets/css/src/2.blocks.design-to-light.css
+++ b/src/assets/css/src/2.blocks.design-to-light.css
@@ -143,7 +143,18 @@
   top: 2rem;
   bottom: 5.5rem;
   color: var(--color-white);
-  z-index: 999;
+  z-index: 9999;
+  overflow: hidden;
+}
+#dtl-panel.with-dialog {
+  max-height: min(100vh - var(--gutter) * 2 - 5.5rem, 50rem);
+  max-width: 25rem;
+  top: 0;
+  bottom: 0;
+  margin-block: auto;
+}
+#dtl-panel > header {
+  height: 3.5rem;
 }
 #dtl-panel .border-b {
   border-color: var(--color-white-10);
@@ -159,11 +170,18 @@
 #dtl-panel [role="tablist"] {
   display: flex;
   padding: 0 var(--space-32);
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+#dtl-panel [role="tablist"]::-webkit-scrollbar {
+  display: none;
 }
 #dtl-panel [role="tab"] {
   padding: var(--space-12) .625rem;
   color: var(--color-grey-400);
   font-weight: 500;
+  white-space: pre;
 }
 #dtl-panel [role="tab"][aria-selected="true"] {
   color: var(--color-white);
diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index c78dc7b..9900018 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -16,6 +16,13 @@
   overflow: hidden;
   background: var(--dialog-background);
   margin: auto !important;
+  left: var(--gutter);
+  right: var(--gutter);
+}
+
+.dialog.with-dtl {
+  --dialog-max-w: min(100vw - var(--gutter) * 2 - 26rem, 77rem);
+  margin-right: 30rem !important;
 }
 
 /* Header */
diff --git a/src/components/design-to-light/DTLPanel.vue b/src/components/design-to-light/DTLPanel.vue
index 28b9503..5cfd6fd 100644
--- a/src/components/design-to-light/DTLPanel.vue
+++ b/src/components/design-to-light/DTLPanel.vue
@@ -2,6 +2,7 @@
   <aside
     id="dtl-panel"
     class="text-sm bg-black rounded-2xl"
+    :class="{'with-dialog': isDialogOpen}"
     aria-labelledby="dtl-label"
     @click="preventClose($event)"
   >
@@ -9,8 +10,9 @@
       class="flex items-center | border-b pl-32 pr-16 py-8"
       data-icon="leaf"
       style="--column-gap: 0.5rem"
-    >
-      <h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
+    > 
+      <!-- TODO: ajouter un title à dans le Panel pour chaque propositio et l'utiliser ici pour le h2 -->
+      <h2 id="dtl-label" class="font-serif text-md">Design to Light</h2>
       <button
         v-if="!isDialogOpen"
         @click="emits('close')"
diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index eaec38f..e7684b1 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -7,7 +7,7 @@
     dismissableMask="true"
     header="Titre du rendu"
     class="dialog"
-    :class="[{ 'with-comments': isCommentsOpen }, activeTab]"
+    :class="[{ 'with-comments': isCommentsOpen }, activeTab, { 'with-dtl': correspondingDTLProposal}]"
     :closeOnEscape="true"
   >
     <template #header>