repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Restyle content details to be icons rather than tags

Browse source 
This looks much nicer, and is simpler to work with
This commit is contained in:
Jake Howard 2022-09-23 08:34:49 +01:00
parent 6c481672c4
commit 4b10ce6f6f
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 32 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
static/src/scss/_content.scss
View file

@ -19,23 +19,12 @@ section.content {
} }
.content-details { .content-details {
.tag { .icon-text {
font-size: inherit; margin-right: $icon-text-spacing * 3;
} align-items: center;
.control { span:not(.icon) + span {
font-size: inherit; margin-left: $icon-text-spacing;
&:not(:last-child) {
margin-right: 1rem !important;
}
&.page-tags {
font-family: $family-code;
.tag:not(:first-child) + .tag {
padding-left: 0;
}
} }
} }
} }
@ -46,17 +35,6 @@ section.content {
} }
} }
.tags.has-addons {
@include dark-mode {
filter: invert(100%);
a {
// HACK: By inverting the colour, the above invert ends up showing the correct colour
color: color.invert($primary);
}
}
}
.gslide-description { .gslide-description {
background-color: transparent !important; background-color: transparent !important;

2
static/src/scss/_hero.scss
View file

@ -102,7 +102,7 @@ section.hero {
} }
.content-details { .content-details {
margin-bottom: 0 !important; margin-bottom: 0.25rem;
} }
} }

9
static/src/scss/_listing.scss
View file

@ -17,9 +17,14 @@
height: 175px; height: 175px;
} }
.title {
margin-bottom: 0;
}
.content-details { .content-details {
font-size: 80%; font-size: 90%;
margin-top: $subtitle-negative-margin; margin-top: 0.25rem;
margin-bottom: 0.25rem;
} }
.media-content .content { .media-content .content {

40
website/common/templates/common/content-details.html
View file

@ -1,35 +1,33 @@
{% load wagtailcore_tags humanize_tags %} {% load wagtailcore_tags humanize_tags %}
<div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}"> <div class="content-details field is-grouped">
{% if page.date %} {% if page.date %}
<div class="control"> <span class="icon-text">
<div class="tags has-addons"> <span class="icon">
<span class="tag is-dark"><i class="far fa-calendar-alt"></i></span> <i class="far fa-lg fa-calendar-alt"></i>
<span class="tag is-light">{{ page.date|date:"Y-m-d" }}</span> </span>
</div> <span>{{ page.date|date:"Y-m-d" }}</span>
</div> </span>
{% endif %} {% endif %}
{% if page.show_reading_time %} {% if page.show_reading_time %}
<div class="control"> <div class="icon-text" {% if page.word_count %}title="{{ page.word_count }} words"{% endif %}>
<div class="tags has-addons"> <span class="icon">
<span class="tag is-dark"><i class="far fa-clock"></i></span> <i class="far fa-lg fa-clock"></i>
<span class="tag is-light" {% if page.word_count %}title="{{ page.word_count }} words"{% endif %}> </span>
{{ page.reading_time|naturaldelta }} <span>{{ page.reading_time|naturaldelta }}</span>
</span>
</div>
</div> </div>
{% endif %} {% endif %}
{% if page.tags.all %} {% if page.tags.all %}
<div class="control page-tags"> <div class="icon-text">
<div class="tags has-addons"> <span class="icon">
<span class="tag is-dark"><i class="fas fa-tags"></i></span> <i class="fas fa-lg fa-tags"></i>
{% for tag in page.tags.all %} </span>
<span class="tag is-white"><a title="{{ tag.name }}" href="{% pageurl tag %}">#{{ tag.slug }}</a></span> {% for tag in page.tags.all %}
{% endfor %} <span><a title="{{ tag.name }}" href="{% pageurl tag %}">#{{ tag.slug }}</a></span>
</div> {% endfor %}
</div> </div>
{% endif %} {% endif %}
</div> </div>