From 95dc3b05fed60aaf220a720ea4fa0703cc068eea Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Sun, 27 Dec 2020 19:17:18 +0100
Subject: [PATCH] improvement: amelioration des preview

Fixes #4
---
 src/scss/components/_previews.scss            | 31 +++++++++++++------
 .../includes/components/_preview-image.html   |  8 +++--
 .../includes/components/_preview-text.html    |  8 +++--
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/scss/components/_previews.scss b/src/scss/components/_previews.scss
index cafc4b3..c09f61a 100644
--- a/src/scss/components/_previews.scss
+++ b/src/scss/components/_previews.scss
@@ -11,7 +11,7 @@ $preview-height: 8*$lineheight;
   grid-template-rows: auto;
   grid-gap: $lineheight;
   padding-bottom: $lineheight;
-  
+
   @include xl() {
     grid-template-columns: 1fr 1fr;
   }
@@ -58,7 +58,6 @@ $preview-height: 8*$lineheight;
   height: $preview-height;
   font-size:0.9rem;
 	line-height: $lineheight !important;
-  padding:0.2em;
   text-align:justify;
   background-color:rgba(0,0,0,0.00);
   color:rgba(0,0,0,0.4);
@@ -75,9 +74,9 @@ $preview-height: 8*$lineheight;
     top: 0;
     left: 0;
     position: absolute;
-    padding: $lineheight_half;
+    padding-top: $lineheight_half;
     backdrop-filter: none;
-    transition: background 0.3s;
+    transition: background-color 0.3s;
 
     h1, h2, h3, h4, h5, h6 {
       color: $color-light;
@@ -100,9 +99,10 @@ $preview-height: 8*$lineheight;
       backdrop-filter: blur(2px);
       background-color:rgba(0,0,0,0.4);
 
-      .preview-metadata {
+      .metadata-pills {
         opacity: .9;
-        transition: opacity .5s;
+        transition: opacity .5s, height .5s;
+        height:135px;
       }
     }
   }
@@ -141,13 +141,26 @@ $preview-height: 8*$lineheight;
 }
 
 .preview-metadata {
-	opacity: 0;
-	transition: opacity .3s;
   color: $color-light;
+  height:165px;
+  overflow: hidden;
+
+  .metadata-pills {
+    height:165px;
+  	opacity: 0;
+    transition: opacity .3s, height .3s;
+    display:flex;
+    justify-content:space-between;
+    padding-left: $lineheight/2;
+    padding-right: $lineheight/2;
+  }
 }
 
 .comment-text {
-  margin-top:0.8em;
+  @include angled-edge('outside top', 'upper left', $color-violet, 16);
+  color: $color-light;
+  background-color:$color-violet;
+  text-align: center;
 }
 
 .card-preview time {
diff --git a/src/static/includes/components/_preview-image.html b/src/static/includes/components/_preview-image.html
index 260d522..bba150a 100644
--- a/src/static/includes/components/_preview-image.html
+++ b/src/static/includes/components/_preview-image.html
@@ -5,9 +5,11 @@
         <div class="preview-overlay">
           <h1 class="card-header">Exemple titre</h1>
           <div class="preview-metadata">
-            <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
-            <div class="align-left"><span class="chip chip-primary">video</span></div>
-            <div class="align-center comment-text">3 commentaires</div>
+            <div class="metadata-pills">
+              <div class="align-right"><time><span class="chip chip-primary">27/02/2017</span></time></div>
+              <div class="align-left"><span class="chip chip-primary">video</span></div>
+            </div>
+            <div class="comment-text">3 commentaires</div>
           </div>
         </div>
       </div>
diff --git a/src/static/includes/components/_preview-text.html b/src/static/includes/components/_preview-text.html
index f03657f..ba198b4 100644
--- a/src/static/includes/components/_preview-text.html
+++ b/src/static/includes/components/_preview-text.html
@@ -5,9 +5,11 @@
         <div class="preview-overlay">
           <h1 class="card-header">Exemple titre</h1>
           <div class="preview-metadata">
-            <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
-            <div class="align-left"><span class="chip chip-primary">video</span></div>
-            <div class="align-center comment-text">3 commentaires</div>
+            <div class="metadata-pills">
+              <div><span class="chip chip-primary">video</span></div>
+              <div><time><span class="chip chip-primary">27/02/2017</span></time></div>
+            </div>
+            <div class="comment-text">3 commentaires</div>
           </div>
         </div>
       </div>