Redesign the display of entry 'metadata', like author and category, to be way more space-efficient - should make tiny statuses less 'heavy'

This commit is contained in:
Danielle McLean 2018-06-28 11:03:31 +10:00
parent 7edc5d0165
commit 5cf566251a
Signed by: 00dani
GPG key ID: 8EB789DDF3ABD240
2 changed files with 38 additions and 43 deletions

View file

@ -1,6 +1,40 @@
{% macro hEntry(entry, indent_width) -%} {% macro hEntry(entry, indent_width) -%}
{%- set i = ' ' * indent_width -%} {%- set i = ' ' * indent_width -%}
<article class="card h-entry"> <article class="h-entry media">
{{i}}<aside class="info">
{{i}}<a class="p-author h-card" href="{{ entry.author.url }}">
{{i}}<img class="u-photo img-fluid" src="{{ entry.author.avatar.url }}" alt="{{ entry.author.name }}" />
{{i}}<span class="p-name sr-only">{{ entry.author.name }}</span>
{{i}}</a>
{{i}}<a class="u-uid u-url" href="{{ entry.url }}">
{{i}}<time class="dt-published" datetime="{{ entry.published.isoformat() }}">
{{i}}<i class="fas fa-calendar" aria-hidden="true"></i>
{{i}}{{ entry.published | naturaltime }}
{{i}}</time>
{{i}}</a>
{{i}}<time class="dt-updated" datetime="{{ entry.updated.isoformat() }}"{% if (entry.updated | naturaltime) == (entry.published | naturaltime) %} hidden{% endif %}>
{{i}}<i class="fas fa-pencil-alt" aria-hidden="true"></i>
{{i}}{{ entry.updated | naturaltime }}
{{i}}</time>
{{i}}<a class="u-url" href="{{ entry.short_url }}">
{{i}}<i class="fas fa-link" aria-hidden="true"></i>
{{i}}{{ entry.short_url | friendly_url }}
{{i}}</a>
{% for c in entry.cats.all() %}
{{i}}<a class="p-category" href="{{ c.url }}">
{{i}}<i class="fas fa-paw" aria-hidden="true"></i>
{{i}}{{ c.name }}
{{i}}</a>
{% endfor %}
{% for s in entry.syndications.all() %}
{{i}}<a class="u-syndication" href="{{ s.url }}">
{{i}}<i class="{{ s.profile.site.icon }}" aria-hidden="true"></i>
{{i}}{{ s.profile }}
{{i}}</a>
{% endfor %}
{{i}}</aside>
{{i}}<div class="card">
{% if entry.photo %} {% if entry.photo %}
{{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" /> {{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" />
@ -13,52 +47,8 @@
{{i}}{{ entry.content | markdown }} {{i}}{{ entry.content | markdown }}
{{i}}</div> {{i}}</div>
{{i}}</div> {{i}}</div>
{{i}}<div class="card-footer">
{{i}}<a class="p-author h-card" href="{{ entry.author.url }}">
{{i}}<img class="u-photo" src="{{ entry.author.avatar.url }}" />
{{i}}{{ entry.author.name }}
{{i}}</a>
{{i}}<a class="u-uid u-url" href="{{ entry.url }}">
{{i}}<time class="dt-published" datetime="{{ entry.published.isoformat() }}">
{{i}}<i class="fas fa-calendar" aria-hidden="true"></i>
{{i}}{{ entry.published | naturaltime }}
{{i}}</time>
{{i}}</a>
{% if entry.updated != entry.published %}
{{i}}<time class="dt-updated" datetime="{{ entry.updated.isoformat() }}">
{{i}}<i class="fas fa-pencil-alt" aria-hidden="true"></i>
{{i}}{{ entry.updated | naturaltime }}
{{i}}</time>
{% endif %}
{{i}}<a class="u-url" href="{{ entry.short_url }}">
{{i}}<i class="fas fa-link" aria-hidden="true"></i>
{{i}}{{ entry.short_url | friendly_url }}
{{i}}</a>
{{i}}</div> {{i}}</div>
{% if entry.cats.exists() %}
{{i}}<div class="card-footer">
{% for c in entry.cats.all() %}
{{i}}<a class="p-category" href="{{ c.url }}">
{{i}}<i class="fas fa-paw" aria-hidden="true"></i>
{{i}}{{ c.name }}
{{i}}</a>
{% endfor %}
{{i}}</div>
{% endif %}
{% if entry.syndications.exists() %}
{{i}}<div class="card-footer">
{% for s in entry.syndications.all() %}
{{i}}<a class="u-syndication" href="{{ s.url }}">
{{i}}<i class="{{ s.profile.site.icon }}" aria-hidden="true"></i>
{{i}}{{ s.profile }}
{{i}}</a>
{% endfor %}
{{i}}</div>
{% endif %}
{{i}}<script class="p-json-ld" type="application/ld+json">{{ entry.json_ld | tojson }}</script> {{i}}<script class="p-json-ld" type="application/ld+json">{{ entry.json_ld | tojson }}</script>
{{i}}</article> {{i}}</article>
{%- endmacro %} {%- endmacro %}

View file

@ -10,7 +10,23 @@ ol.entries, div.entry
&:last-child &:last-child
margin-bottom 0 margin-bottom 0
.card.h-entry .h-entry.media
> aside.info
display flex
flex-direction column
align-items center
font-size 0.8rem
margin-right 1rem
a.p-author
text-align center
img.u-photo
border-radius .25rem
height 3em
> *
margin-bottom .25rem
> .card
flex 1
.e-content .e-content
ul ul
list-style-type disc list-style-type disc
@ -26,14 +42,3 @@ ol.entries, div.entry
max-width 100% max-width 100%
> :last-child > :last-child
margin-bottom 0 margin-bottom 0
.card-footer
text-align center
> *
display inline-block
margin-right 1rem
&:last-child
margin-right 0
.h-card > img
height 1em
vertical-align baseline