v2: show entry details before entry title. #318

lemon24 · Jan 1, 2025 · 35e57a7 · 35e57a7
1 parent b8cfb57
commit 35e57a7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 39 deletions.
diff --git a/src/reader/_app/v2/static/style.css b/src/reader/_app/v2/static/style.css
@@ -7,7 +7,3 @@
 .nav.controls .nav-link.active {
   color: var(--bs-navbar-active-color);
 }
-
-.list-inline-item.title {
-  font-size: 1.125rem;
-}
diff --git a/src/reader/_app/v2/templates/v2/entries.html b/src/reader/_app/v2/templates/v2/entries.html
@@ -50,47 +50,43 @@
 
   <ul class="list-inline mb-1">
 
-    <h2 class="list-inline-item d-inline title">
-      {# TODO: entry.link or url for entry view #}
-      <a class="text-decoration-none" href="{{ url_for('reader.entry', feed=entry.feed.url, entry=entry.id) }}">
-        {{ (entry.title or 'untitled') | striptags | truncate(95) }}
-      </a>
-
-      {% if entry.link %}
-      {# TODO: aria stuff #}
-      <a class="text-decoration-none mx-1 small" href="{{ entry.link }}">
-        <i class="bi bi-box-arrow-up-right"></i>
+    <li class="list-inline-item">
+      <a class="text-decoration-none" href="{{ url_for('reader.entries', feed=entry.feed.url) }}">
+        <small>
+          {{ entry.feed_resolved_title or 'untitled feed' }}
+        </small>
       </a>
-      {% endif %}
-
-    </h2>
+    </li>
 
-    <div class="d-inline-block">
+    {% set published = entry.published or entry.updated_not_none -%}
+    {# TODO: published should be a tooltip #}
+    {# TODO: babel.format_timedelta(..., format='narrow') -> 3h #}
+    <li class="list-inline-item text-secondary" title="{{ published }}">
+      <small>
+        {{ published | humanize_naturaltime }}
+      </small>
+    </li>
 
-      <li class="list-inline-item">
-        <a class="text-decoration-none" href="{{ url_for('reader.entries', feed=entry.feed.url) }}">
-          <small>
-            {{ entry.feed_resolved_title or 'untitled feed' }}
-          </small>
-        </a>
-      </li>
+    <!--
+    <li class="list-inline-item text-secondary"><small>12 minute read</small></li>
+    -->
 
-      {% set published = entry.published or entry.updated_not_none -%}
-      {# TODO: published should be a tooltip #}
-      {# TODO: babel.format_timedelta(..., format='narrow') -> 3h #}
-      <li class="list-inline-item text-secondary" title="{{ published }}">
-        <small>
-          {{ published | humanize_naturaltime }}
-        </small>
-      </li>
+  </ul>
 
-      <!--
-      <li class="list-inline-item text-secondary"><small>12 minute read</small></li>
-      -->
+  <h2 class="h5">
+    <a class="text-decoration-none" href="{{ url_for('reader.entry', feed=entry.feed.url, entry=entry.id) }}">
+      {{ (entry.title or 'untitled') | striptags | truncate(95) }}
 
-    </div>
+      {#- NOTE: there must be no whitespace between the last word and the icon -#}
+      {#- TODO: aria stuff -#}
+      {%- if entry.link -%}
+      <a class="mx-2 small text-nowrap" href="{{ entry.link }}">{#
+        #}<i class="bi bi-box-arrow-up-right small"></i>
+      </a>
+      {% endif %}
 
-  </ul>
+    </a>
+  </h2>
 
   {% set summary = entry.get_content(prefer_summary=True).value | striptags | trim %}
   {% if summary %}
@@ -99,7 +95,7 @@ <h2 class="list-inline-item d-inline title">
   </p>
   {% endif %}
 
-  <form class="my-2">
+  <form class="my-3">
     {# TODO: aria stuff #}
 
     <button type="submit" class="btn btn-outline-secondary btn-sm" style="width: 4rem">