From 332e3fd4bbc91cddff876d4d7e413a88bb0a6753 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 21 Sep 2022 10:55:43 +0200
Subject: [PATCH] update quick post

---
 assets/css/app.scss                 | 96 ++++++++++++++++++-----------
 templates/page/post/_post.html.twig | 56 +----------------
 2 files changed, 60 insertions(+), 92 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 8b225e6..d0386d8 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -55,6 +55,10 @@ $dicons: coffee server search project share contact list response twitter diaspo
   display: none;
 }
 
+.text-right {
+    text-align: right;
+}
+
 .deblan-icon {
   font-family: 'deblan-icon';
   vertical-align: middle;
@@ -596,32 +600,58 @@ pre[class*="language-"] {
   line-height: 30px;
 }
 
-.quick-image {
-  img {
-    width: 100%;
-    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-bottom: 0;
-    cursor: pointer;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+.quick {
+  $image-size: 250px;
+
+  .ejs-link--anchor--with-image .ejs-link-content {
+    width: calc(100% - $image-size - 5px);
   }
-}
 
-.quick-video {
-  .video-ratio {
-    border: 2px solid $color-very-light-grey;
-    border-bottom: 0;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
+  .ejs-link--image {
+    width: $image-size;
+    height: $image-size;
+  }
 
-    iframe {
+  &-image {
+    img {
+      width: 100%;
+      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-bottom: 0;
+      cursor: pointer;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
     }
   }
+
+  &-video {
+    .video-ratio {
+      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;
+        border-top-right-radius: 5px;
+      }
+    }
+  }
+
+  &-more {
+    margin-bottom: 15px;
+  }
+
+  &-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;
+  }
 }
 
 .video-ratio {
@@ -638,19 +668,6 @@ pre[class*="language-"] {
   }
 }
 
-.quick-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;
-
-  > p:last-child {
-    margin-bottom: 8px;
-  }
-}
-
 .error_list {
   color: $color-red !important;
   padding: 4px 0 !important;
@@ -996,6 +1013,11 @@ $links: (
     background-repeat: no-repeat;
     background-size: cover;
   }
+
+  .quick-more {
+    margin-top: -20px;
+    margin-left: 30px;
+  }
 }
 
 .menu-opener {
@@ -1065,9 +1087,9 @@ $links: (
   }
 
   .ejs-link {
-    &--anchor--with-image &-content {
+    &-content {
       display: block;
-      width: 100%;
+      width: 100% !important;
       padding-right: 0;
     }
 
@@ -1186,15 +1208,15 @@ $links: (
   .ejs-link,
   .alert
   {
-    border-color: #86899f;
+    border-color: darken($color-wide-menu-background-to, 10%) !important;
   }
 
   .quick-body {
-    background: #43444f;
+    background: $color-wide-menu-background-to;
   }
 
   .ejs-link {
-    background: #43444f;
+    background: $color-wide-menu-background-to;
   }
 
   .code-title {
diff --git a/templates/page/post/_post.html.twig b/templates/page/post/_post.html.twig
index 099c92d..f0f56c3 100644
--- a/templates/page/post/_post.html.twig
+++ b/templates/page/post/_post.html.twig
@@ -3,61 +3,7 @@
 <div class="col-12">
     <div class="body">
         {% if post.isQuick %}
-            <div class="quick">
-                {% set image = null %}
-
-                {% if post.quickImage %}
-                    {% set image = post.quickImage %}
-                {% elseif post.image %}
-                    {% set image = asset(post.image) %}
-                {% endif %}
-
-                {% set url = post.quickUrl %}
-                {% set title = post.title %}
-                {% set content = post.content|murph_url %}
-
-                {% if post.quickVideo and post.quickShowVideo and post.quickVideoHeight and post.quickVideoWidth %}
-                    <div class="quick-video">
-                        <div class="video-ratio" data-ratio="{{ post.quickVideoHeight * 100 / post.quickVideoWidth }}%">
-                            <iframe src="{{ post.quickVideo }}" allowfullscreen></iframe>
-                        </div>
-                    </div>
-                {% elseif image %}
-                    <div class="quick-image">
-                        <a href="{{ url }}" target="_blank">
-                            <img src="{{ asset('build/images/px.png') }}" data-src="{{ image }}" alt="{{ title }}" title="{{ title }}">
-                        </a>
-                    </div>
-                {% endif %}
-
-                <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>
-
-                    {% if post.contentFormat == 'html' %}
-                        {{- post.content|murph_url|file_attributes|post -}}
-                    {% elseif post.contentFormat == 'markdown' %}
-                        {{- post.content|murph_url|file_attributes|markdown('post') -}}
-                    {% elseif post.contentFormat == 'editorjs' %}
-                        {{- post.content|murph_url|file_attributes|editorjs_to_html -}}
-                    {% endif %}
-
-                    {% if not full %}
-                        <p>
-                            <a href="{{ safe_path('blog_menu_post', {post: post.id, slug: post.slug, _domain: _domain}) }}">
-                                {{- 'Lien permanent' -}}
-                            </a>
-                        </p>
-                    {% endif %}
-                </div>
-            </div>
+            {{ include('page/post/_quick_post.html.twig') }}
         {% else %}
             {% if not full %}
                 <h2 class="h2 no-margin">