diff --git a/home/blocks.py b/home/blocks.py index 5322e0b9d..42f30b08b 100644 --- a/home/blocks.py +++ b/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): diff --git a/section/models.py b/section/models.py index 5a3d200f5..64737faf7 100644 --- a/section/models.py +++ b/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, diff --git a/section/templates/section/objects/grouped_articles_timeline.html b/section/templates/section/objects/grouped_articles_timeline.html new file mode 100644 index 000000000..4ddc8bcb8 --- /dev/null +++ b/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 %} + +
+
+

{% if link %}{{title}}{% else %}{{title}}{%endif%}

+ {% if description %} + {{description|safe}} + {% endif %} +
+ +
+ + + {% for group in article_groups %} + + {% endfor %} + + + + {% for group in article_groups %} + + {% endfor %} + + +
+
{{group.title|safe}}
+

{{group.description|safe}}

+
+ +
+
+
\ No newline at end of file diff --git a/ubyssey/static_src/src/styles/modules/_core.scss b/ubyssey/static_src/src/styles/modules/_core.scss index bdf8b7c66..06c86fcbb 100644 --- a/ubyssey/static_src/src/styles/modules/_core.scss +++ b/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; } } diff --git a/ubyssey/static_src/src/styles/objects/_timelines.scss b/ubyssey/static_src/src/styles/objects/_timelines.scss index 2693598bf..61a953d8b 100644 --- a/ubyssey/static_src/src/styles/objects/_timelines.scss +++ b/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; + } } \ No newline at end of file