Much better mobile reflow of carousels...

* projects and collections reflow better regardless of the "per row" setting
* slightly increase the usable width on smaller screens

Author: cycomachead

static/scss/snapcloud.scss

@@ -23,10 +23,12 @@
 // 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%;
+// TODO: This need to really be a SASS utility.
+@media screen and (min-width: 950px) {
+  .col-lg-20 {
+    flex: 0 0 auto;
+    width: 20%;
+  }
 }
 
 [data-bs-theme=dark] {

static/style/compiled/snapcloud.css

@@ -19,7 +19,7 @@ bootstrap_column_width = items_per_row == 5 and 20 or (12 / items_per_row)
 %>
 
 
-<div  id="<%= id %>_container" class="<%= item_type %>s my-2 <%= class %>">
+<div id="<%= id %>_container" class="<%= item_type %>s my-2 container-fluid">
 
 <% if ((num_pages > 0) or show_if_empty) then %>
   <div class="row">

static/style/compiled/snapcloud.css.map

@@ -106,7 +106,7 @@ render(
 ]]--
 %>
 
-<div class="row projects">
+<div class="d-grid col-11 mx-auto">
     <a href="/collections" class="btn btn-lg btn-outline-primary"
         ><%- locale.get('more_collections') %></a>
 </div>

views/carousel_bs.etlua

@@ -7,7 +7,7 @@
     <% render('views.js.dialog') %>
     <script>new customAlert();</script>
     <% render('views.layout.navigation_bar_bs') %>
-    <main class="container py-4">
+    <main class="container-lg container-fluid mx-8 py-4">
       <% content_for('inner') %>
     </main>
     <% render('views.layout.footer_bs') %>

views/index_bs.etlua

@@ -1,5 +1,5 @@
-<% col_class = column_width and "col-" .. column_width or '' %>
-<div class="collection small <%- col_class %>">
+<% col_class = column_width and "col-lg-" .. column_width or '' %>
+<div class="collection small <%- col_class %> col-md-3 col-sm-4 col-xs-5">
     <% 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>

views/layout_bs.etlua

@@ -1,5 +1,5 @@
-<% col_class = column_width and "col-" .. column_width or '' %>
-<div class="project small <%- col_class %>">
+<% col_class = column_width and "col-lg-" .. column_width or '' %>
+<div class="project small <%= col_class %> col-md-3 col-sm-4 col-xs-5">
     <% if (item.thumbnail == nil) then %>
     <i class="no-image fas fa-question-circle"></i>
     <span class="sr-only">no thumbnail aet</span>