Merge pull request 'Add community icon infront of name in teasers' (#333) from jeena/pyfedi:main into main

Reviewed-on: https://codeberg.org/rimu/pyfedi/pulls/333

app/static/styles.css

@@ -359,8 +359,7 @@ h1 .fe-bell, h1 .fe-no-bell {
   top: 2px;
 }
 .fe-poll:before {
-  content: "\e91b";
+  content: "\e91b"; /* possibly e985 */
-  /* possibly e985 */
 }
 
 .fe-sticky-left::before {
@@ -513,25 +512,20 @@ a {
 
 .skip-link {
   position: absolute;
-  top: -40px;
+  top: -40px; /* Adjust as needed to hide the link off-screen */
-  /* Adjust as needed to hide the link off-screen */
   left: 0;
-  background-color: #fff;
+  background-color: #fff; /* Background color to cover the link for screen readers */
-  /* Background color to cover the link for screen readers */
+  z-index: 1060; /* Ensure it's above other content */
-  z-index: 1060;
-  /* Ensure it's above other content */
 }
 
 .skip-link:focus {
-  top: 0;
+  top: 0; /* Bring the link back into view when it receives focus */
-  /* Bring the link back into view when it receives focus */
 }
 
 #outer_container a:not(.btn):hover, footer a:not(.btn):hover {
   text-decoration: underline;
 }
-#outer_container a:not(.btn):has(span.fe):hover, footer a:not(.btn):has(span.fe):hover {
+#outer_container a:not(.btn):has(span.fe):hover, footer a:not(.btn):has(span.fe):hover { /* do not have underlines on icons */
-  /* do not have underlines on icons */
   text-decoration: none;
 }
 #outer_container a:not(.btn):active, footer a:not(.btn):active {
@@ -660,8 +654,7 @@ div.navbar {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
-  border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0; /* top-left | top-right | bottom-right | bottom-left */
-  /* top-left | top-right | bottom-right | bottom-left */
   height: 176px;
   margin-left: -12px;
   margin-right: -12px;
@@ -878,8 +871,7 @@ div.navbar {
   margin: 0;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 2; /* Limits the text to a specific number of lines */
-  /* Limits the text to a specific number of lines */
   line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -919,8 +911,7 @@ div.navbar {
 }
 .post_teaser_video_preview .video-wrapper {
   position: relative;
-  padding-bottom: 56.25%;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
-  /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
 }
@@ -1022,8 +1013,7 @@ div.navbar {
 #masonry .item img {
   width: 100%;
   display: block;
-  height: auto;
+  height: auto; /* Ensure aspect ratio is maintained */
-  /* Ensure aspect ratio is maintained */
 }
 #masonry .item .masonry_thumb a, #masonry .item .masonry_thumb a:active {
   border: none;
@@ -1195,8 +1185,7 @@ div.navbar {
   display: inline-block;
 }
 .voting_buttons_new .upvote_button, .voting_buttons_new .downvote_button {
-  position: relative;
+  position: relative; /* so the htmx-indicators can be position: absolute */
-  /* so the htmx-indicators can be position: absolute */
   display: inline-block;
   text-align: center;
   cursor: pointer;
@@ -1735,6 +1724,12 @@ h1 .warning_badge {
   object-fit: cover;
 }
 
+.community_icon_small {
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
+}
+
 .bump_up {
   position: absolute;
   top: 115px;
@@ -1956,7 +1951,6 @@ form h5 {
     --bs-link-color-rgb: black;
     --bs-link-hover-color-rgb: #333;
   }
-
   [data-bs-theme=dark] {
     --bs-body-bg: black;
     --bs-link-color: white;
@@ -1966,84 +1960,65 @@ form h5 {
     --bs-body-color: white;
     --bs-body-color-rgb: white;
   }
-
   .btn-primary {
     --bs-btn-bg: black;
     --bs-btn-border-color: black;
     --bs-btn-hover-bg: #333;
   }
-
   [data-bs-theme=dark] .btn-primary {
     --bs-btn-bg: white;
     --bs-btn-border-color: white;
     --bs-btn-hover-bg: white;
     --bs-btn-color: black;
   }
-
   [data-bs-theme=dark] .btn-primary:hover {
     --bs-btn-hover-color: black;
   }
-
   .btn-outline-secondary {
     --bs-btn-color: black;
   }
-
   [data-bs-theme=dark] .btn-outline-secondary {
     --bs-btn-color: white;
   }
-
   .post_list .post_teaser {
     border-bottom: solid 1px black;
   }
-
   [data-bs-theme=dark] .post_list .post_teaser {
     border-bottom: solid 1px white;
   }
-
   .domain_link, .domain_link a {
     color: black;
   }
-
   [data-bs-theme=dark] .domain_link, [data-bs-theme=dark] .domain_link a {
     color: ghostwhite;
   }
-
   .main_pane, .voting_buttons div {
     border: solid 1px #333;
   }
-
   [data-bs-theme=dark] .main_pane, [data-bs-theme=dark] .voting_buttons div {
     border: solid 1px #eee;
   }
-
   div.navbar {
     border-bottom: solid 1px #333;
   }
-
   [data-bs-theme=dark] div.navbar {
     border-bottom: solid 1px #fff;
   }
-
   .nav-link {
     color: black;
   }
-
   [data-bs-theme=dark] .nav-link {
     color: white;
   }
-
   .card {
     --bs-card-border-color: #333;
   }
-
   [data-bs-theme=dark] .card {
     --bs-card-border-color: #fff;
   }
-
   .coolfieldset.collapsed legend, .coolfieldset legend, .coolfieldset.expanded legend {
     background-color: white;
   }
-
   [data-bs-theme=dark] .coolfieldset.collapsed legend, [data-bs-theme=dark] .coolfieldset legend, [data-bs-theme=dark] .coolfieldset.expanded legend {
     background-color: black;
   }
@@ -2057,16 +2032,13 @@ form h5 {
   .navbar .nav-link, .post_utilities_bar, .community_header, .community_icon_big, .mobile_create_post {
     display: none;
   }
-
   .navbar {
     padding-top: 0;
     padding-bottom: 0;
   }
-
   .comments > .comment, .post_teaser {
     break-inside: avoid;
   }
-
   .main_pane {
     border: none;
     padding: 0;
@@ -2074,16 +2046,13 @@ form h5 {
   .main_pane > .btn-group {
     display: none;
   }
-
   .div.navbar {
     border-bottom: none;
   }
-
   .limit_height {
     overflow: visible !important;
     max-height: initial;
   }
-
   .comment .show-more {
     display: none;
   }

app/static/styles.scss

@@ -1412,6 +1412,12 @@ h1 .warning_badge {
   object-fit: cover;
 }
 
+.community_icon_small {
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
+}
+
 .bump_up {
   position: absolute;
   top: 115px;

app/templates/post/post_teaser/_article.html

@@ -7,7 +7,9 @@
         {% 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 -%}
+    <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) }}">
+        {% if post.community.icon_image() %}<img class="community_icon_small rounded-circle" src="{{ post.community.icon_image() }}" alt="Community icon" />{% endif -%}
+        c/{{ post.community.name }}</a>{% endif -%}
         by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ post.posted_at_localized(sort, locale) }}</time></span>
     {% if post.body_html -%}
         <div class="post_teaser_article_preview small">

app/templates/post/post_teaser/_image.html

@@ -10,7 +10,9 @@
         {% 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 -%}
+    <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) }}">
+        {% if post.community.icon_image() %}<img class="community_icon_small rounded-circle" src="{{ post.community.icon_image() }}" alt="Community icon" />{% endif -%}
+        c/{{ post.community.name }}</a>{% endif -%}
         by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ post.posted_at_localized(sort, locale) }}</time></span>
     {% if post.image_id and not low_bandwidth -%}
         <div class="post_teaser_image_preview">

app/templates/post/post_teaser/_link.html

@@ -13,7 +13,9 @@
         {% 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 -%}
+    <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) }}">
+        {% if post.community.icon_image() %}<img class="community_icon_small rounded-circle" src="{{ post.community.icon_image() }}" alt="Community icon" />{% endif -%}
+        c/{{ post.community.name }}</a>{% endif -%}
         by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ post.posted_at_localized(sort, locale) }}</time></span>
     {% if post.body_html -%}
         <div class="post_teaser_link_preview small">

app/templates/post/post_teaser/_poll.html

@@ -8,7 +8,9 @@
         {% 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 -%}
+    <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) }}">
+        {% if post.community.icon_image() %}<img class="community_icon_small rounded-circle" src="{{ post.community.icon_image() }}" alt="Community icon" />{% endif -%}
+        c/{{ post.community.name }}</a>{% endif -%}
         by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ post.posted_at_localized(sort, locale) }}</time></span>
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>

app/templates/post/post_teaser/_video.html

@@ -15,7 +15,9 @@
         {% 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 -%}
+    <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) }}">
+        {% if post.community.icon_image() %}<img class="community_icon_small rounded-circle" src="{{ post.community.icon_image() }}" alt="Community icon" />{% endif -%}
+        c/{{ post.community.name }}</a>{% endif -%}
         by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ post.posted_at_localized(sort, locale) }}</time></span>
     {% if not low_bandwidth %}
         <div class="post_teaser_video_preview">