Merge pull request #1311 from ubyssey/redesign-latest

Redesign "latest articles" sidebar block
ubyssey · Oct 12, 2023 · 8f58f53 · 8f58f53
2 parents 0b34ab8 + 7ed5d1a
commit 8f58f53
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 49 deletions.
diff --git a/article/templates/article/objects/blog_column-latest.html b/article/templates/article/objects/blog_column-latest.html
@@ -0,0 +1,33 @@
+{% load articletags %}
+
+{% comment %}
+This template is for the columns for the blog section on the home page under the digital prints section
+{% endcomment %}
+
+
+{% load cache %}
+{% load humanize %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load video_filters %}
+<article class="o-article o-article--column o-article--column-latest{% if padded %} o-article--padded{% endif %}">
+  <div class="o-article__meta__image">
+    {% if article.featured_media.first %}
+      {% if article.featured_media.first.image %}
+        <a class="o-article__image" href="{% pageurl article %}">
+          {% image article.featured_media.first.image fill-250x250-c100 %}
+        </a>
+      {% elif article.featured_media.first.video %}
+        <a class="o-article__image" href="{% pageurl article %}" style="background-image: url('http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg'); background-size: contain; background-repeat: no-repeat"></a>
+      {% endif %}
+    {% endif %}
+  </div>
+  <div class="o-article__meta">
+    <h4 class="o-article__section" style="background-color: {{article|get_colour}}">
+      <a href="{{article.get_parent.url}}">{{article.get_parent.title}}</a>
+    </h4>
+    <h3 class="o-article__headline">
+      <a href="{% pageurl article %}">{{ article.title|safe }}</a>
+    </h3>
+  </div>
+</article>
diff --git a/article/templates/article/objects/blog_column.html b/article/templates/article/objects/blog_column.html
@@ -11,20 +11,20 @@
 {% load wagtailimages_tags %}
 {% load video_filters %}
 <article class="o-article o-article--column{% if padded %} o-article--padded{% endif %}" style="background-color: {{article|get_colour}}">
-  <div class="o-article__meta">
-    <div class="o-article__meta__image">
-      {% if article.featured_media.first %}
-        {% if article.featured_media.first.image %}
-          <a class="o-article__image" href="{% pageurl article %}">
-            {% image article.featured_media.first.image fill-250x250-c100 %}
-          </a>
-        {% elif article.featured_media.first.video %}
-          <a class="o-article__image" href="{% pageurl article %}" style="background-image: url('http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg'); background-size: contain; background-repeat: no-repeat"></a>
-        {% endif %}
+  <div class="o-article__meta__image">
+    {% if article.featured_media.first %}
+      {% if article.featured_media.first.image %}
+        <a class="o-article__image" href="{% pageurl article %}">
+          {% image article.featured_media.first.image fill-250x250-c100 %}
+        </a>
+      {% elif article.featured_media.first.video %}
+        <a class="o-article__image" href="{% pageurl article %}" style="background-image: url('http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg'); background-size: contain; background-repeat: no-repeat"></a>
       {% endif %}
-      <h3 class="o-article__headline">
-        <a href="{% pageurl article %}">{{ article.title|safe }}</a>
-      </h3>
-    </div>
+    {% endif %}
+  </div>
+  <div class="o-article__meta">
+    <h3 class="o-article__headline">
+      <a href="{% pageurl article %}">{{ article.title|safe }}</a>
+    </h3>
   </div>
 </article>
diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html
@@ -47,7 +47,7 @@ <h3>BREAKING: {{ article.title|safe }}</h3>
 			{% include "article/objects/cover_story.html" with article=coverstory%}
 		{% endif %}
 		<div class="home-top-article-list">
-			{% now "d N, Y" as date %}
+			{% now "d N Y" as date %}
 			{% now "l" as dayOfWeek %}
 			{% include 'home/objects/home_heading-box.html' with styling='lightmode' title="Top Stories" text=date textBold=dayOfWeek %}
 

diff --git a/infinitefeed/blocks.py b/infinitefeed/blocks.py
@@ -70,7 +70,7 @@ def get_context(self, value, parent_context=None):
         context['articles'] = ArticlePage.objects.live().public().filter(~(Q(current_section='guide'))).order_by('-explicit_published_at')[:5]         
         return context
     class Meta:
-        template = "infinitefeed/sidebar/sidebar_section_block.html"
+        template = "infinitefeed/sidebar/sidebar_latest_block.html"
 
 class SidebarManualArticles(blocks.StructBlock):
     title = blocks.CharBlock(

diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html
@@ -0,0 +1,12 @@
+{% load articletags %}
+
+<div class="article-list blog sidebar-block">
+    {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Last updated:' textBold=articles.0.explicit_published_at|display_pubdate %}
+	<ul class="article-list">
+		{% for article in articles %}
+		<li>
+			{% include 'article/objects/blog_column-latest.html' with sameColour=True article=article %}
+		</li>
+		{% endfor %}
+	</ul>
+</div>
diff --git a/section/templates/section/objects/section_featured.html b/section/templates/section/objects/section_featured.html
@@ -14,7 +14,7 @@
   {% endfor %}
 
   <div class="o-article o-article--column" style="background-color: {{section.colour}};width: fit-content;">
-    <div class="o-article__meta__image">
+    <div class="o-article__meta">
       <h3 class="o-article__headline" style="padding: 0.3em;">
       <a href="{% pageurl section %}" style="margin: 0.5em;">See More</a>
     </h3>

diff --git a/ubyssey/static_src/src/styles/components/_infinitefeed.scss b/ubyssey/static_src/src/styles/components/_infinitefeed.scss
@@ -29,9 +29,13 @@
     margin-bottom: 65px;
 }
 
+.sidebar-block > .boxLabel {
+    font-size: 1.1em;
+}
+
 .c-sidebar {
     height: 100%;
-    width:40%;
+    width:38%;
     padding-left: 1em;
 
     @media ($bp-smaller-than-phablet) {
@@ -60,12 +64,11 @@
   }
 
 .c-home-infinitefeed {
-    padding-left: 20px;
-    padding-right: 20px;
     width: 100%;
     @media ($bp-larger-than-phablet) {
         margin-right: 20px;
         width: 50%;
+        padding-right: 20px;
     }
 }
 

diff --git a/ubyssey/static_src/src/styles/modules/_homepage.scss b/ubyssey/static_src/src/styles/modules/_homepage.scss
@@ -695,7 +695,6 @@ ol.article-list {
 .boxText {
   margin: 0;
   font-size: 1em;
-  text-transform: capitalize;
   position: relative;
   top: 50%;
   transform: translate(0,-50%);
@@ -723,6 +722,10 @@ ol.article-list {
       filter: drop-shadow(0 5px 6px #00000040);
     }
   }
+
+  .boxLabel-highlight .boxLabel-right {
+    background-color: $color-ubyssey-blue-light;
+  }
 }
 
 .darkmode {
@@ -815,6 +818,9 @@ ol.article-list {
   &.lightmode {
     background-color: $color-ubyssey-blue-light;
   }
+
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .home_infinitefeed_cutoff_shadow {

diff --git a/ubyssey/static_src/src/styles/objects/_article.scss b/ubyssey/static_src/src/styles/objects/_article.scss
@@ -96,7 +96,8 @@
   color: white;
   font-weight: 600;
   &:hover {
-    color: black;
+    color: white;
+    background-color: $color-ubyssey-blue-dark !important;
   }
 }
 
@@ -563,51 +564,96 @@
 
 .o-article--column {
   margin-bottom: 1rem;
-  background-color: #1771c5;
+  background-color: $color-ubyssey-blue-light;
   position: relative;
   left:0;
   transition-duration: 0.2s;
+  display: flex;
   &:hover {
     left: -10px;
   }
-  .o-article__image {
-    // Structure
-    width: 4.5rem;
-    height: 4.5rem;
-    margin-right: 0.65rem;
 
-    // Background
-    background-position: center;
-    background-size: cover;
-  }
+  .o-article__meta__image {
+    background-color: black;
+    margin-right: 0.65rem;
 
-  .o-article__headline {
-    // Structure
-    flex: 1;
-    color: #ffffff;
-    margin: auto;
-    margin-right: 0.5em;
-    // Text
-    font-size: font-size(22);
+    .o-article__image {
+      // Structure
+      display: flex;
+      width: 4.5rem;
+      height: 100%;
+
+      // Background
+      background-position: center;
+      background-size: cover;
 
-    a:hover {
-      color: #eeeeee;
+      img {
+        margin: auto;
+      }
     }
   }
 
-  .o-article__meta__image {
-    // Structure
+  .o-article__meta {
     display: flex;
-    margin-bottom: 0.65rem;
+    margin-bottom: 0;
+
+    .o-article__headline {
+      // Structure
+      font-size: font-size(18);
+      line-height: 1.2em;
+      flex: 1;
+      color: #ffffff;
+      margin: auto;
+      margin-right: 0.5em;
+
+      a:hover {
+        color: #eeeeee;
+      }
+    }
   }
+}
 
-  .o-article__meta__image .o-article__headline {
+.o-article--column-latest {
 
-    // Text
-    font-size: font-size(18);
-    line-height: 1.2em;
+  .o-article__meta__image .o-article__image {
+    width: 5em;
   }
 
+  .o-article__meta {
+    display: flex;
+    flex-direction: column;
+
+
+    .o-article__section {
+      margin-top: 0.5em;
+      margin-bottom: 0.25em;
+      font-size: 0.65em;
+      text-transform: uppercase;
+      width: fit-content;
+      padding-left: 0.2em;
+      padding-right: 0.2em;
+      background-color: $color-ubyssey-blue;
+      color: white;
+
+      &:hover {
+        background-color: $color-ubyssey-blue-dark !important;
+      }
+
+      a:hover {
+        color: white;
+      }
+    }
+
+    .o-article__headline {
+      margin-top: 0;
+      line-height: 1.3em;
+      color: black;
+
+      a:hover {
+        color: #555555;
+      }
+    }
+  }
 }