support more left-aligned 5 across columns

snap-cloud · Aug 23, 2024 · a2989a0 · a2989a0
1 parent 9871cf5
commit a2989a0
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 6 deletions.
diff --git a/static/scss/snapcloud.scss b/static/scss/snapcloud.scss
@@ -20,6 +20,15 @@
   --estimated-footer-height: 450px;
 }
 
+// We often use 1/5 width items.
+// Bootstrap's grid system uses 12ths.
+// So we use col-20 for 20% width.
+.col-20 {
+  flex: 0 0 auto;
+  width: 20%;
+  max-width: 20%;
+}
+
 [data-bs-theme=dark] {
   /* Ensure the hamburger icon is solid white. Seems to be no easier way to fix this. */
   & .navbar-toggler-icon {

diff --git a/static/style/compiled/snapcloud.css b/static/style/compiled/snapcloud.css
diff --git a/static/style/compiled/snapcloud.css.map b/static/style/compiled/snapcloud.css.map
diff --git a/views/carousel_bs.etlua b/views/carousel_bs.etlua
@@ -15,6 +15,7 @@ num_pages = (math.ceil(#(items) / items_per_page) or 0)
 id = package.loaded.util.slugify(title):gsub('-', '_')
 class = 'id_' .. id
 items_per_row = items_per_row or 5
+bootstrap_column_width = items_per_row == 5 and 20 or (12 / items_per_row)
 %>
 
 
@@ -63,7 +64,8 @@ items_per_row = items_per_row or 5
                 <% end %>
                 <% render('views.partials.' .. item_type .. '_bs', {
                         item = item,
-                        show_author = show_author
+                        show_author = show_author,
+                        column_width = bootstrap_column_width
                     }) %>
                 <% if end_row then %>
                     </div>

diff --git a/views/grid_bs.etlua b/views/grid_bs.etlua
@@ -64,7 +64,7 @@ if items == nil then items = {} end
                 )
             end %>
         </div>
-        <div class="col-lg-3 col-md-8 col-sm-12">
+        <div class="col-lg-4 col-md-8 col-sm-12">
             <% render('views.partials.grid_paginator_bs') %>
         </div>
     </div>

diff --git a/views/partials/collection_bs.etlua b/views/partials/collection_bs.etlua
@@ -1,4 +1,5 @@
-<div class="collection small col-2">
+<% col_class = column_width and "col-" .. column_width or '' %>
+<div class="collection small <%- col_class %>">
     <% if (item.thumbnail == nil) then %>
     <i class="no-image fas fa-question-circle" aria-hidden=true></i>
     <span class="sr-only">no thumbnail aet</span>

diff --git a/views/partials/project_bs.etlua b/views/partials/project_bs.etlua
@@ -1,4 +1,5 @@
-<div class="project small col">
+<% col_class = column_width and "col-" .. column_width or '' %>
+<div class="project small <%- col_class %>">
     <% if (item.thumbnail == nil) then %>
     <i class="no-image fas fa-question-circle"></i>
     <span class="sr-only">no thumbnail aet</span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,7 @@ if items == nil then items = {} end @@
                     )
                 end %>
             </div>
-            <div class="col-lg-3 col-md-8 col-sm-12">
+            <div class="col-lg-4 col-md-8 col-sm-12">
                 <% render('views.partials.grid_paginator_bs') %>
             </div>
         </div>
@@ Expand Down @@