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

Refactor content details to use tags

Browse source
This commit is contained in:
Jake Howard 2022-06-26 15:13:51 +01:00
parent ed535626b5
commit b2df6aa7d2
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 45 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,26 +4,20 @@ section.content {
}
.content-details {
& > span + span {
margin-left: 0.5rem;
.tag {
font-size: inherit;
}
i {
margin-right: 5px;
}
.control {
font-size: inherit;
.tags {
display: inline-flex;
margin-bottom: 0;
&:not(:last-child) {
margin-right: 0.5rem !important;
}
.tag {
background-color: unset;
font-size: inherit;
margin-bottom: 0;
padding: 0;
& &:not(:last-child) {
margin-right: 0.2rem !important;
&.page-tags {
.tag:not(:first-child) {
padding-right: 0;
}
}
}

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

@ -61,6 +61,7 @@ section.hero {
}
.content-details {
font-size: 90%;
margin-bottom: 0.5rem;
}
}

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

@ -20,8 +20,9 @@
max-height: 175px;
}
.subtitle {
margin-bottom: 0.25rem !important;
.content-details {
font-size: 80%;
margin-top: $subtitle-negative-margin;
}
.media-content .content {

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

@ -1,20 +1,31 @@
{% if page.date %}
<span title="{{ page.date }}"><i class="far fa-calendar-alt"></i>{{ page.date|date:"Y-m-d" }}</span>
{% endif %}
<div class="content-details field is-grouped is-grouped-multiline {{extra_classes}}">
{% if page.reading_time %}
<span title="{{ page.word_count }} words"><i class="far fa-clock"></i>{{ page.reading_time }} minutes</span>
{% endif %}
{% spaceless %}
{% if page.tags.all %}
<span>
<i class="fas fa-tags"></i>
<div class="tags is-family-code">
{% for tag in page.tags.all %}
<span class="tag"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
{% endfor%}
{% 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>
<span>
</div>
{% endif %}
{% endspaceless %}
{% if page.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" title="{{ page.word_count }} words">{{ page.reading_time }} minutes</span>
</div>
</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>
{% for tag in page.tags.all %}
<span class="tag is-white"><a title="{{ tag.name }}">#{{ tag.slug }}</a></span>
{% endfor %}
</div>
</div>
{% endif %}
</div>

5
website/common/templates/common/hero.html
View file

@ -14,9 +14,8 @@
{% if page.subtitle %}
<h2 class="subtitle">{{ page.subtitle }}</h2>
{% endif %}
<h3 class="is-size-6 content-details">
{% include "common/content-details.html" %}
</h3>
{% include "common/content-details.html" %}
</div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
{% if page.table_of_contents %}

2
website/common/templates/common/listing-item.html
View file

@ -12,7 +12,7 @@
<div class="media-content column">
<div>
<h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2>
<h3 class="subtitle is-6 content-details">{% include "common/content-details.html" %}</h3>
{% include "common/content-details.html" %}
{% lorem 1 p %}
</div>
</div>