From 7bd5ebd45918abebdee27dfe3b47b57b9557bb36 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Fri, 16 Aug 2024 03:44:21 +0000 Subject: [PATCH 1/3] Create guide 2024 template --- article/models.py | 3 + .../article/article_page_guide_2024.html | 137 ++++++++++++++++++ ubyssey/static_src/src/styles/guide-2024.scss | 42 ++++++ .../styles/modules/guide/2024/_article.scss | 3 + 4 files changed, 185 insertions(+) create mode 100644 article/templates/article/article_page_guide_2024.html create mode 100644 ubyssey/static_src/src/styles/guide-2024.scss create mode 100644 ubyssey/static_src/src/styles/modules/guide/2024/_article.scss diff --git a/article/models.py b/article/models.py index 815048a86..54e1843f4 100644 --- a/article/models.py +++ b/article/models.py @@ -732,6 +732,8 @@ def get_template(self, request): return "article/article_page_magazine_2024.html" elif self.layout == 'spoof-2024': return "article/article_page_spoof_2024.html" + elif self.layout == 'guide-2024': + return "article/article_page_guide_2024.html" return "article/article_page.html" @@ -861,6 +863,7 @@ def get_template(self, request): ('guide-2023', 'Guide (2023 style)'), ('magazine-2024', 'Magazine (2024 style)'), ('spoof-2024', 'Spoof (2024 style)'), + ('guide-2024', 'Guide (2024 style)'), ], ), ), diff --git a/article/templates/article/article_page_guide_2024.html b/article/templates/article/article_page_guide_2024.html new file mode 100644 index 000000000..7eefc53d5 --- /dev/null +++ b/article/templates/article/article_page_guide_2024.html @@ -0,0 +1,137 @@ +{% extends 'ubyssey/base.html' %} + +{% comment %} {% extends 'specialfeaturelanding/guide/base.html' %} {% endcomment %} +{% load static %} +{% load wagtailcore_tags %} +{% load wagtailimages_tags %} +{% load wagtailuserbar %} +{% load ubyssey_ad_filters %} +{% load ubyssey_ad_tags %} +{% load menu_tags %} + +{% block stylesheet %} + +{% endblock %} + +{% block head_scripts %} + + + + + + + + +{% for orderable in settings.ads.AdTagSettings.article_head_tags.all %} + {% gpt_define_tag orderable.ad_slot is_mobile %} +{% endfor %} +{% endblock %} + +{% block header %} + {% comment %} {% flat_menu 'guide2021' template="navigation/headers/guide/2021/header.html" show_menu_heading=False fall_back_to_default_site_menus=True %} {% endcomment %} + {% if page.menu %} + + {% flat_menu page.menu.handle template="navigation/bootstrap/topbar_with_dropdowns.html" show_menu_heading=False fall_back_to_default_site_menus=True %} + {% elif create_menu_from_parent %} + + {% children_menu parent_page_for_menu_generation template="navigation/bootstrap/topbar_with_dropdowns.html" show_menu_heading=False fall_back_to_default_site_menus=True %} + {% endif %} +{% endblock %} + +{% block pre_main_content %} +{% endblock %} + +{% block content %} +
+ + {% block banner_ad %} +
+ + {% for orderable in settings.ads.AdTagSettings.article_header_placements.all %} + {% gpt_placement_tag orderable.ad_slot %} + {% endfor %} +
+ {% endblock %} + + {% with self.featured_media.first as featured_image_object %} + {% image featured_image_object.image original as featured_image %} +
+
+ {% comment %}
+

{{ self.title }}

+
+
+ {% if featured_image_object.credit %} + {{ featured_image_object.credit }} + {% endif %} +
{% endcomment %} +
+
+
+
+

+ {% if self.fw_alternate_title %} + {{self.fw_alternate_title|safe}} + {% else %} + {{ self.title|safe }} + {% endif %} +

+ {% comment %}
+ {% if featured_image_object.credit %} + {{ featured_image_object.credit }} + {% endif %} +
{% endcomment %} +
+ {% comment %} {% endcomment %} + {% for block in self.content %} + {% include_block block with id=block.id %} + {% endfor %} +
+
+
+ {% image prev.featured_media.first.image original as prev_image %} + {% include 'article/objects/guide/article-box2023.html' with style='article' title=prev.title page=prev image=prev_image.url prevornext='prev' %} + {% image next.featured_media.first.image original as next_image %} + {% include 'article/objects/guide/article-box2023.html' with style='article' title=next.title page=next image=next_image.url prevornext='next' %} +
+
+ {% endwith %} +
+ +{% endblock %} + +{% block post_main_content %} +{% wagtailuserbar %} +{% endblock %} + + +{% block footer %} + +{% endblock %} + +{% block scripts %} + +{% endblock %} \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/guide-2024.scss b/ubyssey/static_src/src/styles/guide-2024.scss new file mode 100644 index 000000000..bff1bb924 --- /dev/null +++ b/ubyssey/static_src/src/styles/guide-2024.scss @@ -0,0 +1,42 @@ +@import 'modules/reset'; +@import 'modules/_variables.scss'; + +@import 'modules/article/embeds'; +@import 'modules/advertisements'; + +@import 'modules/guide/2020/fonts'; +@import 'modules/guide/2020/colors'; +@import 'modules/guide/2023/fonts'; + +@import 'modules/guide/2020/base'; +@import 'modules/guide/2020/objects'; +@import 'modules/guide/2020/banner'; +@import 'modules/guide/2020/footer'; + +@import 'modules/guide/2020/header'; +// Pages +@import 'modules/guide/2020/homepage'; +@import 'modules/guide/2020/article'; +@import 'modules/guide/2020/section'; + +@import 'modules/guide/2022/objects'; + +@import 'modules/guide/2022/banner'; + +@import 'modules/guide/2022/footer'; +@import 'modules/guide/2023/footer'; + +@import 'modules/guide/2022/header'; +@import 'modules/guide/2023/article-box'; + + +@import 'modules/guide/2022/homepage'; +@import 'modules/guide/2022/article'; +@import 'modules/guide/2023/article'; +@import 'modules/guide/2024/article'; +@import 'modules/guide/2022/section'; + +@import 'modules/guide/2023/nav'; +@import 'modules/guide/2023/advertisements'; + + diff --git a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss new file mode 100644 index 000000000..6b5ba3b62 --- /dev/null +++ b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss @@ -0,0 +1,3 @@ +.c-article__title { + margin: 5% 0 4%; +} \ No newline at end of file From 6a2b5cf8bd289bec2de05c0d8b9c18c591464174 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Fri, 16 Aug 2024 18:35:08 +0000 Subject: [PATCH 2/3] start styling for guide 2024 --- .../article/article_page_guide_2024.html | 40 +++++++++---------- ubyssey/static_src/src/styles/guide-2024.scss | 4 +- .../styles/modules/guide/2024/_article.scss | 9 +++++ 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/article/templates/article/article_page_guide_2024.html b/article/templates/article/article_page_guide_2024.html index 7eefc53d5..c248e749d 100644 --- a/article/templates/article/article_page_guide_2024.html +++ b/article/templates/article/article_page_guide_2024.html @@ -70,28 +70,28 @@
-
-

- {% if self.fw_alternate_title %} - {{self.fw_alternate_title|safe}} - {% else %} - {{ self.title|safe }} - {% endif %} -

- {% comment %}
- {% if featured_image_object.credit %} - {{ featured_image_object.credit }} - {% endif %} + +

+ {% if self.fw_alternate_title %} + {{self.fw_alternate_title|safe}} + {% else %} + {{ self.title|safe }} + {% endif %} +

+ {% comment %}
+ {% if featured_image_object.credit %} + {{ featured_image_object.credit }} + {% endif %} +
{% endcomment %} +
+ {% comment %} {% endcomment %} -
- {% comment %} {% endcomment %} - {% for block in self.content %} - {% include_block block with id=block.id %} - {% endfor %} -
+ {% for block in self.content %} + {% include_block block with id=block.id %} + {% endfor %}
+
{% image prev.featured_media.first.image original as prev_image %} {% include 'article/objects/guide/article-box2023.html' with style='article' title=prev.title page=prev image=prev_image.url prevornext='prev' %} diff --git a/ubyssey/static_src/src/styles/guide-2024.scss b/ubyssey/static_src/src/styles/guide-2024.scss index bff1bb924..f5e5939bf 100644 --- a/ubyssey/static_src/src/styles/guide-2024.scss +++ b/ubyssey/static_src/src/styles/guide-2024.scss @@ -33,10 +33,12 @@ @import 'modules/guide/2022/homepage'; @import 'modules/guide/2022/article'; @import 'modules/guide/2023/article'; -@import 'modules/guide/2024/article'; + @import 'modules/guide/2022/section'; @import 'modules/guide/2023/nav'; @import 'modules/guide/2023/advertisements'; +@import 'modules/article/visual_essay'; +@import 'modules/guide/2024/article'; \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss index 6b5ba3b62..86d4908d8 100644 --- a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss +++ b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss @@ -1,3 +1,12 @@ .c-article__title { margin: 5% 0 4%; +} + +.c-article__content { + h2 { + font-size: 2em; + } + .guide-section { + margin-bottom: 5em; + } } \ No newline at end of file From b632e8ac013b61372d2c568a2b187daa4e682eb5 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Thu, 22 Aug 2024 21:18:46 +0000 Subject: [PATCH 3/3] Styling visual essay and other things for guide 2024 --- .../objects/guide/article-box2023.html | 4 +- .../article/stream_blocks/pageLink.html | 2 +- .../modules/guide/2023/_article-box.scss | 4 +- .../styles/modules/guide/2024/_article.scss | 71 ++++++++++++++++++- .../src/styles/objects/_article.scss | 3 +- 5 files changed, 77 insertions(+), 7 deletions(-) diff --git a/article/templates/article/objects/guide/article-box2023.html b/article/templates/article/objects/guide/article-box2023.html index 782fbcfbd..13a74d9c2 100644 --- a/article/templates/article/objects/guide/article-box2023.html +++ b/article/templates/article/objects/guide/article-box2023.html @@ -7,7 +7,7 @@

{{title}}

- + {% elif prevornext == 'next' %} @@ -17,7 +17,7 @@

{{title}}

- + {% endif %} diff --git a/article/templates/article/stream_blocks/pageLink.html b/article/templates/article/stream_blocks/pageLink.html index 0fbb9e148..20533338b 100644 --- a/article/templates/article/stream_blocks/pageLink.html +++ b/article/templates/article/stream_blocks/pageLink.html @@ -5,7 +5,7 @@ {% for item in self.list %}
  • diff --git a/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss b/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss index 81e3f5b47..009362e76 100644 --- a/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss +++ b/ubyssey/static_src/src/styles/modules/guide/2023/_article-box.scss @@ -76,10 +76,10 @@ opacity: 0; transition: 0.5s; } - .fa-circle-arrow-left { + [name="arrow-back-circle-outline"] { left: -1.5em; } - .fa-circle-arrow-right { + [name="arrow-forward-circle-outline"] { right: -1.5em; } diff --git a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss index 86d4908d8..e4c5bb439 100644 --- a/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss +++ b/ubyssey/static_src/src/styles/modules/guide/2024/_article.scss @@ -1,5 +1,6 @@ .c-article__title { - margin: 5% 0 4%; + margin: 1em auto; + text-align: center; } .c-article__content { @@ -9,4 +10,72 @@ .guide-section { margin-bottom: 5em; } + + .header { + margin: 2em auto; + max-width: 400px; + h2 { + text-align: center; + } + } + + .header-menu ul { + margin: auto auto 5em auto; + text-align: center; + padding: 0; + + .menu-title a { + color: black; + line-height: 2em; + } + } + h2, p { + margin-bottom: 0; + margin-inline: auto; + text-align: center; + } + .o-visual-essay__right-div { + p { + margin: 0.5em 0; + text-align: left; + } + h2 { + text-align: left; + } + .header { + margin: 1em; + } + } +} + +.o-visual-essay__right-container { + margin-top: -100px; +} + +nav.navbar { + position: static; +} + +#myBtn { + display: none; + position: fixed; + left: 1em; + bottom: 1em; + z-index: 10; +} +@media($bp-larger-than-phablet) { + #myBtn { + display: block; + } + .vs-over-image .o-visual-essay__right-div { + width: 50vw; + margin-top: 5em; + } + .vs-side-by-side .o-visual-essay__right-container { + max-width: 500px; + } +} + +.o-visual-essay__right-div { + max-width: 600px; } \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/objects/_article.scss b/ubyssey/static_src/src/styles/objects/_article.scss index 7f451cf06..710f34a1e 100644 --- a/ubyssey/static_src/src/styles/objects/_article.scss +++ b/ubyssey/static_src/src/styles/objects/_article.scss @@ -367,6 +367,7 @@ ul.article-list, ol.article-list { margin: .25rem !important; padding: .25rem .5rem; color: white; + background-color: var(--linkColour); transition: .2s; cursor: default; @@ -381,7 +382,7 @@ ul.article-list, ol.article-list { .header { padding: 0.75rem !important; font-weight: 600; - background-color: #0071c9; + background-color: var(--linkColour); >h2 { margin: 0;