Style PhysicalSample card and dialog #45 #54

src/assets/css/src/2.blocks.dialog.css

@@ -27,7 +27,7 @@
   display: flex;
   gap: var(--space-16);
 }
-.dialog [data-pc-section="header"] h2 {
+.dialog:not(#physical-sample) [data-pc-section="header"] h2 {
   font-family: var(--font-serif);
   position: absolute;
   left: 15rem;
@@ -40,10 +40,6 @@
   text-overflow: ellipsis;
   margin: 0 auto;
 }
-.dialog#virtual-sample [data-pc-section="header"] h2 {
-  left: 22.5rem;
-  right: 22.5rem;
-}
 .dialog [data-pc-name="pcclosebutton"] {
   color: var(--color-white);
 }
@@ -85,11 +81,6 @@
   gap: var(--space-8);
 }
 
-/* Comments */
-.static#virtual-sample #comments-container {
-  top: 8rem;
-}
-
 /* Footer */
 .dialog [data-pc-section="footer"] {
   height: var(--dialog-footer-h);
@@ -99,6 +90,50 @@
   display: flex;
   gap: var(--space-16);
 }
+
+
+/* Virtual Sample */
+.dialog#virtual-sample [data-pc-section="header"] h2 {
+  left: 22.5rem;
+  right: 22.5rem;
+}
+.dialog.static#virtual-sample #comments-container {
+  top: 8rem;
+}
 .dialog.static#virtual-sample [data-pc-section="footer"] {
   display: none;
 }
+
+/* Physical Sample */
+.dialog#physical-sample {
+  --dialog-header-h: 15rem;
+  --dialog-background: var(--color-grey-50);
+  padding: var(--space-32);
+  overflow-y: auto;
+}
+.dialog#physical-sample [data-pc-section="header"] {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  padding: var(--space-32);
+  color: var(--color-white);
+  background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: var(--rounded-xl);
+}
+.dialog#physical-sample [data-pc-name="pcclosebutton"] {
+  top: var(--space-40);
+  right: var(--space-40);
+}
+.dialog#physical-sample [data-pc-name="content"] {
+  height: auto;
+}
+@media (min-width: 90rem) {
+  .dialog#physical-sample .masonry {
+    column-count: 3;
+  }
+}

src/components/project/PhysicalSample.vue

@@ -7,10 +7,18 @@
     dismissableMask="true"
     class="dialog"
     :closeOnEscape="true"
+    :style="'--cover: url('+physicalSample.cover+')'"
   >
-    <header>
-      <h2>Titre de la modal</h2>
-    </header>
+ 	 	<template #header>
+ 	 		<h2 class="text-lg font-serif">{{ physicalSample.title }}</h2>
+ 	 		<time class="font-medium text-sm py-8" :datetime="physicalSample.date">{{ physicalSample.date }}</time>
+      <p>{{ physicalSample.description }}</p>
+ 	 	</template>
+    <div class="masonry flow mt-32">
+      <template v-for="(item, index) in physicalSample.files" :key="item.id">
+        <img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
+      </template>
+    </div>
   </Dialog>
 </template>
 
@@ -29,7 +37,5 @@ watch(isOpen, (newValue) => {
   router.push({ name: route.name });
 });
 const { page } = usePageStore();
-const step = page.steps[page.steps.length - 1];
+const physicalSample = page.steps[page.steps.length - 1];
 </script>
-
-<style></style>

src/components/project/ProjectStep.vue

@@ -155,14 +155,16 @@
       </template>
 
       <template v-if="step.id === 'physicalSample'">
-        <header>
-          <h3>
-            <router-link :to="'/' + step.uri">{{ step.title }}</router-link>
-          </h3>
-          <time :datetime="step.date">{{ step.date }}</time>
-          <p>{{ step.description }}</p>
-        </header>
-        <img :src="step.files[0].url" alt="" loading="lazy">
+        <div class="card | physical-sample">
+          <header class="text-center rounded-lg py-32" :style="'--cover: url('+step.cover+')'">
+            <h3 class="text-lg font-serif">
+              <router-link :to="'/' + step.uri" class="link-full">{{ step.title }}</router-link>
+            </h3>
+            <time class="font-medium text-sm py-8" :datetime="step.date">{{ step.date }}</time>
+            <p>{{ step.description }}</p>
+          </header>
+          <img :src="step.files[0].url" alt="" loading="lazy">
+        </div>
       </template>
       <template v-else></template>
     </div>
@@ -200,3 +202,18 @@ const mergedFiles = computed(() => {
   return [...staticFiles, ...dynamicFiles];
 });
 </script>
+
+<style scoped>
+.physical-sample header {
+  color: var(--color-white);
+  background: linear-gradient(90deg, hsla(0, 0%, 10%, .5) 0%, hsla(0, 0%, 10%, .9) 50%, hsla(0, 0%, 10%, .9) 100%), var(--cover), var(--color-black);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.physical-sample header > * {
+  padding-inline: var(--space-16);
+}
+.physical-sample header h3 {
+  position: initial;
+}
+</style>