From 67d59e26578112740c1d2d39662994d46f9ee30d Mon Sep 17 00:00:00 2001
From: Hendrik L <hendrik+dev@xd0.de>
Date: Mon, 9 Dec 2024 17:03:51 +0100
Subject: [PATCH] float thumbnails

---
 app/static/styles.css                        |  4 +---
 app/static/styles.scss                       |  4 +---
 app/templates/post/post_teaser/_article.html | 23 ++++++++++----------
 app/templates/post/post_teaser/_link.html    | 22 +++++++++----------
 app/templates/post/post_teaser/_poll.html    | 18 +++++++--------
 5 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index 41c86ecb..059b380d 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -783,11 +783,9 @@ div.navbar {
   max-width: 78%;
 }
 .post_list .post_teaser .col_thumbnail {
+  float: right;
   width: 70px;
   position: relative;
-  padding-left: 0;
-  padding-right: 0;
-  left: -13px;
 }
 @media (min-width: 992px) {
   .post_list .post_teaser .col_thumbnail {
diff --git a/app/static/styles.scss b/app/static/styles.scss
index 896523d9..3e5c8a43 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -369,11 +369,9 @@ div.navbar {
     }
 
     .col_thumbnail {
+      float: right;
       width: 70px;
       position: relative;
-      padding-left: 0;
-      padding-right: 0;
-      left: -13px;
       @include breakpoint(tablet) {
         width: 170px;
       }
diff --git a/app/templates/post/post_teaser/_article.html b/app/templates/post/post_teaser/_article.html
index f5c07503..6c89804d 100644
--- a/app/templates/post/post_teaser/_article.html
+++ b/app/templates/post/post_teaser/_article.html
@@ -1,4 +1,15 @@
 <div class="col post_teaser_body">
+    {% if post.image_id -%}
+        <div class="col_thumbnail thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
+            {% if low_bandwidth -%}
+                <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
+            {% else -%}
+                    <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><img src="{{ post.image.thumbnail_url() }}"
+                        alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
+            {% endif -%}
+        </div>
+    {% endif -%}
+
     {% include "post/post_teaser/_title.html" %}
     {% if post.body_html -%}
         <div class="post_teaser_article_preview small post_teaser_clickable">
@@ -7,15 +18,3 @@
     {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
-{% if post.image_id -%}
-<div class="col col-2 col_thumbnail">
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            {% if low_bandwidth -%}
-                <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
-            {% else -%}
-                    <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><img src="{{ post.image.thumbnail_url() }}"
-                        alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
-            {% endif -%}
-        </div>
-</div>
-{% endif -%}
diff --git a/app/templates/post/post_teaser/_link.html b/app/templates/post/post_teaser/_link.html
index f54e044f..57aa9951 100644
--- a/app/templates/post/post_teaser/_link.html
+++ b/app/templates/post/post_teaser/_link.html
@@ -1,4 +1,14 @@
 <div class="col post_teaser_body">
+    {% if post.image_id -%}
+        <div class="col_thumbnail thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
+            {% if low_bandwidth -%}
+                <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
+            {% else -%}
+                <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span><img src="{{ post.image.thumbnail_url() }}"
+                         alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
+            {% endif -%}
+        </div>
+    {% endif -%}
     {% include "post/post_teaser/_title.html" %}
     {% if post.body_html -%}
         <div class="post_teaser_link_preview small post_teaser_clickable">
@@ -7,15 +17,3 @@
     {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>
-{% if post.image_id -%}
-<div class="col col-2 col_thumbnail">
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-            {% if low_bandwidth -%}
-                <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Follow link') }}"><span class="fe fe-external"></span></a>
-            {% else -%}
-                <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span><img src="{{ post.image.thumbnail_url() }}"
-                         alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
-            {% endif -%}
-        </div>
-</div>
-{% endif -%}
diff --git a/app/templates/post/post_teaser/_poll.html b/app/templates/post/post_teaser/_poll.html
index da319110..85a42132 100644
--- a/app/templates/post/post_teaser/_poll.html
+++ b/app/templates/post/post_teaser/_poll.html
@@ -1,15 +1,6 @@
 <div class="col post_teaser_body">
-    {% include "post/post_teaser/_title.html" %}
-    {% if post.body_html -%}
-        <div class="post_teaser_link_preview small post_teaser_clickable">
-            {{ first_paragraph(post.body_html) | safe }}
-        </div>
-    {% endif -%}
-    {% include "post/post_teaser/_utilities_bar.html" %}
-</div>
-<div class="col col-2 col_thumbnail">
     {% if post.image_id -%}
-        <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
+        <div class="col_thumbnail thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
             {% if low_bandwidth -%}
                 <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
             {% else -%}
@@ -22,4 +13,11 @@
             <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-poll"></span></a>
         </div>
     {% endif -%}
+    {% include "post/post_teaser/_title.html" %}
+    {% if post.body_html -%}
+        <div class="post_teaser_link_preview small post_teaser_clickable">
+            {{ first_paragraph(post.body_html) | safe }}
+        </div>
+    {% endif -%}
+    {% include "post/post_teaser/_utilities_bar.html" %}
 </div>