From d70d5c287814641f8f490c9ad7a2e19de401da2b Mon Sep 17 00:00:00 2001 From: rimu <3310831+rimu@users.noreply.github.com> Date: Thu, 5 Sep 2024 20:10:26 +1200 Subject: [PATCH] post teaser redesign #148 --- app/activitypub/routes.py | 2 +- app/post/util.py | 4 + app/static/scss/_typography.scss | 12 +- app/static/styles.css | 117 ++++++++++----- app/static/styles.scss | 108 +++++++++----- app/templates/index.html | 2 +- app/templates/post/_post_full.html | 32 ++-- app/templates/post/_post_teaser.html | 147 ++++++++++--------- app/templates/post/_post_voting_buttons.html | 10 +- 9 files changed, 266 insertions(+), 168 deletions(-) diff --git a/app/activitypub/routes.py b/app/activitypub/routes.py index 791c68ad..cdda33be 100644 --- a/app/activitypub/routes.py +++ b/app/activitypub/routes.py @@ -119,7 +119,7 @@ def nodeinfo(): nodeinfo_data = {"links": [{"rel": "http://nodeinfo.diaspora.software/ns/schema/2.0", "href": f"https://{current_app.config['SERVER_NAME']}/nodeinfo/2.0"}, {"rel": "https://www.w3.org/ns/activitystreams#Application", - "href": f"https://{current_app.config['SERVER_NAME']}/actor"}]} + "href": f"https://{current_app.config['SERVER_NAME']}"}]} return jsonify(nodeinfo_data) diff --git a/app/post/util.py b/app/post/util.py index f1768cdc..e050721d 100644 --- a/app/post/util.py +++ b/app/post/util.py @@ -102,6 +102,10 @@ def url_needs_archive(url) -> bool: hostname = parsed_url.hostname.lower() except: return False + if hostname == 'nytimes.com' and 'unlocked_article_code' in url: + return False + if hostname == 'theatlantic.com' and 'gift' in url: + return False return hostname in paywalled_sites else: return False diff --git a/app/static/scss/_typography.scss b/app/static/scss/_typography.scss index 22e6455c..3a64cd7c 100644 --- a/app/static/scss/_typography.scss +++ b/app/static/scss/_typography.scss @@ -166,14 +166,22 @@ } .fe-reply { - position: relative; - top: 1px; + margin-right: 2px; + margin-top: -1px; } .fe-reply::before { content: "\e990"; } +.fe-discussion::before { + content: "\e991"; +} + +.fe-link::before { + content: "\e991"; +} + .fe-layers { position: relative; top: 1px; diff --git a/app/static/styles.css b/app/static/styles.css index 0a2dad1a..ded39f29 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -197,14 +197,22 @@ } .fe-reply { - position: relative; - top: 1px; + margin-right: 2px; + margin-top: -1px; } .fe-reply::before { content: "\e990"; } +.fe-discussion::before { + content: "\e991"; +} + +.fe-link::before { + content: "\e991"; +} + .fe-layers { position: relative; top: 1px; @@ -773,54 +781,60 @@ div.navbar { display: inline-block; max-width: 78%; } -.post_list .post_teaser .main_row .post_utilities { - position: absolute; - bottom: -12px; - left: 10px; -} -.post_list .post_teaser .main_row .post_utilities a, .post_list .post_teaser .main_row .post_utilities > div, .post_list .post_teaser .main_row .post_utilities > span { - display: inline-block; - min-width: 44px; - line-height: 44px; - text-align: center; -} -.post_list .post_teaser .main_row .post_utilities a:first-child, .post_list .post_teaser .main_row .post_utilities > div:first-child, .post_list .post_teaser .main_row .post_utilities > span:first-child { - text-align: left; -} -.post_list .post_teaser .utilities_row a { - display: inline-block; - min-width: 44px; - min-height: 44px; - justify-content: center; - align-content: center; -} -.post_list .post_teaser .thumbnail { - float: right; - padding-left: 0; - padding-right: 0; +.post_list .post_teaser .col_thumbnail { + width: 74px; position: relative; } -.post_list .post_teaser .thumbnail .fe { +@media (min-width: 992px) { + .post_list .post_teaser .col_thumbnail { + width: 22.667%; + } +} +.post_list .post_teaser .thumbnail { + text-align: center; + height: 100%; + align-content: center; + display: flex; + align-items: center; +} +.post_list .post_teaser .thumbnail a { + display: block; + width: 100%; + position: relative; +} +.post_list .post_teaser .thumbnail .fe-external, .post_list .post_teaser .thumbnail .fe-video, .post_list .post_teaser .thumbnail .fe-image, .post_list .post_teaser .thumbnail .fe-audio, .post_list .post_teaser .thumbnail .fe-magnify { display: block; position: absolute; - right: 0; + right: -20px; background-color: rgba(255, 255, 255, 0.7); padding-bottom: 1px; padding-left: 1px; border-radius: 2px; - top: 0; + top: 3px; +} +@media (min-width: 992px) { + .post_list .post_teaser .thumbnail .fe-external, .post_list .post_teaser .thumbnail .fe-video, .post_list .post_teaser .thumbnail .fe-image, .post_list .post_teaser .thumbnail .fe-audio, .post_list .post_teaser .thumbnail .fe-magnify { + right: -4px; + } +} +.post_list .post_teaser .thumbnail .fe-discussion, .post_list .post_teaser .thumbnail .fe-poll, .post_list .post_teaser .thumbnail .fe-link { + font-size: 52px; + opacity: 0.3; } .post_list .post_teaser .thumbnail img { height: 60px; width: 60px; border-radius: 5px; object-fit: cover; - margin-left: 5px; + margin-left: 4px; + margin-top: 4px; + margin-bottom: 4px; } @media (min-width: 992px) { .post_list .post_teaser .thumbnail img { height: 90px; width: 170px; + max-width: 100%; } } .post_list .post_teaser .thumbnail img.blur { @@ -849,7 +863,19 @@ div.navbar { font-size: 80%; } +.post_teaser_body { + position: relative; + padding-bottom: 32px; +} + +.post_utilities_bar_wrapper { + position: absolute; + bottom: -7px; + width: 97%; +} + .post_utilities_bar { + position: relative; display: flex; min-height: 44px; } @@ -863,13 +889,33 @@ div.navbar { padding: 3px; padding-left: 0; } -.post_utilities_bar .post_options_link { +.post_utilities_bar .post_replies_link { display: flex; width: 44px; height: 44px; padding: 3px; justify-content: center; align-items: center; + margin-left: -6px; +} +.post_utilities_bar .voting_buttons_new { + display: flex; + height: 44px; + padding: 3px; + justify-content: center; + align-items: center; +} +.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_full .post_utilities_bar .voting_buttons_new { + margin-left: -15px; } #masonry { @@ -1072,6 +1118,9 @@ div.navbar { min-width: 44px; min-height: 44px; } +.voting_buttons_new .upvote_button span, .voting_buttons_new .downvote_button span { + line-height: 44px; +} .voting_buttons_new .upvote_button.digits_4, .voting_buttons_new .downvote_button.digits_4 { width: 68px; } @@ -1091,11 +1140,11 @@ div.navbar { } .voting_buttons_new .upvote_button .htmx-indicator { left: 13px; - top: 7px; + top: 14px; } .voting_buttons_new .downvote_button .htmx-indicator { left: 12px; - top: 5px; + top: 14px; } .voting_buttons_new .htmx-indicator { position: absolute; diff --git a/app/static/styles.scss b/app/static/styles.scss index 3a0958ab..663d3c18 100644 --- a/app/static/styles.scss +++ b/app/static/styles.scss @@ -362,49 +362,47 @@ div.navbar { display: inline-block; max-width: 78%; } - - .post_utilities { - position: absolute; - bottom: -12px; - left: 10px; - a, > div, > span { - display: inline-block; - min-width: 44px; - line-height: 44px; - text-align: center; - - &:first-child { - text-align: left; - } - } - } } - .utilities_row { - a { - display: inline-block; - min-width: $min-touch-target; - min-height: $min-touch-target; - justify-content: center; - align-content: center; + .col_thumbnail { + width: 74px; + position: relative; + @include breakpoint(tablet) { + width: 22.667%; } } .thumbnail { - float: right; - padding-left: 0; - padding-right: 0; - position: relative; - .fe { + text-align: center; + height: 100%; + align-content: center; + display: flex; + align-items: center; + + a { + display: block; + width: 100%; + position: relative; + } + + .fe-external, .fe-video, .fe-image, .fe-audio, .fe-magnify { display: block; position: absolute; - right: 0; + right: -20px; + @include breakpoint(tablet) { + right: -4px; + } background-color: rgba(256,256,256, 0.7); padding-bottom: 1px; padding-left: 1px; border-radius: 2px; - top: 0; + top: 3px; + } + + .fe-discussion, .fe-poll, .fe-link { + font-size: 52px; + opacity: 0.3; } img { @@ -412,10 +410,13 @@ div.navbar { width: 60px; border-radius: 5px; object-fit: cover; - margin-left: 5px; + margin-left: 4px; + margin-top: 4px; + margin-bottom: 4px; @include breakpoint(tablet) { height: 90px; width: 170px; + max-width: 100%; } &.blur { filter: blur(3px); @@ -454,7 +455,19 @@ div.navbar { } } +.post_teaser_body { + position: relative; + padding-bottom: 32px; +} + +.post_utilities_bar_wrapper { + position: absolute; + bottom: -7px; + width: 97%; +} + .post_utilities_bar { + position: relative; display: flex; min-height: $min-touch-target; @@ -469,13 +482,37 @@ div.navbar { padding-left: 0; } - .post_options_link { + .post_replies_link { display: flex; width: $min-touch-target; height: $min-touch-target; padding: 3px; justify-content: center; align-items: center; + margin-left: -6px; + } + + .voting_buttons_new { + display: flex; + height: $min-touch-target; + padding: 3px; + justify-content: center; + align-items: center; + } + + .post_options_link, .preview_image { + display: flex; + width: $min-touch-target; + height: $min-touch-target; + padding: 3px; + justify-content: center; + align-items: center; + } +} + +.post_full .post_utilities_bar { + .voting_buttons_new { + margin-left: -15px; } } @@ -703,6 +740,9 @@ div.navbar { color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); min-width: $min-touch-target; min-height: $min-touch-target; + span { + line-height: $min-touch-target; + } &.digits_4 { width: 68px; @@ -729,14 +769,14 @@ div.navbar { .upvote_button { .htmx-indicator { left: 13px; - top: 7px; + top: 14px; } } .downvote_button { .htmx-indicator { left: 12px; - top: 5px; + top: 14px; } } diff --git a/app/templates/index.html b/app/templates/index.html index aae26ffd..9ea7c2ae 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -14,7 +14,7 @@ {% endif -%} {% include "_home_nav.html" %} {% include "_view_filter_nav.html" %} -
+
{% for post in posts.items -%} {% include 'post/_post_teaser.html' %} {% else -%} diff --git a/app/templates/post/_post_full.html b/app/templates/post/_post_full.html index 13828ae9..46fef021 100644 --- a/app/templates/post/_post_full.html +++ b/app/templates/post/_post_full.html @@ -1,4 +1,4 @@ -
+
{% if post.type == POST_TYPE_IMAGE -%}
-
- {% include "post/_post_voting_buttons.html" -%} -

{{ post.title }} {% if current_user.is_authenticated -%} {% include 'post/_post_notification_toggle.html' -%} @@ -62,9 +59,6 @@
  • {{ post.title|shorten(15) }}
    • -
    - {% include "post/_post_voting_buttons.html" -%} -

    {{ post.title }} {% if current_user.is_authenticated -%} {% include 'post/_post_notification_toggle.html' -%} @@ -193,17 +187,21 @@

    {% endif -%} + {% if post.tags.count() > 0 -%} + + {% endif -%} +
    - {% if post.tags.count() > 0 -%} - - {% endif -%} +
    + {% include "post/_post_voting_buttons.html" -%} +
    {% if post.cross_posts -%}
    -
    -
    -
    -
    - {% if not hide_vote_buttons -%} - - {% endif -%} - {% if post.image_id -%} - +
    +
    + {% if post.image_id -%} + + {% else -%} + + {% endif -%} +
    +
    +

    {% if post.sticky -%}{% endif -%}{{ post.title }} + {% if post.type == POST_TYPE_IMAGE -%} + {% elif post.type == POST_TYPE_POLL -%} + {% elif (post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO) and post.domain_id -%} + {% if post.url and (post.type == POST_TYPE_VIDEO or 'youtube.com' in post.url) -%} + + {% elif post.url.endswith('.mp3') -%} + + {% endif -%} + + {% endif -%} + {% if post.nsfw -%}nsfw{% endif -%} + {% if post.nsfl -%}nsfl{% endif -%} + {% if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator(current_user) -%} + + {% endif -%} + {% if post.sticky -%}{% endif -%} +

    + {% if show_post_community -%}c/{{ post.community.name }}{% endif -%} + by {{ render_username(post.author) }} +
    +
    + {{ post.reply_count }} +
    + {% include "post/_post_voting_buttons.html" -%}
    + {% if post.type == POST_TYPE_IMAGE -%} + {% if post.image_id -%} + + {% else -%} + + {% endif -%} + {% endif -%} +
    +
    {% endif -%} diff --git a/app/templates/post/_post_voting_buttons.html b/app/templates/post/_post_voting_buttons.html index ed07ad17..96c573a7 100644 --- a/app/templates/post/_post_voting_buttons.html +++ b/app/templates/post/_post_voting_buttons.html @@ -1,27 +1,25 @@ {% if current_user.is_authenticated and current_user.verified -%} {% if can_upvote(current_user, post.community) -%}
    + hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0"> - {{ shorten_number(post.up_votes) }}
    {% endif -%} + {{ shorten_number(post.up_votes - post.down_votes) }} {% if can_downvote(current_user, post.community) -%}
    + hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0"> - {{ shorten_number(post.down_votes) }}
    {% endif -%} {% else -%} +{{ shorten_number(post.up_votes - post.down_votes) }} {% endif -%}