Implement redesign style adjustments. Add new time display filter.

article/templatetags/articletags.py

@@ -70,6 +70,34 @@ def display_pubdate(value):
         return "1 second ago"
     return str(seconds) + " seconds ago"
 
+@register.filter(name='time_ago')
+def time_ago(value):
+
+    if value == None:
+        return "Unknown"
+
+    pubdate = value.astimezone(timezone.get_current_timezone())
+    today = timezone.now().astimezone(timezone.get_current_timezone())
+    delta = today - pubdate
+
+    if delta.total_seconds() > datetime.timedelta(days=7).total_seconds():
+        delta = round(delta.total_seconds()/(3600*24*7))
+        unit = "w"    
+    elif delta.total_seconds() > datetime.timedelta(days=1).total_seconds():
+        delta = round(delta.total_seconds()/(3600*24))
+        unit = "d"
+    elif delta.total_seconds() > datetime.timedelta(hours=1).total_seconds():
+        delta = round(delta.total_seconds()/3600)
+        unit = "h"
+    elif delta.total_seconds() > datetime.timedelta(minutes=1).total_seconds():
+        delta = round(delta.total_seconds()/60)
+        unit = "m"
+    else:
+        delta = round(delta.total_seconds())
+        unit = "s"
+
+    return str(delta) + unit + " ago"
+
 @register.filter(name="get_id")
 def get_id(value):
     from wagtail.models import Page, PageManager, SiteRootPath

home/templates/home/home_page.html

@@ -4,6 +4,7 @@
 {% load wagtailimages_tags %}
 {% load ubyssey_ad_tags %}
 {% load ubyssey_ad_filters %}
+{% load articletags %}
 
 {% block stylesheet %}
 	<link rel="stylesheet" href="{% static 'ubyssey/css/home.css' %}" type="text/css" />
@@ -52,9 +53,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 "l" as dayOfWeek %}
-			{% include 'home/objects/home_heading-box.html' with styling='lightmode' title="Top Stories" text=date textBold=dayOfWeek %}
+			{% include 'home/objects/home_heading-box.html' with styling='lightmode' title="Top Stories" text="Updated" textBold=self.last_published_at|time_ago %}
 
 			{% for article in self.top_articles_list %}
 				{% include "article/objects/top_article.html" with article=article.article count=forloop.counter %}

infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html

@@ -1,7 +1,7 @@
 {% 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.first_published_at|display_pubdate %}
+    {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Updated' textBold=articles.0.first_published_at|time_ago %}
 	<ul class="article-list">
 		{% for article in articles %}
 		<li>

navigation/templates/navigation/footer.html

@@ -50,7 +50,7 @@ <h3>Explore</h3>
         <div class="land-acknowledgement">
             <h3>Land Acknowledgement</h3>
             <p>
-                <i>The Ubyssey</i> would like to acknowledge that our office resides and our production takes place on the ancestral, unceded territories of the xʷməθkʷəy̓əm (Musqueam), sḵwx̱wú7mesh  (Squamish) and sel̓íl̓witulh (Tsleil-Waututh) nations. We make this  acknowledgement to pay respect to the keepers of the land, and to help  fulfill our responsibility to view our own colonial history and their  present-day implications through a critical lens.
+                <i>The Ubyssey</i> would like to acknowledge that our office resides and our production takes place on the ancestral, unceded territories of the xʷməθkʷəy̓əm (Musqueam), sḵwx̱wú7mesh  (Squamish) and sel̓íl̓witulh (Tsleil-Waututh) nations. <a href="https://ubyssey.ca/pages/about/">Read More</a>.
             </p>
         </div>
         <div class="copyright">&copy; {% now "Y" %} The Ubyssey</div>

navigation/templates/navigation/headers/main.html

@@ -25,12 +25,12 @@
 
         <div>
           <a class = "rss-icon" href="/rss" target="_blank" title="The Ubyssey rss feed"><ion-icon name="logo-rss"></ion-icon></a>
-          {% comment %}
+
           <a class = "instagram-icon" href="https://www.instagram.com/ubyssey/" target="_blank" title="The Ubyssey on Instagram"><ion-icon name="logo-instagram"></ion-icon></a>
           <a class = "tiktok-icon" href="https://www.tiktok.com/@ubyssey" target="_blank" title="The Ubyssey on Tiktok"><ion-icon name="logo-tiktok"></ion-icon></a>
           <a class = "twitter-icon" href="https://twitter.com/Ubyssey" target="_blank" title="The Ubyssey on Twitter"><ion-icon name="logo-twitter"></ion-icon></a>
           <a class = "facebook-icon" href="https://www.facebook.com/ubyssey" target="_blank" title="The Ubyssey on Facebook"><ion-icon name="logo-facebook"></ion-icon></a>
-          {% endcomment %}
+
           {% include 'article/objects/darkmode_button.html' with id="main"%}
         </div>
         {% comment %} <a class="search" href="{% url 'search' %}"><i class="fa fa-search"></i></a> {% endcomment %}

ubyssey/static_src/src/styles/modules/_footer.scss

@@ -68,6 +68,9 @@ footer {
     margin: 2em auto;
     padding: 1em;
     max-width: 1150px;
+    a {
+      text-decoration: underline;
+    }
   }
 
   .copyright {
@@ -139,7 +142,8 @@ footer {
 
       .logo {
         width: 50%;
-        margin: auto;
+        margin-inline: auto;
+        margin-bottom: 1em;
       }
       .funding {
         margin-inline: auto;
@@ -164,10 +168,6 @@ footer {
         text-decoration: underline;
       }
     }
-
-    .land-acknowledgement {
-      display: none;
-    }
   }
 
 }

ubyssey/static_src/src/styles/modules/_header.scss

@@ -54,12 +54,9 @@ header.main{
 
     .middle {
       margin-left: 2em;
-      max-width: 600px;
+      max-width: 520px;
       width: 100%;
     }
-    .left, .right {
-      padding-top: 0.5em;
-    }
     .right {
       margin-left: auto;
     }
@@ -75,7 +72,7 @@ header.main{
   .row {
     margin-top: 20px;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     //overflow: hidden;
 
     .left, .middle, .right {
@@ -91,9 +88,9 @@ header.main{
     .right {
       text-align: right;
 
-      //.rss-icon {
-      //  margin-right: 1.5em;
-      //}
+      .rss-icon {
+        margin-right: 1.5em;
+      }
 
       a {
           position: relative;
@@ -202,6 +199,7 @@ header.main{
       width: fit-content;
       margin: auto;
       height: 100%;
+      gap: 0.5em;
       li {
         display: inline-block;
       }