PR feedback: Add missing images, align tablet images top, add missing border-radius, reflow image on mobile

Author: jlchilders11

static/css/v3/posts-list.css

@@ -110,6 +110,13 @@
     flex: 1 0 auto;
     align-self: center;
     position: relative;
+    border-radius: var(--border-radius-s);
+    overflow: hidden;
+}
+
+.post-card__thumbnail img {
+    width: 160px;
+    height: auto;
 }
 
 .post-card__play-icon {
@@ -153,6 +160,30 @@
     .post-content__filter_column {
         margin-bottom: var(--space-xl);
     }
+
+    .post-card__row {
+        flex-direction: column;
+    }
+
+    .post-card__thumbnail {
+        width: 100%;
+    }
+
+    .post-card__thumbnail img {
+        width: 100%;
+    }
+
+    .post-card__play-icon {
+        height: 32px;
+        width: 32px;
+    }
+}
+
+
+@media (max-width: 1279px) {
+    .post-card__thumbnail {
+        align-self: flex-start;
+    }
 }
 
 

templates/v3/includes/_post_list_card.html

@@ -40,11 +40,15 @@
                 </div>
                 {% if item.video_thumbnail %}
                 <a  class="post-card__thumbnail" href="{{ item.get_absolute_url }}">
-                  {% image item.video_thumbnail fill-180x100 %}
+                  {% image item.video_thumbnail fill-360x200 %}
                   <div class="post-card__play-icon">
                     {% include "includes/icon.html" with icon_name="play_button" icon_size=16 only %}
                   </div>
                 </a>
+                {% elif item.image %}
+                <a  class="post-card__thumbnail" href="{{ item.get_absolute_url }}">
+                    <img src="{{item.image.url}}" />
+                </a>
                 {% endif %}
             </div>
           </article>