Merge pull request #1540 from ubyssey/1539-special-landing-page-midse…

…ction-block

Create landing midsection template and update timeline template so it…

article/templatetags/articletags.py

@@ -85,10 +85,14 @@ def get_id(value):
 def group_by_date(value):
     groups = []
     for article in value:
+        if hasattr(article, 'article.explicit_published_at'):
+            article.pubTime = article.explicit_published_at
+        else:
+            article.pubTime = article.first_published_at
         if len(groups) < 1:
             groups.append([article])
         else:
-            if display_pubdate(groups[-1][-1].explicit_published_at) == display_pubdate(article.explicit_published_at):
+            if display_pubdate(groups[-1][-1].pubTime) == display_pubdate(article.pubTime):
                 groups[-1].append(article)
             else:
                 groups.append([article])

home/blocks.py

@@ -133,6 +133,7 @@ class MidStreamListTemplates(blocks.ChoiceBlock):
     choices=[
         ('section/objects/section_bulleted.html', 'Default'),
         ('section/objects/section_timeline.html', 'Timeline'),
+        ('section/objects/section_landing.html', 'Landing'),
     ]
 
 class SectionBlock(AbstractArticleList):

section/templates/section/objects/section_landing.html

@@ -0,0 +1,59 @@
+{% load humanize %}
+{% load cache %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load video_filters %}
+{% load articletags %}
+
+<div class="c-homepage__section__landing u-container u-container--large u-container--padded" style="--section-colour:{{articles.0.colour}}">
+<div class="c-homepage__section__landing-flex">
+  {% if articles.0 %}
+    {% with article=articles.0 %}
+    <article class="o-article article--landing {%if article.featured_media.first.video %}video-article{% endif %}" time="{{article.explicit_published_at|naturalday}}">
+      {% if article.featured_media.first or article.featured_media %}
+      {% if article.featured_media.first.image  or article.featured_media%}
+      <div class="o-article__left">
+        <div style="position:relative">
+          <a href="{% pageurl article %}" class="o-article__image">
+            {% if article.featured_media.first.image %}
+              {% image article.featured_media.first.image width-600 format-webp %}
+            {% else %}
+              {% image article.featured_media width-600 format-webp %}
+            {% endif %}
+          </a>
+        </div>
+      </div>
+      {% elif article.featured_media.first.video %}
+      <div class="o-article__left">
+        <div class="o-article__video">
+          <iframe src="https://www.youtube.com/embed/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+        </div>
+      </div>
+      {% endif %}
+      {% endif %}
+      <div class="o-article__right">
+        <div class="o-article__meta">
+          <h3 class="o-article__headline">
+            <a href="{% pageurl article %}">{{ article.title|safe }}</a>
+          </h3>
+          <p>{{article.search_description}}</p>
+        </div>
+      </div>
+    </article>
+    {% endwith %}
+  {% endif %}
+
+	<ul>
+      {% for article in articles|slice:"1:" %}
+			<li>
+        <article class="o-article" style="--section-colour:{{articles.0.colour}}">
+          <h3 class="o-article__headline">
+            <a href={% pageurl article %}>{{ article.title|safe }}</a>
+          </h3>
+        </article>
+      </li>
+      {% endfor %}
+	</ul>
+</div>
+
+</div>

section/templates/section/objects/section_timeline.html

@@ -11,12 +11,16 @@ <h2><a href="{{link}}">{{title}}</a></h2>
   {% if articles.0 %}
     {% with article=articles.0 %}
     <article class="o-article article--timeline {%if article.featured_media.first.video %}video-article{% endif %}" time="{{article.explicit_published_at|naturalday}}">
-      {% if article.featured_media.first %}
-      {% if article.featured_media.first.image %}
+      {% if article.featured_media.first or article.featured_media %}
+      {% if article.featured_media.first.image  or article.featured_media%}
       <div class="o-article__left">
         <div style="position:relative">
           <a href="{% pageurl article %}" class="o-article__image">
-            {% image article.featured_media.first.image fill-340x238-c100 format-webp %}
+            {% if article.featured_media.first.image %}
+              {% image article.featured_media.first.image fill-340x238-c100 format-webp %}
+            {% else %}
+              {% image article.featured_media fill-340x238-c100 format-webp %}
+            {% endif %}
           </a>
           {% if label %}
             {% if article|get_label %}

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

@@ -402,6 +402,43 @@ html.hairlines {
   }
 }
 
+.c-homepage__section__landing {
+  padding: 1em 0;
+  margin: 2em auto;
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+  border-color: var(--section-colour);
+  .c-homepage__section__landing-flex {
+    display: flex;
+    .article--landing {
+      .o-article__left {
+        padding: 1em 0;
+      }
+    }
+    ul {
+      height: fit-content;
+      margin: auto 0;
+      padding-bottom: 5%;
+      li {
+        margin: 1em 0;
+        .o-article__headline {
+          border-bottom: 0.2em solid;
+          border-color: var(--section-colour);
+        }
+      }
+    }
+  }
+}
+
+@media($bp-larger-than-phablet) {
+  .c-homepage__section__landing-flex {
+    margin-inline: 1em;
+    .article--landing {
+      max-width: 600px;
+      padding-right: 2em;    
+    }
+  }
+}
 @media($bp-smaller-than-phablet) {
   .c-homepage__section__timeline {
     max-width: none;
@@ -428,6 +465,16 @@ html.hairlines {
       }
     }
   }
+
+  .c-homepage__section__landing-flex {
+    flex-direction: column;
+    h3, p {
+      margin-inline: 1em;
+    }
+    ul {
+      width: fit-content;
+    }
+  }
 }
 
 [color-css-theme="light"] {