From fe197bd7b4c279e5b8f04271bf3e66c46e52a673 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sat, 1 Oct 2022 10:39:52 +0200
Subject: [PATCH] change quick render to card

---
 assets/css/app.scss                       | 15 +++------
 templates/page/post/_quick_post.html.twig | 40 ++++++++++++-----------
 2 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index fcd6af9..6d00628 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -642,7 +642,7 @@ pre[class*="language-"] {
       height: 450px;
       background-position: center center;
       background: #f2f2f2 url('../images/quick-post-load.png') no-repeat center center;
-      border: 2px solid $color-very-light-grey;
+      // border: 2px solid $color-very-light-grey;
       border-bottom: 0;
       cursor: pointer;
       border-top-left-radius: 5px;
@@ -652,10 +652,10 @@ pre[class*="language-"] {
 
   &-video {
     .video-ratio {
-      border: 2px solid $color-very-light-grey;
-      border-bottom: 0;
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
+      // border: 2px solid $color-very-light-grey;
+      // border-bottom: 0;
+      // border-top-left-radius: 5px;
+      // border-top-right-radius: 5px;
 
       iframe {
         border-top-left-radius: 5px;
@@ -669,11 +669,6 @@ pre[class*="language-"] {
   }
 
   &-body {
-    padding: 10px 10px 0 10px;
-    border: 2px solid $color-very-light-grey;
-    margin-top: -7px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
     word-break: break-all;
   }
 }
diff --git a/templates/page/post/_quick_post.html.twig b/templates/page/post/_quick_post.html.twig
index 3bbf0b1..e306a88 100644
--- a/templates/page/post/_quick_post.html.twig
+++ b/templates/page/post/_quick_post.html.twig
@@ -25,27 +25,29 @@
 {%- endset -%}
 
 {% if isVideo %}
-    <div class="quick">
-        <div class="quick-video">
-            <div class="video-ratio" data-ratio="{{ post.quickVideoHeight * 100 / post.quickVideoWidth }}%">
-                <iframe src="{{ post.quickVideo }}" allowfullscreen></iframe>
+    <div class="quick card shadow-md m-3 md:ml-0 md:mr-0 bg-box">
+        <div class="card">
+            <figure class="quick-video m-0">
+                <div class="video-ratio" data-ratio="{{ post.quickVideoHeight * 100 / post.quickVideoWidth }}%">
+                    <iframe src="{{ post.quickVideo }}" allowfullscreen></iframe>
+                </div>
+            </figure>
+
+            <div class="quick-body card-body">
+                <h2 class="h4 no-margin card-title">
+                    <a href="{{ url }}" target="_blank">
+                        {{- title -}}
+                    </a>
+                </h2>
+
+                <p class="no-margin">
+                    <a href="{{ url }}" target="_blank">{{ url }}</a>
+                </p>
+
+                {{- content|raw -}}
+                {{- more|raw -}}
             </div>
         </div>
-
-        <div class="quick-body">
-            <h2 class="h4 no-margin">
-                <a href="{{ url }}" target="_blank">
-                    {{- title -}}
-                </a>
-            </h2>
-
-            <p class="no-margin">
-                <a href="{{ url }}" target="_blank">{{ url }}</a>
-            </p>
-
-            {{- content|raw -}}
-            {{- more|raw -}}
-        </div>
     </div>
 {% elseif not image %}
     <div class="quick-body">