Refine Lumi layouts and public profile

1 files changed, 70 insertions, 42 deletions

diff --git a/templates/_film_card.html b/templates/_film_card.html
index a4e206f..6723821 100644
--- a/templates/_film_card.html
+++ b/templates/_film_card.html
@@ -7,8 +7,8 @@
     {% endif %}
   </a>
   <div class="film-card-body">
-    <div class="film-card-header">
-      <div>
+    <div class="film-card-main">
+      <div class="film-card-header">
         <h2><a href="/films/{{ film.id }}">{{ film.title }}</a></h2>
         <p class="muted">
           {% if film.year %}{{ film.year }}{% endif %}
@@ -21,6 +21,55 @@
           {% endif %}
         </p>
       </div>
+
+      <div class="ledger-strip">
+        <span>{{ film.shelf|title }}</span>
+        {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %}
+        {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %}
+        {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %}
+      </div>
+
+      {% if film.language or film.genre or film.context or film.how_found or film.watched_with %}
+        <div class="fact-list fact-list-compact">
+          {% if film.language %}
+            <div class="fact-row">
+              <span class="fact-label">Lang</span>
+              <span class="fact-value">{{ film.language }}</span>
+            </div>
+          {% endif %}
+          {% if film.genre %}
+            <div class="fact-row">
+              <span class="fact-label">Genre</span>
+              <span class="fact-value">{{ film.genre }}</span>
+            </div>
+          {% endif %}
+          {% if film.context %}
+            <div class="fact-row">
+              <span class="fact-label">Context</span>
+              <span class="fact-value">{{ film.context }}</span>
+            </div>
+          {% endif %}
+          {% if film.how_found %}
+            <div class="fact-row">
+              <span class="fact-label">Found</span>
+              <span class="fact-value">{{ film.how_found }}</span>
+            </div>
+          {% endif %}
+          {% if film.watched_with %}
+            <div class="fact-row">
+              <span class="fact-label">With</span>
+              <span class="fact-value">{{ film.watched_with }}</span>
+            </div>
+          {% endif %}
+        </div>
+      {% endif %}
+
+      {% if film.notes %}
+        <p class="notes-preview">{{ film.notes[:220] }}{% if film.notes|length > 220 %}...{% endif %}</p>
+      {% endif %}
+    </div>
+
+    <div class="film-card-side">
       {% if film.shelf == 'diary' %}
         <div class="star-control" role="group" aria-label="Rate film" data-film-id="{{ film.id }}" data-current-stars="{{ film.stars }}">
           {% for value in range(1, 4) %}
@@ -36,48 +85,27 @@
       {% elif film.stars %}
         <span class="rating">{% for _ in range(film.stars) %}✦{% endfor %}</span>
       {% endif %}
-    </div>
-
-    <div class="meta-row">
-      <span>{{ film.shelf|title }}</span>
-      {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %}
-      {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %}
-      {% if film.language %}<span>{{ film.language }}</span>{% endif %}
-      {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %}
-    </div>
 
-    {% if film.genre or film.context or film.how_found or film.watched_with %}
-      <div class="tag-row">
-        {% if film.genre %}<span>{{ film.genre }}</span>{% endif %}
-        {% if film.context %}<span>{{ film.context }}</span>{% endif %}
-        {% if film.how_found %}<span>{{ film.how_found }}</span>{% endif %}
-        {% if film.watched_with %}<span>With {{ film.watched_with }}</span>{% endif %}
+      <div class="inline-actions">
+        {% if film.shelf == 'queue' %}
+          <a class="small-button" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
+          <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
+            <button class="secondary-button" type="submit">Abandon</button>
+          </form>
+        {% elif film.shelf == 'diary' %}
+          <form method="post" action="/films/{{ film.id }}/shelf/queue">
+            <button class="secondary-button" type="submit">Move to queue</button>
+          </form>
+          <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
+            <button class="secondary-button" type="submit">Mark abandoned</button>
+          </form>
+        {% else %}
+          <a class="small-button" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
+          <form method="post" action="/films/{{ film.id }}/shelf/queue">
+            <button class="secondary-button" type="submit">Move to queue</button>
+          </form>
+        {% endif %}
       </div>
-    {% endif %}
-
-    {% if film.notes %}
-      <p class="notes-preview">{{ film.notes[:220] }}{% if film.notes|length > 220 %}...{% endif %}</p>
-    {% endif %}
-
-    <div class="inline-actions">
-      {% if film.shelf == 'queue' %}
-        <a class="small-button" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
-        <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
-          <button class="secondary-button" type="submit">Abandon</button>
-        </form>
-      {% elif film.shelf == 'diary' %}
-        <form method="post" action="/films/{{ film.id }}/shelf/queue">
-          <button class="secondary-button" type="submit">Move to queue</button>
-        </form>
-        <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
-          <button class="secondary-button" type="submit">Mark abandoned</button>
-        </form>
-      {% else %}
-        <a class="small-button" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
-        <form method="post" action="/films/{{ film.id }}/shelf/queue">
-          <button class="secondary-button" type="submit">Move to queue</button>
-        </form>
-      {% endif %}
     </div>
   </div>
 </article>