Merge pull request #1595 from ubyssey/finish-ams-elections

AMS elections timeline and header menu

home/blocks.py

@@ -363,6 +363,76 @@ def get_context(self, value, parent_context=None):
 
         return context
 
+
+class AbstractArticleGroup(TemplateSelectStructBlock):
+
+    template = blocks.ChoiceBlock(
+        choices=[
+            ('infinitefeed/sidebar/sidebar_section_block.html', 'default'),
+        ]
+    )
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context)
+        context["link"] = ""
+        context["article_groups"] = []
+        return context
+
+class MidStreamGroupedArticlesTemplates(blocks.ChoiceBlock):
+
+    choices=[
+        ('section/objects/grouped_articles_timeline.html', 'Timeline'),
+    ]
+
+
+class ManualArticleGroup(AbstractArticleGroup):
+    title = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        )
+    description = blocks.RichTextBlock(required=False)
+    link = blocks.URLBlock(required=False)
+    template = MidStreamGroupedArticlesTemplates()
+    highlight_colour = blocks.CharBlock(
+        required=False,
+        default='0071c9',
+        max_length=6,
+        help_text="Only applicable to some templates"
+        )
+    hide_mobile = field_block.BooleanBlock(
+        required=False,
+        help_text="If checked, will hide on small devices",
+        default=False
+        )
+
+    article_groups = blocks.ListBlock(
+        blocks.StructBlock([
+            ('title', blocks.CharBlock()),
+            ('description', blocks.CharBlock()),
+            ('articles', blocks.ListBlock(
+                blocks.StructBlock([
+                    ('alias', blocks.CharBlock(required=False)),
+                    ('article', field_block.PageChooserBlock(page_type='article.ArticlePage', required=False))
+                ])
+            ))
+        ])
+    )
+
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context=parent_context)
+        context['title'] = value['title']
+        context['description'] = value['description']
+        context['link'] = value['link']
+
+        for group_block in value['article_groups']:
+            group = {}
+            group["title"] = group_block["title"]
+            group["description"] = group_block["description"]
+            group["articles"] = [article for article in group_block["articles"]]
+            context['article_groups'].append(group)
+
+        return context
 
 class SidebarArticleGatherer(ArticleGathererBlock):
 

section/models.py

@@ -3,6 +3,7 @@
 
 from article.models import ArticlePage
 from home import blocks as homeblocks
+from article import blocks as article_blocks
 
 from django.core.cache import cache
 from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
@@ -189,6 +190,8 @@ class SectionPage(RoutablePageMixin, SectionablePage):
             ('landing', homeblocks.SpecialLandingPageBlock()),
             ('article_manual', homeblocks.ManualArticles()),
             ('article_gatherer_with_pinned', homeblocks.ArticleGathererWithPinnedBlock()),
+            ('grouped_articles_manual', homeblocks.ManualArticleGroup()),
+            ('header_menu', article_blocks.HeaderMenuBlock()),
         ],
         null=True,
         blank=True,

section/templates/section/objects/grouped_articles_timeline.html

@@ -0,0 +1,46 @@
+{% load humanize %}
+{% load cache %}
+{% load wagtailcore_tags %}
+{% load wagtailimages_tags %}
+{% load video_filters %}
+{% load articletags %}
+
+<div class="landing-stream-block__timeline landing-stream-block_blurb-with-timeline landing_stream_block u-container u-container--large u-container--padded {% if self.hide_mobile %}hide-mobile{% endif %}">
+    <div class="landing_stream_block--header landing_stream_block--header-blurb">
+        <h2>{% if link %}<a href="{{link}}">{{title}}</a>{% else %}{{title}}{%endif%}</h2>
+        {% if description %}
+        {{description|safe}}
+        {% endif %}
+    </div>
+
+    <div class="landing_stream_block--flex-container hide-mobile">
+        <table class="grouped_timeline" style="--timeline-colour: #{{self.highlight_colour}}">
+            <thead><tr>
+                {% for group in article_groups %}
+                <th class="grouped_timeline--group-header">
+                    <div class="grouped_timeline--group-header-date">{{group.title|safe}}</div>
+                    <h3 class="grouped_timeline--group-header-label">{{group.description|safe}}</h3>
+                </th>
+                {% endfor %}
+            </tr></thead>
+            <tbody>
+                <tr>
+                {% for group in article_groups %}
+                <td>
+                <ul>
+                    {% for article in group.articles %}
+                    <li>{% if article.article %}
+                            <a href="{% pageurl article.article %}">{% if article.alias %}{{article.alias}}{% else %}{{article.title}}{% endif %}</a>
+                        {% else %}
+                            {% if article.alias %}{{article.alias}}{% endif %}
+                        {% endif %}
+                    </li>
+                    {% endfor %}
+                </ul>
+                </td>
+                {% endfor %}
+                </tr>
+            </tr>
+        </table>
+    </div>
+</div>

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

@@ -167,12 +167,12 @@ main {
 
 .hide-desktop {
   @media($bp-larger-than-phablet){
-    display: none;
+    display: none !important;
   }
 }
 .hide-mobile {
   @media($bp-smaller-than-phablet){
-    display: none;
+    display: none !important;
   }
 }
 

ubyssey/static_src/src/styles/objects/_timelines.scss

@@ -17,7 +17,7 @@ ul.horizontal-timeline {
     list-style: none;
     padding: 0;
     justify-content: center;
-    li {
+    > li {
         position: relative;
         max-width: 25%;
         padding: 2.5em 2em 0 0;
@@ -61,7 +61,7 @@ ul.horizontal-timeline {
 ul.horizontal-timeline-wrap {
     flex-wrap: wrap;
     justify-content: left;
-    li {
+    > li {
         @media($bp-larger-than-phablet) {
             margin-bottom: 2em;
         }
@@ -177,4 +177,84 @@ ul.vertical-timeline {
             }
         }
     }
+}
+
+.grouped_timeline {
+    margin-block: 1em;
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+
+    td, th {
+        padding-inline: 0.5em;
+        max-width: 300px;
+        min-width: 5em;
+        vertical-align: top;
+    }
+    td:first-child, th:first-child{
+        padding-left: 0;
+        text-align: left;
+    }
+    td:last-child, th:last-child {
+        padding-right: 0;
+        text-align: right;
+    }
+    th.grouped_timeline--group-header {
+        position: relative;
+        padding-bottom: 0.5em;
+        border-bottom: 0.2em solid var(--timeline-colour);
+        vertical-align: bottom;
+        div.grouped_timeline--group-header-date {
+            font-weight: 400;
+            font-size: 0.8em;
+            text-transform: uppercase;
+            color: var(--header_color);
+        }
+        h3.grouped_timeline--group-header-label {
+            margin-top: 0.25em;
+            color: $color-ubyssey-blue;
+            font-weight: 600;
+        }
+        &::after {
+            content: "";
+            background-color: var(--background);
+            width: 0.6em;
+            height: 0.6em;
+            border: 0.2em solid var(--timeline-colour);
+            transition: background-color 0.5s ease;
+            border-radius: 100%;
+            position: absolute;
+            left: 50%;
+            bottom: -0.6em;
+            transform: translateX(-50%);
+        }
+        &:first-child::after {
+            left: 0;
+            transform: none;
+        }
+        &:last-child::after {
+            left: auto;
+            right: 0;
+            transform: none;
+        }
+    }
+    td > ul {
+        padding-left: 1em;
+        list-style: circle;
+        li {
+            margin-bottom: 1em;
+            font-family: $font-headline;
+            font-variation-settings: "wght" 400;
+            font-size: 0.9em;
+            a {
+                text-decoration: underline var(--timeline-colour) 1px;
+            }
+        }
+    }
+
+    td:last-child > ul > li {
+        width: fit-content;
+        margin-left: auto;
+    }
 }