Crop with CSS to prevent unwanted layout changes

seantis · Dec 18, 2024 · 8aa7703 · 8aa7703
1 parent 721556e
commit 8aa7703
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/privatim/static/css/custom.css b/src/privatim/static/css/custom.css
@@ -721,3 +721,20 @@ input[type="color"]:focus,
 .consultation-main-text ul li p {
     margin: 0;
 }
+
+.custom-truncate {
+    position: relative;
+    max-height: 25rem;
+    overflow: hidden;
+}
+
+.custom-truncate::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 4rem;
+    background: linear-gradient(to bottom, transparent, white);
+    pointer-events: none;
+}
diff --git a/src/privatim/views/templates/consultations.pt b/src/privatim/views/templates/consultations.pt
@@ -47,9 +47,9 @@
                                             <span i18n:translate="">by</span> ${consultation.editor_name}
                                         </p>
                                     </div>
-                                    <div class="card-body p-3">
+                                    <div class="card-body p-3 custom-truncate">
                                         <h5 class="card-title fw-bold" i18n:translate="">${consultation.title}</h5>
-                                        <p class="card-text" tal:condition="consultation.description" tal:content="consultation.description if len(consultation.description) < 550 else consultation.description[:550] + '...'"></p>
+                                        <p class="card-text" tal:condition="consultation.description" tal:content="consultation.description"></p>
                                     </div>
                                 </div>
                             </div>