From a2989a0d2a3f636582d011c5a447df7c7067ce90 Mon Sep 17 00:00:00 2001 From: Michael Ball Date: Fri, 23 Aug 2024 01:26:50 -0700 Subject: [PATCH] support more left-aligned 5 across columns --- static/scss/snapcloud.scss | 9 +++++++++ static/style/compiled/snapcloud.css | 2 +- static/style/compiled/snapcloud.css.map | 2 +- views/carousel_bs.etlua | 4 +++- views/grid_bs.etlua | 2 +- views/partials/collection_bs.etlua | 3 ++- views/partials/project_bs.etlua | 3 ++- 7 files changed, 19 insertions(+), 6 deletions(-) diff --git a/static/scss/snapcloud.scss b/static/scss/snapcloud.scss index f16cc8d1..5fdd0d1d 100644 --- 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 index 49290611..e747a2f8 100644 --- a/static/style/compiled/snapcloud.css +++ b/static/style/compiled/snapcloud.css @@ -1 +1 @@ -:root{--berkeley-blue-2023: #003262;--berkeley-blue-2024: #002676;--california-gold: #fdb515;--snap-dark-blue: #2d3142;--snap-icon-blue: #496AD5;--snap-logo-gold: #E6AD1B;--lighter-link-color: #7070A0;--dark-text-color: #102040;--bs-dark: var(--snap-dark-blue);--bs-body-color: var(--dark-text-color);--navbar-height: 64px;--estimated-footer-height: 450px}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}nav.navbar{--bs-navbar-dark-color: var(--snap-dark-blue);--bs-navbar-color: #FFF;--bs-navbar-link-color: #FFF;--bs-navbar-toggler-border-color: #FFF;background-color:var(--bs-navbar-dark-color);font-weight:600;padding:0}nav.navbar .trapezoid{color:var(--bs-navbar-dark-color)}nav.navbar ul{padding:0}nav.navbar .form-control{border-color:#fff;background-color:#fff;color:var(--bs-navbar-dark-color);margin:auto 0}nav.navbar .navbar-toggler{--bs-navbar-toggler-border-color: #FFF;--bs-navbar-color: #FFF;margin:12px}nav.navbar .nav-link.show{color:var(--bs-navbar-dark-color)}nav.navbar li{--bs-nav-link-padding-x: 1em;padding:.75em .5em;height:100%;margin:0}nav.navbar li>a{color:#fff;font-weight:bold;text-align:center}nav.navbar li:hover,nav.navbar li:focus-within,nav.navbar li .dropdown-item:hover,nav.navbar li .dropdown-item:focus-within{background-color:#fff;color:var(--bs-navbar-dark-color)}nav.navbar li:hover form,nav.navbar li:focus-within form,nav.navbar li .dropdown-item:hover form,nav.navbar li .dropdown-item:focus-within form{background-color:unset}nav.navbar li:hover>a,nav.navbar li:focus-within>a,nav.navbar li .dropdown-item:hover>a,nav.navbar li .dropdown-item:focus-within>a{color:var(--bs-navbar-dark-color)}nav.navbar li .dropdown-menu{background-color:var(--bs-navbar-dark-color);color:#fff}nav.navbar li li.no-hover{padding:0 0;background:var(--bs-navbar-dark-color)}nav.navbar li li.no-hover hr{opacity:1}nav.navbar .trapezoid{position:absolute;top:var(--navbar-height)}html{height:100%}body{margin:var(--navbar-height) 0 0 0;height:100%;display:flex;flex-direction:column}main{margin:1em auto;flex:1 0 auto}.footer{background:var(--snap-dark-blue);padding:1em;color:var(--bs-light);font-size:.75em}.footer h2{font-size:1.5em;font-weight:bold}.footer .trapezoid-footer{top:-14px}.footer a{color:#fff;text-decoration:underline}.footer .credits{margin:2em 1em;padding:1em;border-top:1px solid #fff}.footer .credits a{text-decoration:none}.footer .credits img{margin-right:1em}.btn-outline-primary+.form-control{border-color:var(--bs-primary)}a{color:var(--lighter-link-color);text-decoration:none}a h1,a h2,a h3,a h4{color:var(--lighter-link-color)}em{font-style:italic}p{margin:1em 0}p{line-height:1.2em}ol{list-style:decimal inside;padding:.5em 0}h2{font-size:1.5em;margin:1em 0 .5em 0}h3{font-size:1.3em;margin:1em 0 .5em 0}h4{font-size:1.3em;font-weight:bold;margin-bottom:1em}hr{margin:0;border:0;height:1px;background:#fff}#homepage-carousel .carousel-item img{border-radius:10px;max-width:100%;max-height:400px}#homepage-carousel .carousel-control-prev-icon,#homepage-carousel .carousel-control-next-icon{border-radius:6px;height:3ch;width:3ch;font-weight:bold;background-color:#222;backdrop-filter:opacity(0.9) blur(4px);-webkit-backdrop-filter:opacity(0.9) blur(4px)}#homepage-carousel .carousel-control-prev-icon:focus-visible,#homepage-carousel .carousel-control-prev-icon:hover,#homepage-carousel .carousel-control-next-icon:focus-visible,#homepage-carousel .carousel-control-next-icon:hover{box-shadow:var(--bs-navbar-toggler-border-color) 0 0 3px 3px}/*# sourceMappingURL=snapcloud.css.map */ +:root{--berkeley-blue-2023: #003262;--berkeley-blue-2024: #002676;--california-gold: #fdb515;--snap-dark-blue: #2d3142;--snap-icon-blue: #496AD5;--snap-logo-gold: #E6AD1B;--lighter-link-color: #7070A0;--dark-text-color: #102040;--bs-dark: var(--snap-dark-blue);--bs-body-color: var(--dark-text-color);--navbar-height: 64px;--estimated-footer-height: 450px}.col-20{flex:0 0 auto;width:20%;max-width:20%}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}nav.navbar{--bs-navbar-dark-color: var(--snap-dark-blue);--bs-navbar-color: #FFF;--bs-navbar-link-color: #FFF;--bs-navbar-toggler-border-color: #FFF;background-color:var(--bs-navbar-dark-color);font-weight:600;padding:0}nav.navbar .trapezoid{color:var(--bs-navbar-dark-color)}nav.navbar ul{padding:0}nav.navbar .form-control{border-color:#fff;background-color:#fff;color:var(--bs-navbar-dark-color);margin:auto 0}nav.navbar .navbar-toggler{--bs-navbar-toggler-border-color: #FFF;--bs-navbar-color: #FFF;margin:12px}nav.navbar .nav-link.show{color:var(--bs-navbar-dark-color)}nav.navbar li{--bs-nav-link-padding-x: 1em;padding:.75em .5em;height:100%;margin:0}nav.navbar li>a{color:#fff;font-weight:bold;text-align:center}nav.navbar li:hover,nav.navbar li:focus-within,nav.navbar li .dropdown-item:hover,nav.navbar li .dropdown-item:focus-within{background-color:#fff;color:var(--bs-navbar-dark-color)}nav.navbar li:hover form,nav.navbar li:focus-within form,nav.navbar li .dropdown-item:hover form,nav.navbar li .dropdown-item:focus-within form{background-color:unset}nav.navbar li:hover>a,nav.navbar li:focus-within>a,nav.navbar li .dropdown-item:hover>a,nav.navbar li .dropdown-item:focus-within>a{color:var(--bs-navbar-dark-color)}nav.navbar li .dropdown-menu{background-color:var(--bs-navbar-dark-color);color:#fff}nav.navbar li li.no-hover{padding:0 0;background:var(--bs-navbar-dark-color)}nav.navbar li li.no-hover hr{opacity:1}nav.navbar .trapezoid{position:absolute;top:var(--navbar-height)}html{height:100%}body{margin:var(--navbar-height) 0 0 0;height:100%;display:flex;flex-direction:column}main{margin:1em auto;flex:1 0 auto}.footer{background:var(--snap-dark-blue);padding:1em;color:var(--bs-light);font-size:.75em}.footer h2{font-size:1.5em;font-weight:bold}.footer .trapezoid-footer{top:-14px}.footer a{color:#fff;text-decoration:underline}.footer .credits{margin:2em 1em;padding:1em;border-top:1px solid #fff}.footer .credits a{text-decoration:none}.footer .credits img{margin-right:1em}.btn-outline-primary+.form-control{border-color:var(--bs-primary)}a{color:var(--lighter-link-color);text-decoration:none}a h1,a h2,a h3,a h4{color:var(--lighter-link-color)}em{font-style:italic}p{margin:1em 0}p{line-height:1.2em}ol{list-style:decimal inside;padding:.5em 0}h2{font-size:1.5em;margin:1em 0 .5em 0}h3{font-size:1.3em;margin:1em 0 .5em 0}h4{font-size:1.3em;font-weight:bold;margin-bottom:1em}hr{margin:0;border:0;height:1px;background:#fff}#homepage-carousel .carousel-item img{border-radius:10px;max-width:100%;max-height:400px}#homepage-carousel .carousel-control-prev-icon,#homepage-carousel .carousel-control-next-icon{border-radius:6px;height:3ch;width:3ch;font-weight:bold;background-color:#222;backdrop-filter:opacity(0.9) blur(4px);-webkit-backdrop-filter:opacity(0.9) blur(4px)}#homepage-carousel .carousel-control-prev-icon:focus-visible,#homepage-carousel .carousel-control-prev-icon:hover,#homepage-carousel .carousel-control-next-icon:focus-visible,#homepage-carousel .carousel-control-next-icon:hover{box-shadow:var(--bs-navbar-toggler-border-color) 0 0 3px 3px}/*# sourceMappingURL=snapcloud.css.map */ diff --git a/static/style/compiled/snapcloud.css.map b/static/style/compiled/snapcloud.css.map index 9c929490..6dc48a33 100644 --- a/static/style/compiled/snapcloud.css.map +++ b/static/style/compiled/snapcloud.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../scss/snapcloud.scss"],"names":[],"mappings":"AACA,MAEE,8BACA,8BACA,2BAEA,0BACA,0BACA,0BAGA,8BAEA,2BACA,iCACA,wCACA,sBAEA,iCAKA,0CACE,4QAIJ,WACE,8CACA,wBACA,6BACA,uCACA,6CACA,gBACA,UAEA,sBACE,kCAIF,cACE,UAGF,yBACE,kBACA,sBACA,kCACA,cAIF,2BACE,uCACA,wBACA,YAGF,0BACE,kCAGF,cACE,6BACA,mBACA,YACA,SAEA,gBACE,WACA,iBACA,kBAGF,4HAIE,sBACA,kCAEA,gJACE,uBAGF,oIACE,kCAIJ,6BACE,6CACA,WAGF,0BACE,YACA,uCAEA,6BACE,UAKN,sBACE,kBACA,yBAKJ,KACE,YAGF,KACE,kCAEA,YACA,aACA,sBAGF,KACE,gBACA,cAGF,QACE,iCACA,YACA,sBACA,gBAEA,WACE,gBACA,iBAGF,0BACE,UAGF,UACE,WACA,0BAGF,iBACE,eACA,YACA,0BAEA,mBACE,qBAGF,qBACE,iBAKN,mCACE,+BAGF,EACE,gCACA,qBAGA,oBACE,gCAIJ,GACE,kBAGF,EACE,aAGF,EACE,kBAGF,GACE,0BACA,eAGF,GACE,gBACA,oBAGF,GACE,gBACA,oBAGF,GACE,gBACA,iBACA,kBAGF,GACE,SACA,SACA,WACA,gBAIA,sCACE,mBACA,eACA,iBAGF,8FAEE,kBACA,WACA,UACA,iBACA,sBACA,uCACA,+CAEA,oOAEE","file":"snapcloud.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../scss/snapcloud.scss"],"names":[],"mappings":"AACA,MAEE,8BACA,8BACA,2BAEA,0BACA,0BACA,0BAGA,8BAEA,2BACA,iCACA,wCACA,sBAEA,iCAMF,QACE,cACA,UACA,cAKA,0CACE,4QAIJ,WACE,8CACA,wBACA,6BACA,uCACA,6CACA,gBACA,UAEA,sBACE,kCAIF,cACE,UAGF,yBACE,kBACA,sBACA,kCACA,cAIF,2BACE,uCACA,wBACA,YAGF,0BACE,kCAGF,cACE,6BACA,mBACA,YACA,SAEA,gBACE,WACA,iBACA,kBAGF,4HAIE,sBACA,kCAEA,gJACE,uBAGF,oIACE,kCAIJ,6BACE,6CACA,WAGF,0BACE,YACA,uCAEA,6BACE,UAKN,sBACE,kBACA,yBAKJ,KACE,YAGF,KACE,kCAEA,YACA,aACA,sBAGF,KACE,gBACA,cAGF,QACE,iCACA,YACA,sBACA,gBAEA,WACE,gBACA,iBAGF,0BACE,UAGF,UACE,WACA,0BAGF,iBACE,eACA,YACA,0BAEA,mBACE,qBAGF,qBACE,iBAKN,mCACE,+BAGF,EACE,gCACA,qBAGA,oBACE,gCAIJ,GACE,kBAGF,EACE,aAGF,EACE,kBAGF,GACE,0BACA,eAGF,GACE,gBACA,oBAGF,GACE,gBACA,oBAGF,GACE,gBACA,iBACA,kBAGF,GACE,SACA,SACA,WACA,gBAIA,sCACE,mBACA,eACA,iBAGF,8FAEE,kBACA,WACA,UACA,iBACA,sBACA,uCACA,+CAEA,oOAEE","file":"snapcloud.css"} \ No newline at end of file diff --git a/views/carousel_bs.etlua b/views/carousel_bs.etlua index 7d3708a8..9dc023c8 100644 --- 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 %> diff --git a/views/grid_bs.etlua b/views/grid_bs.etlua index 5cac7bc4..eaf16a51 100644 --- a/views/grid_bs.etlua +++ b/views/grid_bs.etlua @@ -64,7 +64,7 @@ if items == nil then items = {} end ) end %> -
+
<% render('views.partials.grid_paginator_bs') %>
diff --git a/views/partials/collection_bs.etlua b/views/partials/collection_bs.etlua index 9317529a..e42afbd3 100644 --- a/views/partials/collection_bs.etlua +++ b/views/partials/collection_bs.etlua @@ -1,4 +1,5 @@ -
+<% col_class = column_width and "col-" .. column_width or '' %> +
<% if (item.thumbnail == nil) then %> no thumbnail aet diff --git a/views/partials/project_bs.etlua b/views/partials/project_bs.etlua index 30286263..87f4a59e 100644 --- a/views/partials/project_bs.etlua +++ b/views/partials/project_bs.etlua @@ -1,4 +1,5 @@ -
+<% col_class = column_width and "col-" .. column_width or '' %> +
<% if (item.thumbnail == nil) then %> no thumbnail aet