Skip to content

Commit 8f58f53

Browse files
SamuelmdLowSamuelmdLow
authored
Merge pull request #1311 from ubyssey/redesign-latest
Redesign "latest articles" sidebar block
2 parents 0b34ab8 + 7ed5d1a commit 8f58f53

File tree

9 files changed

+149
-49
lines changed

9 files changed

+149
-49
lines changed

‎article/templates/article/objects/blog_column-latest.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{% load articletags %}
2+
3+
{% comment %}
4+
This template is for the columns for the blog section on the home page under the digital prints section
5+
{% endcomment %}
6+
7+
8+
{% load cache %}
9+
{% load humanize %}
10+
{% load wagtailcore_tags %}
11+
{% load wagtailimages_tags %}
12+
{% load video_filters %}
13+
<article class="o-article o-article--column o-article--column-latest{% if padded %} o-article--padded{% endif %}">
14+
<div class="o-article__meta__image">
15+
{% if article.featured_media.first %}
16+
{% if article.featured_media.first.image %}
17+
<a class="o-article__image" href="{% pageurl article %}">
18+
{% image article.featured_media.first.image fill-250x250-c100 %}
19+
</a>
20+
{% elif article.featured_media.first.video %}
21+
<a class="o-article__image" href="{% pageurl article %}" style="background-image: url('http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg'); background-size: contain; background-repeat: no-repeat"></a>
22+
{% endif %}
23+
{% endif %}
24+
</div>
25+
<div class="o-article__meta">
26+
<h4 class="o-article__section" style="background-color: {{article|get_colour}}">
27+
<a href="{{article.get_parent.url}}">{{article.get_parent.title}}</a>
28+
</h4>
29+
<h3 class="o-article__headline">
30+
<a href="{% pageurl article %}">{{ article.title|safe }}</a>
31+
</h3>
32+
</div>
33+
</article>

‎article/templates/article/objects/blog_column.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
{% load wagtailimages_tags %}
1212
{% load video_filters %}
1313
<article class="o-article o-article--column{% if padded %} o-article--padded{% endif %}" style="background-color: {{article|get_colour}}">
14-
<div class="o-article__meta">
15-
<div class="o-article__meta__image">
16-
{% if article.featured_media.first %}
17-
{% if article.featured_media.first.image %}
18-
<a class="o-article__image" href="{% pageurl article %}">
19-
{% image article.featured_media.first.image fill-250x250-c100 %}
20-
</a>
21-
{% elif article.featured_media.first.video %}
22-
<a class="o-article__image" href="{% pageurl article %}" style="background-image: url('http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg'); background-size: contain; background-repeat: no-repeat"></a>
23-
{% endif %}
14+
<div class="o-article__meta__image">
15+
{% if article.featured_media.first %}
16+
{% if article.featured_media.first.image %}
17+
<a class="o-article__image" href="{% pageurl article %}">
18+
{% image article.featured_media.first.image fill-250x250-c100 %}
19+
</a>
20+
{% elif article.featured_media.first.video %}
21+
<a class="o-article__image" href="{% pageurl article %}" style="background-image: url('http://img.youtube.com/vi/{{ article.featured_media.first.video.url|youtube_embed_id|safe }}/0.jpg'); background-size: contain; background-repeat: no-repeat"></a>
2422
{% endif %}
25-
<h3 class="o-article__headline">
26-
<a href="{% pageurl article %}">{{ article.title|safe }}</a>
27-
</h3>
28-
</div>
23+
{% endif %}
24+
</div>
25+
<div class="o-article__meta">
26+
<h3 class="o-article__headline">
27+
<a href="{% pageurl article %}">{{ article.title|safe }}</a>
28+
</h3>
2929
</div>
3030
</article>

‎home/templates/home/home_page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h3>BREAKING: {{ article.title|safe }}</h3>
4747
{% include "article/objects/cover_story.html" with article=coverstory%}
4848
{% endif %}
4949
<div class="home-top-article-list">
50-
{% now "d N, Y" as date %}
50+
{% now "d N Y" as date %}
5151
{% now "l" as dayOfWeek %}
5252
{% include 'home/objects/home_heading-box.html' with styling='lightmode' title="Top Stories" text=date textBold=dayOfWeek %}
5353

‎infinitefeed/blocks.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ def get_context(self, value, parent_context=None):
7070
context['articles'] = ArticlePage.objects.live().public().filter(~(Q(current_section='guide'))).order_by('-explicit_published_at')[:5]
7171
return context
7272
class Meta:
73-
template = "infinitefeed/sidebar/sidebar_section_block.html"
73+
template = "infinitefeed/sidebar/sidebar_latest_block.html"
7474

7575
class SidebarManualArticles(blocks.StructBlock):
7676
title = blocks.CharBlock(

‎infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{% load articletags %}
2+
3+
<div class="article-list blog sidebar-block">
4+
{% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Last updated:' textBold=articles.0.explicit_published_at|display_pubdate %}
5+
<ul class="article-list">
6+
{% for article in articles %}
7+
<li>
8+
{% include 'article/objects/blog_column-latest.html' with sameColour=True article=article %}
9+
</li>
10+
{% endfor %}
11+
</ul>
12+
</div>

‎section/templates/section/objects/section_featured.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{% endfor %}
1515

1616
<div class="o-article o-article--column" style="background-color: {{section.colour}};width: fit-content;">
17-
<div class="o-article__meta__image">
17+
<div class="o-article__meta">
1818
<h3 class="o-article__headline" style="padding: 0.3em;">
1919
<a href="{% pageurl section %}" style="margin: 0.5em;">See More</a>
2020
</h3>

‎ubyssey/static_src/src/styles/components/_infinitefeed.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,13 @@
2929
margin-bottom: 65px;
3030
}
3131

32+
.sidebar-block > .boxLabel {
33+
font-size: 1.1em;
34+
}
35+
3236
.c-sidebar {
3337
height: 100%;
34-
width:40%;
38+
width:38%;
3539
padding-left: 1em;
3640

3741
@media ($bp-smaller-than-phablet) {
@@ -60,12 +64,11 @@
6064
}
6165

6266
.c-home-infinitefeed {
63-
padding-left: 20px;
64-
padding-right: 20px;
6567
width: 100%;
6668
@media ($bp-larger-than-phablet) {
6769
margin-right: 20px;
6870
width: 50%;
71+
padding-right: 20px;
6972
}
7073
}
7174

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -695,7 +695,6 @@ ol.article-list {
695695
.boxText {
696696
margin: 0;
697697
font-size: 1em;
698-
text-transform: capitalize;
699698
position: relative;
700699
top: 50%;
701700
transform: translate(0,-50%);
@@ -723,6 +722,10 @@ ol.article-list {
723722
filter: drop-shadow(0 5px 6px #00000040);
724723
}
725724
}
725+
726+
.boxLabel-highlight .boxLabel-right {
727+
background-color: $color-ubyssey-blue-light;
728+
}
726729
}
727730

728731
.darkmode {
@@ -815,6 +818,9 @@ ol.article-list {
815818
&.lightmode {
816819
background-color: $color-ubyssey-blue-light;
817820
}
821+
822+
padding-left: 20px;
823+
padding-right: 20px;
818824
}
819825

820826
.home_infinitefeed_cutoff_shadow {

‎ubyssey/static_src/src/styles/objects/_article.scss

Lines changed: 74 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@
9696
color: white;
9797
font-weight: 600;
9898
&:hover {
99-
color: black;
99+
color: white;
100+
background-color: $color-ubyssey-blue-dark !important;
100101
}
101102
}
102103

@@ -563,51 +564,96 @@
563564

564565
.o-article--column {
565566
margin-bottom: 1rem;
566-
background-color: #1771c5;
567+
background-color: $color-ubyssey-blue-light;
567568
position: relative;
568569
left:0;
569570
transition-duration: 0.2s;
571+
display: flex;
570572
&:hover {
571573
left: -10px;
572574
}
573-
.o-article__image {
574-
// Structure
575-
width: 4.5rem;
576-
height: 4.5rem;
577-
margin-right: 0.65rem;
578575

579-
// Background
580-
background-position: center;
581-
background-size: cover;
582-
}
576+
.o-article__meta__image {
577+
background-color: black;
578+
margin-right: 0.65rem;
583579

584-
.o-article__headline {
585-
// Structure
586-
flex: 1;
587-
color: #ffffff;
588-
margin: auto;
589-
margin-right: 0.5em;
590-
// Text
591-
font-size: font-size(22);
580+
.o-article__image {
581+
// Structure
582+
display: flex;
583+
width: 4.5rem;
584+
height: 100%;
585+
586+
// Background
587+
background-position: center;
588+
background-size: cover;
592589

593-
a:hover {
594-
color: #eeeeee;
590+
img {
591+
margin: auto;
592+
}
595593
}
596594
}
597595

598-
.o-article__meta__image {
599-
// Structure
596+
.o-article__meta {
600597
display: flex;
601-
margin-bottom: 0.65rem;
598+
margin-bottom: 0;
599+
600+
.o-article__headline {
601+
// Structure
602+
font-size: font-size(18);
603+
line-height: 1.2em;
604+
flex: 1;
605+
color: #ffffff;
606+
margin: auto;
607+
margin-right: 0.5em;
608+
609+
a:hover {
610+
color: #eeeeee;
611+
}
612+
}
602613
}
614+
}
603615

604-
.o-article__meta__image .o-article__headline {
616+
.o-article--column-latest {
605617

606-
// Text
607-
font-size: font-size(18);
608-
line-height: 1.2em;
618+
.o-article__meta__image .o-article__image {
619+
width: 5em;
609620
}
610621

622+
.o-article__meta {
623+
display: flex;
624+
flex-direction: column;
625+
626+
627+
.o-article__section {
628+
margin-top: 0.5em;
629+
margin-bottom: 0.25em;
630+
font-size: 0.65em;
631+
text-transform: uppercase;
632+
width: fit-content;
633+
padding-left: 0.2em;
634+
padding-right: 0.2em;
635+
background-color: $color-ubyssey-blue;
636+
color: white;
637+
638+
&:hover {
639+
background-color: $color-ubyssey-blue-dark !important;
640+
}
641+
642+
a:hover {
643+
color: white;
644+
}
645+
}
646+
647+
.o-article__headline {
648+
margin-top: 0;
649+
line-height: 1.3em;
650+
color: black;
651+
652+
a:hover {
653+
color: #555555;
654+
}
655+
}
656+
}
611657
}
612658

613659

0 commit comments

Comments
 (0)