Refactor: Update timeline stop name styling and add ellipsis for long…

… names
drikusroor · Oct 4, 2024 · 5b06bc8 · 5b06bc8
1 parent 64a6099
commit 5b06bc8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/blog/templates/blog/includes/timeline.html b/src/blog/templates/blog/includes/timeline.html
@@ -13,7 +13,9 @@
                         data-end-date="{{ stop.end_date }}"
                         title="{{ stop.name }} - {{ stop.start_date }} - {{ stop.end_date }}"
                     >
-                        <span class="text-white text-xs font-bold">{{ stop.name }}</span>
+                        <span class="text-white text-xs font-bold whitespace-nowrap overflow-hidden overflow-ellipsis" style="max-width: 100px;">
+                            {{ stop.name }}
+                        </span>
                         <div class="text-xs text-gray-600">{{ start_date|date:"M j" }}</div>
                     </div>
                 {% if not forloop.last %}

diff --git a/src/brazil_blog/static/css/brazil_blog_compiled.css b/src/brazil_blog/static/css/brazil_blog_compiled.css
@@ -1905,6 +1905,10 @@ select {
   overflow-y: auto;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }