post teaser redesign #148

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)
 
 

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

app/static/scss/_typography.scss

@@ -166,14 +166,22 @@
 }
 
 .fe-reply {
-  position: relative;
+  margin-right: 2px;
-  top: 1px;
+  margin-top: -1px;
 }
 
 .fe-reply::before {
   content: "\e990";
 }
 
+.fe-discussion::before {
+  content: "\e991";
+}
+
+.fe-link::before {
+  content: "\e991";
+}
+
 .fe-layers {
   position: relative;
   top: 1px;

app/static/styles.css

@@ -197,14 +197,22 @@
 }
 
 .fe-reply {
-  position: relative;
+  margin-right: 2px;
-  top: 1px;
+  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 {
+.post_list .post_teaser .col_thumbnail {
-  position: absolute;
+  width: 74px;
-  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;
   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;

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 {
+    .col_thumbnail {
-      a {
+      width: 74px;
-        display: inline-block;
+      position: relative;
-        min-width: $min-touch-target;
+      @include breakpoint(tablet) {
-        min-height: $min-touch-target;
+        width: 22.667%;
-        justify-content: center;
-        align-content: center;
       }
     }
 
     .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;
     }
   }
 

app/templates/index.html

@@ -14,7 +14,7 @@
         {% endif -%}
         {% include "_home_nav.html" %}
         {% include "_view_filter_nav.html" %}
-        <div class="post_list">
+        <div class="post_list h-feed">
             {% for post in posts.items -%}
                 {% include 'post/_post_teaser.html' %}
             {% else -%}

app/templates/post/_post_full.html

@@ -1,4 +1,4 @@
-<div class="row position-relative">
+<div class="row position-relative post_full">
     {% if post.type == POST_TYPE_IMAGE -%}
         <div class="col post_col post_type_image">
             <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
@@ -10,9 +10,6 @@
                 <li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
               </ol>
             </nav>
-            <div class="voting_buttons" aria-live="assertive">
-                {% include "post/_post_voting_buttons.html" -%}
-            </div>
             <h1 class="mt-2 post_title"{% if post.language_id and post.language.code != 'en' %} lang="{{ post.language.code }}"{% endif %}>{{ post.title }}
                 {% if current_user.is_authenticated -%}
                     {% include 'post/_post_notification_toggle.html' -%}
@@ -62,9 +59,6 @@
                 <li class="breadcrumb-item active">{{ post.title|shorten(15) }}</li>
               </ol>
             </nav>
-            <div class="voting_buttons" aria-live="assertive">
-                {% include "post/_post_voting_buttons.html" -%}
-            </div>
             <h1 class="mt-2 post_title" {% if post.language_id and post.language.code != 'en' %}lang="{{ post.language.code }}"{% endif %}>{{ post.title }}
                 {% if current_user.is_authenticated -%}
                     {% include 'post/_post_notification_toggle.html' -%}
@@ -193,7 +187,6 @@
         </div>
     {% endif -%}
 
-    <div class="post_utilities_bar">
     {% if post.tags.count() > 0 -%}
         <nav role="navigation">
             <h3 class="visually-hidden">{{ _('Hashtags') }}</h3>
@@ -204,6 +197,11 @@
             </ul>
         </nav>
     {% endif -%}
+
+    <div class="post_utilities_bar">
+        <div class="voting_buttons_new" aria-live="assertive">
+            {% include "post/_post_voting_buttons.html" -%}
+        </div>
         {% 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') }}"

app/templates/post/_post_teaser.html

@@ -8,17 +8,10 @@
 {% if content_blocked and content_blocked == '-1' -%}
     {# do nothing - blocked by keyword filter #}
 {% else -%}
-    <div class="post_teaser type_{{ post.type }}{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}{{ ' blur' if blur_content }}"
+    <div class="h-entry post_teaser type_{{ post.type }}{{ ' reported' if post.reports > 0 and current_user.is_authenticated and post.community.is_moderator() }}{{ ' blocked' if content_blocked }}{{ ' blur' if blur_content }}"
         {% if content_blocked -%} title="{{ _('Filtered: ') }}{{ content_blocked }}"{% endif -%} tabindex="0">
         <div class="row">
-                <div class="col-12">
+            <div class="col col-2 col_thumbnail">
-                    <div class="row main_row">
-                        <div class="col">
-                            {% if not hide_vote_buttons -%}
-                            <div class="voting_buttons" aria-hidden="true">
-                                {% include "post/_post_voting_buttons.html" -%}
-                            </div>
-                            {% endif -%}
                 {% if post.image_id -%}
                     <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
                         {% if low_bandwidth -%}
@@ -42,18 +35,24 @@
                                     alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
                                 {% endif -%}
                             {% else -%}
-                                            <a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span><img src="{{ post.image.thumbnail_url() }}"
+                                <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 -%}
                         {% endif -%}
                     </div>
                 {% else -%}
-                                {% if (post.type == POST_TYPE_LINK or post.type == POST_TYPE_VIDEO) and post.domain_id -%}
+                    <div class="thumbnail{{ ' lbw' if low_bandwidth }}" aria-hidden="true">
-                                    <div class="thumbnail{{ ' lbw' if low_bandwidth }} missing_thumbnail" aria-hidden="true">
+                        {% if post.type == POST_TYPE_ARTICLE %}
-                                        <a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span></a>
+                            <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-discussion"></span></a>
+                        {% elif post.type == POST_TYPE_LINK %}
+                            <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}"><span class="fe fe-link"></span></a>
+                        {% elif post.type == POST_TYPE_POLL %}
+                            <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>
+                        {% endif %}
                     </div>
                 {% endif -%}
-                            {% endif -%}
+            </div>
+            <div class="col post_teaser_body">
                 <h3>{% if post.sticky -%}<span class="fe fe-sticky-left"></span>{% endif -%}<a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None) }}" class="post_teaser_title_a">{{ post.title }}</a>
                     {% if post.type == POST_TYPE_IMAGE -%}<span class="fe fe-image" aria-hidden="true"> </span>
                     {% elif post.type == POST_TYPE_POLL -%}<span class="fe fe-poll" aria-hidden="true"> </span>
@@ -72,11 +71,14 @@
                     {% endif -%}
                     {% if post.sticky -%}<span class="fe fe-sticky-right"></span>{% endif -%}
                 </h3>
-
                 <span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
-                                by {{ render_username(post.author) }} {{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</span>
+                                by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
-                            <div class="post_utilities">
+                <div class="post_utilities_bar_wrapper">
-                                <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}" aria-label="{{ _('View comments') }}"><span class="fe fe-reply"></span> <span aria-label="{{ _('Number of comments:') }}">{{ post.reply_count }}</span></a>
+                    <div class="post_utilities_bar">
+                        <a class="post_replies_link" href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, _anchor='post_replies') }}" aria-label="{{ _('View comments') }}"><span class="fe fe-reply"></span> <span aria-label="{{ _('Number of comments:') }}">{{ post.reply_count }}</span></a>
+                        <div class="voting_buttons_new" aria-live="assertive">
+                            {% include "post/_post_voting_buttons.html" -%}
+                        </div>
                         {% if post.type == POST_TYPE_IMAGE -%}
                             {% if post.image_id -%}
                                 <a href="{{ post.image.view_url() }}" rel="nofollow ugc" class="preview_image" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
@@ -84,8 +86,7 @@
                                 <a href="{{ post.url }}" rel="nofollow ugc" class="preview_image" target="_blank" aria-label="{{ _('View image') }}" aria-hidden="true"><span class="fe fe-magnify"></span></a>
                             {% endif -%}
                         {% endif -%}
-                                <a href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
+                        <a class="post_options_link" href="{{ url_for('post.post_options', post_id=post.id) }}" rel="nofollow" aria-label="{{ _('Options') }}"><span class="fe fe-options" title="Options"> </span></a>
-                            </div>
                     </div>
                 </div>
             </div>

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) -%}
                 <div class="upvote_button {{ 'voted_up' if in_sorted_list(recently_upvoted, post.id) }}" role="button" aria-label="{{ _('UpVote button, %(count)d upvotes so far.', count=post.up_votes) }}" aria-live="assertive"
-                 hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons" tabindex="0">
+                 hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0">
                         <span class="fe fe-arrow-up"></span>
-                        {{ shorten_number(post.up_votes) }}
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
                 </div>
         {% endif -%}
+        <span title="{{ post.up_votes }}, {{ post.down_votes }}" aria-live="assertive" aria-label="{{ _('Score: ') }}{{ post.up_votes - post.down_votes }}.">{{ shorten_number(post.up_votes - post.down_votes) }}</span>
         {% if can_downvote(current_user, post.community) -%}
                 <div class="downvote_button {{ 'voted_down' if in_sorted_list(recently_downvoted, post.id) }}" role="button" aria-label="{{ _('DownVote button, %(count)d downvotes so far.', count=post.down_votes) }}" aria-live="assertive"
-                 hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons" tabindex="0">
+                 hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons_new" tabindex="0">
                         <span class="fe fe-arrow-down"></span>
-                        {{ shorten_number(post.down_votes) }}
                         <img class="htmx-indicator" src="/static/images/spinner.svg" alt="" style="opacity: 0;">
                 </div>
         {% endif -%}
 {% else -%}
 <div class="upvote_button digits_{{ digits(post.up_votes) }} {{ upvoted_class }} redirect_login">
         <span class="fe fe-arrow-up"></span>
-        {{ shorten_number(post.up_votes) }}
 </div>
+<span title="{{ post.up_votes }}, {{ post.down_votes }}" aria-live="assertive" aria-label="{{ _('Score: ') }}{{ post.up_votes - post.down_votes }}.">{{ shorten_number(post.up_votes - post.down_votes) }}</span>
 <div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }} redirect_login">
         <span class="fe fe-arrow-down"></span>
-        {{ shorten_number(post.down_votes) }}
 </div>
 {% endif -%}