diff --git a/app/static/styles.css b/app/static/styles.css index eabb86b7..f5cdb353 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 { @@ -873,7 +871,6 @@ div.navbar { .post_teaser_body { position: relative; - padding-bottom: 32px; } .post_teaser_article_preview, .post_teaser_link_preview { @@ -897,7 +894,6 @@ div.navbar { .post_teaser_image_preview { text-align: center; margin-top: 10px; - margin-bottom: 10px; } .post_teaser_image_preview a { display: inline-block; @@ -914,7 +910,6 @@ div.navbar { .post_teaser_video_preview { text-align: center; margin-top: 10px; - margin-bottom: 10px; position: relative; } .post_teaser_video_preview .fe-video { @@ -969,12 +964,6 @@ time { width: 100%; } -.post_utilities_bar_wrapper { - position: absolute; - bottom: -9px; - width: 97%; -} - .post_utilities_bar { display: flex; min-height: 44px; @@ -986,38 +975,16 @@ time { justify-content: left; } } -.post_utilities_bar .cross_post_button { +.post_utilities_bar div { display: flex; - justify-content: left; + justify-content: center; align-items: center; - width: 44px; - height: 44px; - line-height: 44px; - padding: 3px; - padding-left: 0; -} -.post_utilities_bar .post_replies_link { - display: flex; min-width: 44px; height: 44px; - padding: 3px; - align-items: center; - margin-left: -3px; + line-height: 44px; } -.post_utilities_bar .voting_buttons_new { - display: flex; - height: 44px; - padding: 3px; - justify-content: center; - align-items: center; -} -.post_utilities_bar .post_cross_post_link, .post_utilities_bar .post_options_link, .post_utilities_bar .preview_image { - display: flex; - width: 44px; - height: 44px; - padding: 3px; - justify-content: center; - align-items: center; +.post_utilities_bar .notify_toggle { + margin-left: auto; /* pull right */ } .post_full .post_utilities_bar .voting_buttons_new { @@ -1213,9 +1180,6 @@ time { height: auto; } -.voting_buttons_new { - display: inline-block; -} .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button { position: relative; /* so the htmx-indicators can be position: absolute */ display: inline-block; @@ -1396,26 +1360,27 @@ time { } .comment .comment_actions { margin-top: -18px; - position: relative; - padding-bottom: 5px; + display: flex; + min-height: 44px; + /* justify-content: space-between; */ + justify-content: left; } -.comment .comment_actions a { - text-decoration: none; - padding: 0; +@media (min-width: 992px) { + .comment .comment_actions { + justify-content: left; + } } -.comment .comment_actions .hide_button { - display: inline-block; -} -.comment .comment_actions .hide_button a { - padding: 5px 15px; +.comment .comment_actions div { + display: flex; + justify-content: center; + align-items: center; + min-width: 44px; + height: 44px; + line-height: 44px; } .comment .comment_actions .notify_toggle { - display: inline-block; -} -.comment .comment_actions .notify_toggle a { - text-decoration: none; + margin-left: auto; /* pull right */ font-size: 87%; - padding: 5px 15px; } .comment .replies { margin-top: 0; @@ -1883,30 +1848,6 @@ form h5 { margin-bottom: 10px; } -.post_options_link { - display: block; - width: 41px; - text-decoration: none; -} - -.comment_actions_link { - display: block; - position: absolute; - top: 3px; - right: -16px; - width: 41px; - text-decoration: none; -} - -.notify_toggle { - display: block; - position: absolute; - top: 2px; - right: 30px; - width: 41px; - text-decoration: none; -} - .alert { width: 96%; } diff --git a/app/static/styles.scss b/app/static/styles.scss index e5fa0451..f0690e7d 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; } @@ -469,7 +467,6 @@ div.navbar { .post_teaser_body { position: relative; - padding-bottom: 32px; } .post_teaser_article_preview, .post_teaser_link_preview { @@ -494,7 +491,6 @@ div.navbar { .post_teaser_image_preview { text-align: center; margin-top: 10px; - margin-bottom: 10px; a { display: inline-block; max-width: 512px; @@ -511,7 +507,6 @@ div.navbar { .post_teaser_video_preview { text-align: center; margin-top: 10px; - margin-bottom: 10px; position: relative; .fe-video { @@ -571,12 +566,6 @@ time { width: 100%; } -.post_utilities_bar_wrapper { - position: absolute; - bottom: -9px; - width: 97%; -} - .post_utilities_bar { display: flex; min-height: $min-touch-target; @@ -586,41 +575,17 @@ time { justify-content: left; } - .cross_post_button { + div { display: flex; - justify-content: left; + justify-content: center; align-items: center; - width: $min-touch-target; - height: $min-touch-target; - line-height: $min-touch-target; - padding: 3px; - padding-left: 0; - } - - .post_replies_link { - display: flex; min-width: $min-touch-target; height: $min-touch-target; - padding: 3px; - align-items: center; - margin-left: -3px; + line-height: $min-touch-target; } - .voting_buttons_new { - display: flex; - height: $min-touch-target; - padding: 3px; - justify-content: center; - align-items: center; - } - - .post_cross_post_link, .post_options_link, .preview_image { - display: flex; - width: $min-touch-target; - height: $min-touch-target; - padding: 3px; - justify-content: center; - align-items: center; + .notify_toggle { + margin-left: auto; /* pull right */ } } @@ -848,8 +813,6 @@ time { } .voting_buttons_new { - display: inline-block; - .upvote_button, .downvote_button { position: relative; /* so the htmx-indicators can be position: absolute */ display: inline-block; @@ -1059,28 +1022,26 @@ time { .comment_actions { margin-top: -18px; - position: relative; - padding-bottom: 5px; - a { - text-decoration: none; - padding: 0; + display: flex; + min-height: $min-touch-target; + /* justify-content: space-between; */ + justify-content: left; + @include breakpoint(tablet) { + justify-content: left; } - .hide_button { - display: inline-block; - - a { - padding: 5px 15px; - } + div { + display: flex; + justify-content: center; + align-items: center; + min-width: $min-touch-target; + height: $min-touch-target; + line-height: $min-touch-target; } .notify_toggle { - display: inline-block; - a { - text-decoration: none; - font-size: 87%; - padding: 5px 15px; - } + margin-left: auto; /* pull right */ + font-size: 87%; } } @@ -1594,30 +1555,6 @@ form { margin-bottom: 10px; } -.post_options_link { - display: block; - width: 41px; - text-decoration: none; -} - -.comment_actions_link { - display: block; - position: absolute; - top: 3px; - right: -16px; - width: 41px; - text-decoration: none; -} - -.notify_toggle { - display: block; - position: absolute; - top: 2px; - right: 30px; - width: 41px; - text-decoration: none; -} - .alert { width: 96%; } diff --git a/app/templates/post/_breadcrumb_nav.html b/app/templates/post/_breadcrumb_nav.html new file mode 100644 index 00000000..fe2153bd --- /dev/null +++ b/app/templates/post/_breadcrumb_nav.html @@ -0,0 +1,8 @@ + diff --git a/app/templates/post/_post_full.html b/app/templates/post/_post_full.html index e38ebc55..79e2fe1e 100644 --- a/app/templates/post/_post_full.html +++ b/app/templates/post/_post_full.html @@ -1,69 +1,7 @@
- {% if post.type == POST_TYPE_IMAGE -%} -
- -

{{ post.title }} - {% if current_user.is_authenticated -%} - {% include 'post/_post_notification_toggle.html' -%} - {% endif -%} - {% if post.nsfw -%}nsfw{% endif -%} - {% if post.nsfl -%}nsfl{% endif -%} -

- {% if post.url -%} -

{{ post.url|shorten_url }} -

- {% endif -%} -

{% if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) -%} - - {% endif -%}submitted {{ arrow.get(post.posted_at).humanize(locale=locale) }} by {{ render_username(post.author) }} - {% if post.edited_at -%} edited {{ arrow.get(post.edited_at).humanize(locale=locale) }}{% endif -%} -

-
- {% if post.image_id -%} - {% if low_bandwidth -%} - {{ post.image.alt_text if post.image.alt_text else post.title }} - {% else -%} - - {{ post.image.alt_text if post.image.alt_text else post.title }} - - {% endif -%} - {% else -%} - - {% endif -%} -
-
- {{ post.body_html|community_links|safe if post.body_html else '' }} - {% if post.licence_id -%} -

Licence: {{ post.licence.name }}

- {% endif -%} -
-
- {% else -%} -
- +
+ {% include "post/_breadcrumb_nav.html" %}

{{ post.title }} - {% if current_user.is_authenticated -%} - {% include 'post/_post_notification_toggle.html' -%} - {% endif -%} {% if post.nsfw -%}nsfw{% endif -%} {% if post.nsfl -%}nsfl{% endif -%}

@@ -72,6 +10,9 @@ {{ post.image.alt_text if post.image.alt_text else '' }}
+ {% elif post.type == POST_TYPE_IMAGE and post.url -%} +

{{ post.url|shorten_url }} +

{% endif -%}

{% if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) -%} @@ -79,7 +20,26 @@ {{ render_username(post.author) }} {% if post.edited_at -%} edited {{ arrow.get(post.edited_at).humanize(locale=locale) }}{% endif -%}

- {% if post.type == POST_TYPE_LINK -%} + {% if post.type == POST_TYPE_IMAGE -%} +
+ {% if post.image_id -%} + {% if low_bandwidth -%} + {{ post.image.alt_text if post.image.alt_text else post.title }} + {% else -%} + + {{ post.image.alt_text if post.image.alt_text else post.title }} + + {% endif -%} + {% else -%} + + {% endif -%} +
+ {% elif post.type == POST_TYPE_LINK -%}

{{ post.url|shorten_url }}

{% if post.url.endswith('.mp3') -%} @@ -189,7 +149,6 @@
{% endif -%}
- {% endif -%} {% if post.tags.count() > 0 -%}