Truncate post texts in listings

raffomania · Jul 15, 2023 · f8cba27 · f8cba27
1 parent eb64379
commit f8cba27
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/css/main.css b/css/main.css
@@ -25,4 +25,30 @@
 
 .pagefind-ui__form::before {
     top: calc(16px * var(--pagefind-ui-scale)) !important;
+}
+
+@layer components {
+    .post-preview {
+        position: relative;
+        max-height: 14rem;
+    }
+
+    .post-preview > *:first-child {
+        margin-top: 0;
+    }
+
+    .post-preview > *:last-child {
+        margin-bottom: 0;
+    }
+
+    .post-preview::after {
+        position: absolute;
+        top: 12.25rem;
+        height: 1.75rem;
+        left: 0;
+        right: 0;
+        background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0) 70%);
+        content: " ";
+        border-bottom: 1px solid theme('colors.gray.200');
+    }
 }
diff --git a/templates/listing.jinja b/templates/listing.jinja
@@ -14,10 +14,14 @@
 {% for post in posts %}
 <div class="mb-8 prose break-words">
   <a href="/posts/{{post.id}}.html" class="no-underline">
-    <h3>{{ post.title }}</h3>
+    <h3 class="mb-5">{{ post.title }}</h3>
   </a>
-  <p>{% include "post_text.jinja" %}</p>
-  <p class="text-sm flex justify-between">
+  {% if post.selftext_html.is_some() || !post.selftext.is_empty() %}
+  <div class="overflow-hidden post-preview">
+    {% include "post_text.jinja" %}
+  </div>
+  {% endif %}
+  <p class="text-sm mt-5 flex justify-between">
     <a href="/posts/{{post.id}}.html">{{ post.real_num_comments }}
       Answers</a>
     <span class="text-gray-500">{{post.created_at.format("%F")}}</span>