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 {
.tag {
font-size: inherit;
}
.icon-text {
margin-right: $icon-text-spacing * 3;
align-items: center;
.control {
font-size: inherit;
&:not(:last-child) {
margin-right: 1rem !important;
}
&.page-tags {
font-family: $family-code;
.tag:not(:first-child) + .tag {
padding-left: 0;
}
span:not(.icon) + span {
margin-left: $icon-text-spacing;
}
}
}
@ -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 {
background-color: transparent !important;

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

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

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

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

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

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