From 5cf566251ae267eebce5b375c1d58fff14a7e5aa Mon Sep 17 00:00:00 2001
From: Danielle McLean <dani@00dani.me>
Date: Thu, 28 Jun 2018 11:03:31 +1000
Subject: [PATCH] Redesign the display of entry 'metadata', like author and
 category, to be way more space-efficient - should make tiny statuses less
 'heavy'

---
 entries/jinja2/entries/h-entry.html     | 52 ++++++++++---------------
 entries/static/entries/css/h-entry.styl | 29 ++++++++------
 2 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/entries/jinja2/entries/h-entry.html b/entries/jinja2/entries/h-entry.html
index b9a05f6..6d55eb2 100644
--- a/entries/jinja2/entries/h-entry.html
+++ b/entries/jinja2/entries/h-entry.html
@@ -1,64 +1,54 @@
 {% macro hEntry(entry, indent_width) -%}
 {%- set i = ' ' * indent_width -%}
-<article class="card h-entry">
-  {% if entry.photo %}
-  {{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" />
-
-  {% endif %}
-  {{i}}<div class="card-body">
-    {% if entry.name %}
-    {{i}}<h4 class="card-title p-name">{{ entry.name }}</h4>
-    {% endif %}
-    {{i}}<div class="e-content">
-      {{i}}{{ entry.content | markdown }}
-    {{i}}</div>
-  {{i}}</div>
-
-  {{i}}<div class="card-footer">
+<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" src="{{ entry.author.avatar.url }}" />
-      {{i}}{{ entry.author.name }}
+      {{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}}</time>
     {{i}}</a>
-    {% if entry.updated != entry.published %}
-    {{i}}<time class="dt-updated" datetime="{{ entry.updated.isoformat() }}">
+    {{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>
-    {% 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>
-
-  {% 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}}</aside>
+
+  {{i}}<div class="card">
+    {% if entry.photo %}
+    {{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" />
+
+    {% endif %}
+    {{i}}<div class="card-body">
+      {% if entry.name %}
+      {{i}}<h4 class="card-title p-name">{{ entry.name }}</h4>
+      {% endif %}
+      {{i}}<div class="e-content">
+        {{i}}{{ entry.content | markdown }}
+      {{i}}</div>
+    {{i}}</div>
   {{i}}</div>
 
-  {% endif %}
   {{i}}<script class="p-json-ld" type="application/ld+json">{{ entry.json_ld | tojson }}</script>
 {{i}}</article>
 {%- endmacro %}
diff --git a/entries/static/entries/css/h-entry.styl b/entries/static/entries/css/h-entry.styl
index 2fb7701..1177403 100644
--- a/entries/static/entries/css/h-entry.styl
+++ b/entries/static/entries/css/h-entry.styl
@@ -10,7 +10,23 @@ ol.entries, div.entry
 		&:last-child
 			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
 		ul
 			list-style-type disc
@@ -26,14 +42,3 @@ ol.entries, div.entry
 			max-width 100%
 		> :last-child
 			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