Skip to content

Commit

Permalink
Much better mobile reflow of carousels...
Browse files Browse the repository at this point in the history
* projects and collections reflow better regardless of the "per row" setting
* slightly increase the usable width on smaller screens
  • Loading branch information
cycomachead committed Aug 23, 2024
1 parent 691d9c7 commit 16e75d0
Show file tree
Hide file tree
Showing 8 changed files with 15 additions and 13 deletions.
10 changes: 6 additions & 4 deletions static/scss/snapcloud.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down
2 changes: 1 addition & 1 deletion static/style/compiled/snapcloud.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion static/style/compiled/snapcloud.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion views/carousel_bs.etlua
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion views/index_bs.etlua
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion views/layout_bs.etlua
Original file line number Diff line number Diff line change
Expand Up @@ -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') %>
Expand Down
4 changes: 2 additions & 2 deletions views/partials/collection_bs.etlua
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions views/partials/project_bs.etlua
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 16e75d0

Please sign in to comment.