v2: more compact entries page. #318

lemon24 · Jan 1, 2025 · bd41af8 · bd41af8
1 parent dfed0ff
commit bd41af8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/src/reader/_app/v2/static/style.css b/src/reader/_app/v2/static/style.css
@@ -1,14 +1,4 @@
 
-/* knock back heading sizes by 2 steps */
-.h1, h1 { font-size: calc(1.3rem + .6vw); }
-.h2, h2 { font-size: calc(1.275rem + .3vw); }
-/* TODO: rest of them */
-@media (min-width: 1200px) {
-  .h1, h1 { font-size: 1.75rem; }
-  .h2, h2 { font-size: 1.5rem; }
-  /* TODO: rest of them */
-}
-
 .nav.controls {
   --bs-nav-link-padding-x: 0;
   --bs-nav-link-padding-y: 0;
@@ -17,3 +7,15 @@
 .nav.controls .nav-link.active {
   color: var(--bs-navbar-active-color);
 }
+
+.mark-as .btn-sm {
+  --bs-btn-padding-x: 0.125rem;
+  --bs-btn-padding-y: 0.125rem;
+}
+
+.list-inline-item.link {
+  font-size: 1.125rem;
+}
+.list-inline-item.link .external {
+  font-size: 0.875rem;
+}
diff --git a/src/reader/_app/v2/templates/v2/entries.html b/src/reader/_app/v2/templates/v2/entries.html
@@ -10,7 +10,7 @@
 {% block body %}
 
 
-<ul class="nav controls mb-3">
+<ul class="nav controls mb-3 small">
   <!--
   <li class="nav-item">
     <a class="nav-link active" aria-current="page">unread</a>
@@ -48,34 +48,49 @@
 {% for entry in entries %}
   <ul class="list-inline mb-2">
 
-    <h2 class="list-inline-item d-inline">
+    <h2 class="list-inline-item d-inline link">
       {# 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>
-    </h2>
 
-    <li class="list-inline-item">
-      <a class="text-decoration-none" href="{{ url_for('reader.entries', feed=entry.feed.url) }}">
-        {{ entry.feed_resolved_title or 'untitled feed' }}
+      {% if entry.link %}
+      {# TODO: aria stuff #}
+      <a class="text-decoration-none mx-1 external" href="{{ entry.link }}">
+        <i class="bi bi-box-arrow-up-right"></i>
       </a>
-    </li>
+      {% endif %}
 
-    {% set published = entry.published or entry.updated_not_none -%}
-    {# TODO: published should be a tooltip #}
-    <li class="list-inline-item text-secondary" title="{{ published }}">
-      <small>
-        {{ published | humanize_naturaltime }}
-      </small>
-    </li>
+    </h2>
 
-    <!--
-    <li class="list-inline-item text-secondary"><small>12 minute read</small></li>
-    -->
+    <div class="d-inline-block">
+
+      <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>
+
+      {% 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 text-secondary"><small>12 minute read</small></li>
+      -->
+
+    </div>
 
   </ul>
 
-  <form class="mb-2">
+  <form class="mb-2 mark-as">
     {# TODO: aria stuff #}
 
     <button type="submit" class="btn btn-outline-secondary btn-sm" style="width: 5rem">
@@ -93,15 +108,11 @@ <h2 class="list-inline-item d-inline">
 
     </div>
 
-    {% if entry.link %}
-    <a class="btn text-secondary btn-sm" style="width: 3rem" href="{{ entry.link }}">
-      <i class="bi bi-link-45deg"></i>
-    </a>
-    {% endif %}
-
   </form>
 
-  <p>{{ entry.get_content(prefer_summary=True).value | striptags | truncate }}</p>
+  <p class="small">
+    {{ entry.get_content(prefer_summary=True).value | striptags | truncate(223) }}
+  </p>
 
 
 {% else %}