From 8d5faf713319cedd7d76efcca4b5790884b9bb39 Mon Sep 17 00:00:00 2001
From: rimu <3310831+rimu@users.noreply.github.com>
Date: Wed, 3 Apr 2024 08:15:23 +1300
Subject: [PATCH] move cross post icon down to utilities bar #144

---
 app/static/structure.css           | 10 ++++++++++
 app/static/structure.scss          | 11 +++++++++++
 app/templates/post/_post_full.html | 15 +++++++--------
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/app/static/structure.css b/app/static/structure.css
index b9328d3d..5a631fc0 100644
--- a/app/static/structure.css
+++ b/app/static/structure.css
@@ -742,6 +742,16 @@ fieldset legend {
   display: flex;
   min-height: 44px;
 }
+.post_utilities_bar .cross_post_button {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
+  padding: 3px;
+  padding-left: 0;
+}
 .post_utilities_bar .post_options_link {
   display: flex;
   width: 44px;
diff --git a/app/static/structure.scss b/app/static/structure.scss
index 6ae37986..5c0951c6 100644
--- a/app/static/structure.scss
+++ b/app/static/structure.scss
@@ -346,6 +346,17 @@ html {
   display: flex;
   min-height: $min-touch-target;
 
+  .cross_post_button {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    width: $min-touch-target;
+    height: $min-touch-target;
+    line-height: $min-touch-target;
+    padding: 3px;
+    padding-left: 0;
+  }
+
   .post_options_link {
     display: flex;
     width: $min-touch-target;
diff --git a/app/templates/post/_post_full.html b/app/templates/post/_post_full.html
index 825f8ccb..a24cb457 100644
--- a/app/templates/post/_post_full.html
+++ b/app/templates/post/_post_full.html
@@ -20,10 +20,6 @@
                 {% if post.nsfw %}<span class="warning_badge nsfw" title="{{ _('Not safe for work') }}">nsfw</span>{% endif %}
                 {% if post.nsfl %}<span class="warning_badge nsfl" title="{{ _('Potentially emotionally scarring content') }}">nsfl</span>{% endif %}
             </h1>
-            {% if post.cross_posts %}
-                <a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"><span class="fe fe-layers"></span></a>
-                <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span>
-            {% endif %}
             {% if post.url %}
                 <p><a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="Go to image">{{ post.url|shorten_url }}
                     <span class="fe fe-external"></span></a></p>
@@ -70,10 +66,6 @@
                 {% if post.nsfw %}<span class="warning_badge nsfw" title="{{ _('Not safe for work') }}">nsfw</span>{% endif %}
                 {% if post.nsfl %}<span class="warning_badge nsfl" title="{{ _('Potentially emotionally scarring content') }}">nsfl</span>{% endif %}
             </h1>
-            {% if post.cross_posts %}
-                <a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"><span class="fe fe-layers"></span></a>
-                <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span>
-            {% endif %}
             {% if post.type == POST_TYPE_LINK and post.image_id and not (post.url and 'youtube.com' in post.url) %}
                 <div class="url_thumbnail">
                     <a href="{{ post.url }}" target="_blank" rel="nofollow ugc" class="post_link"><img src="{{ post.image.thumbnail_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}"
@@ -112,6 +104,13 @@
         </div>
     {% endif %}
     <div class="post_utilities_bar">
+        {% if post.cross_posts %}
+        <div class="cross_post_button">
+            <a href="{{ url_for('post.post_cross_posts', post_id=post.id) }}" aria-label="{{ _('Show cross-posts') }}"
+               title="{{ _('Show cross-posts') }}"><span class="fe fe-layers"></span>
+            <span aria-label="{{ _('Number of cross-posts:') }}">{{ len(post.cross_posts) }}</span></a>
+        </div>
+        {% endif %}
         <a href="{{ url_for('post.post_options', post_id=post.id) }}" class="post_options_link" rel="nofollow"><span class="fe fe-options" title="Options"> </span></a>
     </div>
 </div>