diff --git a/article/templates/article/objects/blog_column-latest.html b/article/templates/article/objects/blog_column-latest.html new file mode 100644 index 000000000..98f38a09a --- /dev/null +++ b/article/templates/article/objects/blog_column-latest.html @@ -0,0 +1,33 @@ +{% load articletags %} + +{% comment %} +This template is for the columns for the blog section on the home page under the digital prints section +{% endcomment %} + + +{% load cache %} +{% load humanize %} +{% load wagtailcore_tags %} +{% load wagtailimages_tags %} +{% load video_filters %} +
+
+ {% if article.featured_media.first %} + {% if article.featured_media.first.image %} + + {% image article.featured_media.first.image fill-250x250-c100 %} + + {% elif article.featured_media.first.video %} + + {% endif %} + {% endif %} +
+
+

+ {{article.get_parent.title}} +

+

+ {{ article.title|safe }} +

+
+
\ No newline at end of file diff --git a/article/templates/article/objects/blog_column.html b/article/templates/article/objects/blog_column.html index c8ddbf9d5..a0a8ae73e 100644 --- a/article/templates/article/objects/blog_column.html +++ b/article/templates/article/objects/blog_column.html @@ -11,20 +11,20 @@ {% load wagtailimages_tags %} {% load video_filters %}
-
-
- {% if article.featured_media.first %} - {% if article.featured_media.first.image %} - - {% image article.featured_media.first.image fill-250x250-c100 %} - - {% elif article.featured_media.first.video %} - - {% endif %} +
+ {% if article.featured_media.first %} + {% if article.featured_media.first.image %} + + {% image article.featured_media.first.image fill-250x250-c100 %} + + {% elif article.featured_media.first.video %} + {% endif %} -

- {{ article.title|safe }} -

-
+ {% endif %} +
+
+

+ {{ article.title|safe }} +

\ No newline at end of file diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html index 15432b705..8c0e7acf5 100644 --- a/home/templates/home/home_page.html +++ b/home/templates/home/home_page.html @@ -47,7 +47,7 @@

BREAKING: {{ article.title|safe }}

{% include "article/objects/cover_story.html" with article=coverstory%} {% endif %}
- {% now "d N, Y" as date %} + {% 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 %} diff --git a/infinitefeed/blocks.py b/infinitefeed/blocks.py index d744ba9fd..e6f9b1d76 100644 --- a/infinitefeed/blocks.py +++ b/infinitefeed/blocks.py @@ -70,7 +70,7 @@ def get_context(self, value, parent_context=None): context['articles'] = ArticlePage.objects.live().public().filter(~(Q(current_section='guide'))).order_by('-explicit_published_at')[:5] return context class Meta: - template = "infinitefeed/sidebar/sidebar_section_block.html" + template = "infinitefeed/sidebar/sidebar_latest_block.html" class SidebarManualArticles(blocks.StructBlock): title = blocks.CharBlock( diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html new file mode 100644 index 000000000..d6f5b5868 --- /dev/null +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html @@ -0,0 +1,12 @@ +{% load articletags %} + +
+ {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Last updated:' textBold=articles.0.explicit_published_at|display_pubdate %} + +
\ No newline at end of file diff --git a/section/templates/section/objects/section_featured.html b/section/templates/section/objects/section_featured.html index ebe357801..72af6150b 100644 --- a/section/templates/section/objects/section_featured.html +++ b/section/templates/section/objects/section_featured.html @@ -14,7 +14,7 @@ {% endfor %}
-
+

See More

diff --git a/ubyssey/static_src/src/styles/components/_infinitefeed.scss b/ubyssey/static_src/src/styles/components/_infinitefeed.scss index a46851a55..1ca2f987f 100644 --- a/ubyssey/static_src/src/styles/components/_infinitefeed.scss +++ b/ubyssey/static_src/src/styles/components/_infinitefeed.scss @@ -29,9 +29,13 @@ margin-bottom: 65px; } +.sidebar-block > .boxLabel { + font-size: 1.1em; +} + .c-sidebar { height: 100%; - width:40%; + width:38%; padding-left: 1em; @media ($bp-smaller-than-phablet) { @@ -60,12 +64,11 @@ } .c-home-infinitefeed { - padding-left: 20px; - padding-right: 20px; width: 100%; @media ($bp-larger-than-phablet) { margin-right: 20px; width: 50%; + padding-right: 20px; } } diff --git a/ubyssey/static_src/src/styles/modules/_homepage.scss b/ubyssey/static_src/src/styles/modules/_homepage.scss index 193afb91a..98d200a30 100644 --- a/ubyssey/static_src/src/styles/modules/_homepage.scss +++ b/ubyssey/static_src/src/styles/modules/_homepage.scss @@ -695,7 +695,6 @@ ol.article-list { .boxText { margin: 0; font-size: 1em; - text-transform: capitalize; position: relative; top: 50%; transform: translate(0,-50%); @@ -723,6 +722,10 @@ ol.article-list { filter: drop-shadow(0 5px 6px #00000040); } } + + .boxLabel-highlight .boxLabel-right { + background-color: $color-ubyssey-blue-light; + } } .darkmode { @@ -815,6 +818,9 @@ ol.article-list { &.lightmode { background-color: $color-ubyssey-blue-light; } + + padding-left: 20px; + padding-right: 20px; } .home_infinitefeed_cutoff_shadow { diff --git a/ubyssey/static_src/src/styles/objects/_article.scss b/ubyssey/static_src/src/styles/objects/_article.scss index c1a211ff7..84802678c 100644 --- a/ubyssey/static_src/src/styles/objects/_article.scss +++ b/ubyssey/static_src/src/styles/objects/_article.scss @@ -96,7 +96,8 @@ color: white; font-weight: 600; &:hover { - color: black; + color: white; + background-color: $color-ubyssey-blue-dark !important; } } @@ -563,51 +564,96 @@ .o-article--column { margin-bottom: 1rem; - background-color: #1771c5; + background-color: $color-ubyssey-blue-light; position: relative; left:0; transition-duration: 0.2s; + display: flex; &:hover { left: -10px; } - .o-article__image { - // Structure - width: 4.5rem; - height: 4.5rem; - margin-right: 0.65rem; - // Background - background-position: center; - background-size: cover; - } + .o-article__meta__image { + background-color: black; + margin-right: 0.65rem; - .o-article__headline { - // Structure - flex: 1; - color: #ffffff; - margin: auto; - margin-right: 0.5em; - // Text - font-size: font-size(22); + .o-article__image { + // Structure + display: flex; + width: 4.5rem; + height: 100%; + + // Background + background-position: center; + background-size: cover; - a:hover { - color: #eeeeee; + img { + margin: auto; + } } } - .o-article__meta__image { - // Structure + .o-article__meta { display: flex; - margin-bottom: 0.65rem; + margin-bottom: 0; + + .o-article__headline { + // Structure + font-size: font-size(18); + line-height: 1.2em; + flex: 1; + color: #ffffff; + margin: auto; + margin-right: 0.5em; + + a:hover { + color: #eeeeee; + } + } } +} - .o-article__meta__image .o-article__headline { +.o-article--column-latest { - // Text - font-size: font-size(18); - line-height: 1.2em; + .o-article__meta__image .o-article__image { + width: 5em; } + .o-article__meta { + display: flex; + flex-direction: column; + + + .o-article__section { + margin-top: 0.5em; + margin-bottom: 0.25em; + font-size: 0.65em; + text-transform: uppercase; + width: fit-content; + padding-left: 0.2em; + padding-right: 0.2em; + background-color: $color-ubyssey-blue; + color: white; + + &:hover { + background-color: $color-ubyssey-blue-dark !important; + } + + a:hover { + color: white; + } + } + + .o-article__headline { + margin-top: 0; + line-height: 1.3em; + color: black; + + a:hover { + color: #555555; + } + } + } }