trestle 0.10.0.pre → 0.10.0.pre2

data/frontend/css/components/_modal.scss

@@ -61,7 +61,7 @@
 }
 
 .modal-title {
-  font-size: 1.3rem;
+  font-size: 1.125rem;
   font-weight: 500;
   text-shadow: rgba(black, 0.5) 0 1px 1px;
   color: white;
@@ -70,7 +70,7 @@
 .modal-tabs {
   .nav-tabs {
     background: $body-bg;
-    padding: 10px 15px 0 15px;
+    padding: 0.625rem 1rem 0 1rem;
   }
 }
 
@@ -112,11 +112,11 @@
     }
 
     h3 {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
     }
 
     p {
-      font-size: 0.9rem;
+      font-size: 0.825rem;
     }
   }
 }

data/frontend/css/components/_pagination.scss

@@ -3,10 +3,11 @@
 
   display: inline-flex;
   align-items: center;
+  gap: 0.75rem;
 
   p {
-    font-size: 0.85rem;
-    margin: 0 10px 0 0;
+    font-size: 0.75rem;
+    margin: 0;
   }
 
   strong {
@@ -32,16 +33,11 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 0.375rem;
 
     .pagination {
       margin: 0 auto;
       order: -1;
     }
-
-    p {
-      display: block;
-      margin-right: 0;
-      margin-top: 5px;
-    }
   }
 }

data/frontend/css/components/_popover.scss

@@ -1,5 +1,5 @@
 .popover-header {
   font-weight: 500;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   border-bottom-color: $popover-header-border;
 }

data/frontend/css/components/_scopes.scss

@@ -35,7 +35,7 @@
 
 .scope-group {
   line-height: 2;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   padding: 0.5rem 1rem 0.25rem 0.75rem;
 
   background: #f7f7f7;
@@ -47,19 +47,13 @@
   display: flex;
   flex-wrap: wrap;
 
+  gap: 0.25rem 0.35rem;
+
   position: relative;
   align-items: center;
 
   margin-bottom: 0;
   padding: 0;
-
-  li {
-    margin: 0.125rem 0.35rem 0.125rem 0;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
 }
 
 .scope {
@@ -67,7 +61,7 @@
 
   background-color: $scope-bg;
 
-  font-size: 0.8rem;
+  font-size: 0.6875rem;
   font-weight: normal;
   white-space: nowrap;
 

data/frontend/css/components/_select.scss

@@ -23,7 +23,7 @@
       padding: $s2bs5-padding-y $s2bs5-indicator-padding $s2bs5-padding-y $s2bs5-padding-x;
 
       &:has(.select2-selection__clear) {
-        padding-right: $s2bs5-indicator-padding + 1rem;
+        padding-right: $s2bs5-indicator-padding + 0.875rem;
       }
     }
   }
@@ -46,7 +46,7 @@
 
     .select2-search--inline {
       width: auto;
-      margin-left: 0.12rem;
+      margin-left: 0.1rem;
 
       &:first-child {
         margin-left: 0.375rem;
@@ -103,7 +103,7 @@
         background: $s2bs5-clear-tag-bg;
 
         margin-right: 0;
-        margin-left: 4px;
+        margin-left: 0.25rem;
         font-size: 0;
         line-height: 1.2;
 
@@ -137,10 +137,9 @@
 
   // Prevent input zooming on mobile devices
   @include media-breakpoint-down(sm) {
-    .select2-search--inline {
-      .select2-search__field {
-        font-size: 16px;
-      }
+    .select2-selection,
+    .select2-dropdown .select2-search .select2-search__field {
+      font-size: 1rem;
     }
   }
 }
@@ -154,7 +153,7 @@
         padding: map-get($s2bs5-small, padding-y) map-get($s2bs5-small, padding-x);
 
         &:has(.select2-selection__clear) {
-          padding-right: $s2bs5-indicator-padding + 1rem;
+          padding-right: $s2bs5-indicator-padding + 0.875rem;
         }
       }
     }
@@ -170,7 +169,7 @@
         padding: map-get($s2bs5-large, padding-y) map-get($s2bs5-large, padding-x);
 
         &:has(.select2-selection__clear) {
-          padding-right: $s2bs5-indicator-padding + 1.5rem;
+          padding-right: $s2bs5-indicator-padding + 1.375rem;
         }
       }
     }

data/frontend/css/components/_sort.scss

@@ -8,7 +8,7 @@
     @include icon-fa($fa-var-bars);
 
     font-size: 75%;
-    margin-left: 5px;
+    margin-left: 0.325rem;
     opacity: 0.25;
   }
 

data/frontend/css/components/_table.scss

@@ -82,8 +82,8 @@
   }
 
   .avatar {
-    width: 32px;
-    height: 32px;
+    width: 2rem;
+    height: 2rem;
     vertical-align: middle;
   }
 
@@ -109,9 +109,9 @@
     line-height: 1;
 
     i {
-      font-size: 0.85rem;
+      font-size: 0.75rem;
 
-      width: 1.25rem;
+      width: 1.125rem;
       text-align: center;
     }
 
@@ -124,7 +124,7 @@
   .btn-group {
     + .btn,
     + .btn-group {
-      margin-left: 4px;
+      margin-left: 0.25rem;
     }
   }
 

data/frontend/css/components/_tabs.scss

@@ -5,6 +5,11 @@
   flex-wrap: nowrap;
   white-space: nowrap;
 
+  gap: 0.325rem;
+
+  --#{$prefix}nav-link-padding-x: 1.25rem;
+  --#{$prefix}nav-link-padding-y: 0.625rem;
+
   &::-webkit-scrollbar {
     height: 4px;
   }
@@ -22,9 +27,6 @@
   }
 
   .nav-link {
-    margin-right: 4px;
-    padding: 10px 20px;
-
     font-weight: 500;
 
     transition: $nav-tabs-link-transition;
@@ -41,11 +43,6 @@
   .align-right {
     margin-left: auto;
 
-    .nav-link {
-      margin-right: 0;
-      margin-left: 4px;
-    }
-
     & + .align-right {
       margin-left: 0;
     }
@@ -53,7 +50,7 @@
 
   .badge {
     font-size: 0.65em;
-    margin-left: 0.35rem;
+    margin-left: 0.3125rem;
     vertical-align: 1px;
 
     // Default badge color when no badge- classes specified
@@ -66,16 +63,12 @@
 
 @include media-breakpoint-down(md) {
   .nav-tabs {
-    .nav-link {
-      font-size: 0.95rem;
-      padding: 10px;
-      margin-right: 2px;
-    }
+    --#{$prefix}nav-link-padding-x: 0.625rem;
 
-    .align-right {
-      .nav-link {
-        margin-left: 2px;
-      }
+    gap: 0.175rem;
+
+    .nav-link {
+      font-size: 0.8125rem;
     }
   }
 }

data/frontend/css/components/_tags.scss

@@ -17,21 +17,23 @@
 }
 
 .tag {
-  --tag-padding-y: 0.25rem;
-  --tag-padding-x: 6px;
+  --tag-padding-y: 0.375em;
+  --tag-padding-x: 0.5em;
 
   --tag-border-width: 0.325rem;
   --tag-border-radius: 0.25rem;
 
-  --tag-font-size: 0.8rem;
+  --tag-font-size: 0.825em;
   --tag-font-weight: normal;
   --tag-line-height: 1.1;
 
-  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
-  --tag-border-color: #{rgba(black, 0.25)};
   --tag-color: white;
 
-  --tag-hover-border-color: #{rgba(black, 0.35)};
+  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
+  --tag-border-color: #{$primary};
+
+  --tag-hover-bg: #{shift-color($primary, $tag-hover-bg-scale)};
+  --tag-hover-border-color: #{shift-color($primary, $tag-hover-border-scale)};
 
   display: inline-block;
   padding: var(--tag-padding-y) var(--tag-padding-x) var(--tag-padding-y) calc(var(--tag-padding-x) - var(--tag-border-width) / 2);
@@ -62,6 +64,14 @@
   }
 }
 
+.tag {
+  --tag-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-bg-scale)};
+  --tag-border-color: var(--primary);
+
+  --tag-hover-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-bg-scale)};
+  --tag-hover-border-color: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-border-scale)};
+}
+
 @each $state, $value in $theme-colors {
   .tag-#{$state} {
     @include tag-variant($value);

data/frontend/css/components/_toolbars.scss

@@ -1,17 +1,17 @@
 .btn-toolbar {
-  gap: 5px;
+  gap: 0.375rem;
 }
 
 .primary-toolbar {
   .btn {
-    --#{$prefix}btn-padding-x:     1.25rem;
-    --#{$prefix}btn-padding-y:     0.5rem;
-    --#{$prefix}btn-font-size:     1.35rem;
+    --#{$prefix}btn-padding-x: 1.125rem;
+    --#{$prefix}btn-padding-y: 0.5rem;
+    --#{$prefix}btn-font-size: 1.125rem;
 
     @include media-breakpoint-down(md) {
       --#{$prefix}btn-padding-x:     0.75rem;
-      --#{$prefix}btn-padding-y:     0.35rem;
-      --#{$prefix}btn-font-size:     1.25rem;
+      --#{$prefix}btn-padding-y:     0.25rem;
+      --#{$prefix}btn-font-size:     1.0625rem;
       --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
     }
   }
@@ -27,14 +27,14 @@
       font-size: 80%;
 
       + .btn-label {
-        margin-left: 3px;
+        margin-left: 0.25rem;
       }
     }
 
     @include media-breakpoint-down(md) {
       --#{$prefix}btn-padding-x: 0.5rem;
-      --#{$prefix}btn-padding-y: 0.2rem;
-      --#{$prefix}btn-font-size: 0.75rem;
+      --#{$prefix}btn-padding-y: 0.25rem;
+      --#{$prefix}btn-font-size: 0.6875rem;
       --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
     }
   }

data/frontend/css/core/_functions.scss

@@ -13,14 +13,6 @@
   @return $val;
 }
 
-@function strip-units($number) {
-  @return $number / ($number * 0 + 1);
-}
-
-@function em($rem) {
-  @return strip-units($rem) * 1em;
-}
-
 @function adjust-theme-hsl($name, $hue: null, $saturation: null, $lightness: null, $wrap: true) {
   $hsl:
     adjust-css-value(var(--#{$name}-h), $hue)

data/frontend/css/core/_theme.scss

@@ -30,6 +30,9 @@ $theme-colors: (
     --#{$prefix}#{$color}-border-subtle: #{adjust-theme-hsl($color, $lightness: 60%)};
   }
 
+  --theme-texture: url(../images/bright-squares.png);
+  --theme-gradient: #{linear-gradient(rgba(white, 0.05), rgba(black, 0.05))};
+
   --#{$prefix}link-color: var(--primary);
   --#{$prefix}link-color-rgb: var(--primary-rgb);
   --#{$prefix}link-color-hsl: var(--primary-hsl);

data/frontend/css/core/_typography.scss

@@ -1,7 +1,3 @@
-html {
-  font-size: 14px;
-}
-
 body {
   @include font-smoothing;
 }
@@ -14,6 +10,15 @@ img {
   max-width: 100%;
 }
 
+.error-iframe {
+  display: block;
+  width: 100%;
+  border: 0;
+  flex: 1;
+  min-height: 60vh;
+  max-height: 75vh;
+}
+
 .empty, .blank {
   font-style: italic;
   opacity: 0.5;
@@ -28,12 +33,7 @@ img {
 }
 
 .main-content-header {
-  h1, .h1 { font-size: $h1-font-size * $header-font-size-scale; }
-  h2, .h2 { font-size: $h2-font-size * $header-font-size-scale; }
-  h3, .h3 { font-size: $h3-font-size * $header-font-size-scale; }
-  h4, .h4 { font-size: $h4-font-size * $header-font-size-scale; }
-  h5, .h5 { font-size: $h5-font-size * $header-font-size-scale; }
-  h6, .h6 { font-size: $h6-font-size * $header-font-size-scale; }
+  font-size: 1rem * $header-font-size-scale;
 }
 
 .main-content-sidebar {
@@ -42,20 +42,13 @@ img {
   h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
     border-bottom: $headings-border;
-    padding-bottom: 0.325rem;
+    padding-bottom: 0.275rem;
 
     &:not(:first-child) {
-      margin-top: 1.75rem;
+      margin-top: 1.5rem;
     }
   }
 
-  h1, .h1 { font-size: $h1-font-size * $sidebar-font-size-scale; }
-  h2, .h2 { font-size: $h2-font-size * $sidebar-font-size-scale; }
-  h3, .h3 { font-size: $h3-font-size * $sidebar-font-size-scale; }
-  h4, .h4 { font-size: $h4-font-size * $sidebar-font-size-scale; }
-  h5, .h5 { font-size: $h5-font-size * $sidebar-font-size-scale; }
-  h6, .h6 { font-size: $h6-font-size * $sidebar-font-size-scale; }
-
   .card-header,
   .card-body,
   .card-footer {

data/frontend/css/index.scss

@@ -26,7 +26,8 @@
 @import "layout/footer";
 @import "layout/sidebar";
 @import "layout/navigation";
-@import "layout/content";
+@import "layout/content-header";
+@import "layout/main-content";
 
 // Components
 @import "components/alerts";
@@ -38,6 +39,7 @@
 @import "components/datepicker";
 @import "components/dropdown";
 @import "components/forms";
+@import "components/grid";
 @import "components/media-grid";
 @import "components/modal";
 @import "components/pagination";

data/frontend/css/layout/_base.scss

@@ -1,5 +1,5 @@
 html, body {
-  min-height: 100vh;
+  min-height: 100dvh;
   height: 100%;
 }
 
@@ -8,7 +8,6 @@ html {
 }
 
 body {
-  display: flex;
   overflow: hidden;
 }
 
@@ -22,7 +21,10 @@ body {
   overflow: hidden;
 
   width: 100%;
+  height: 100%;
+
   min-width: 0;
+  min-height: 100dvh;
 }
 
 .app-container {

data/frontend/css/layout/_content-header.scss

@@ -0,0 +1,71 @@
+.content-header {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-areas: "title toolbars"
+                       "breadcrumbs toolbars";
+  align-items: start;
+
+  background: $content-header-bg;
+  padding: 0.875rem 1.25rem;
+
+  @include media-breakpoint-down(md) {
+    padding: 0.625rem;
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-areas: "title toolbars"
+                         "breadcrumbs breadcrumbs";
+  }
+}
+
+.content-header-title {
+  grid-area: title;
+
+  margin: 0.25rem 0 1.125rem;
+
+  @include media-breakpoint-down(md) {
+    margin-top: 0.125rem;
+  }
+
+  h1 {
+    font-size: 2.125rem;
+    font-weight: 200;
+
+    margin: 0;
+
+    @include media-breakpoint-down(md) {
+      font-size: 2rem;
+    }
+
+    @include media-breakpoint-down(md) {
+      font-size: 1.75rem;
+    }
+  }
+}
+
+.content-header-toolbars {
+  grid-area: toolbars;
+
+  display: grid;
+  gap: 0.5rem;
+
+  .btn {
+    white-space: nowrap;
+  }
+
+  .btn-toolbar {
+    flex-direction: row-reverse;
+  }
+
+  @include media-breakpoint-down(md) {
+    gap: 0.25rem;
+  }
+}
+
+.content-header-breadcrumbs {
+  grid-area: breadcrumbs;
+
+  .breadcrumb {
+    margin: 0;
+  }
+}

data/frontend/css/layout/_footer.scss

@@ -4,16 +4,14 @@
   background: $footer-bg;
   color: $footer-color;
 
-  padding: 0.5rem 1.4rem;
-  font-size: 0.75rem;
+  padding: $footer-padding;
+  font-size: 0.625rem;
 
   display: flex;
   justify-content: space-between;
-}
 
-@include media-breakpoint-down(md) {
-  .app-footer {
-    padding-left: 10px;
-    padding-right: 10px;
+  @include media-breakpoint-down(md) {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
   }
 }

data/frontend/css/layout/_main-content.scss

@@ -0,0 +1,107 @@
+.main-content-area {
+  --content-area-margin: 1.25rem;
+  --content-area-padding: 1.25rem;
+
+  --content-area-sidebar-width: #{$content-sidebar-width};
+  --content-area-sidebar-bg: #{$content-sidebar-bg};
+
+  --content-area-header-padding: 0.625rem 1.125rem;
+  --content-area-header-bg: #{$main-content-header-bg};
+  --content-area-header-border: #{$main-content-header-border};
+
+  --content-area-footer-padding: 0.625rem 1.125rem;
+  --content-area-footer-bg: #{$main-content-footer-bg};
+  --content-area-footer-border: #{$main-content-footer-border};
+
+  margin: var(--content-area-margin);
+  scroll-margin: var(--content-area-margin);
+}
+
+.main-content-container {
+  background: white;
+  display: flex;
+}
+
+.main-content,
+.main-content-sidebar {
+  padding: var(--content-area-padding);
+}
+
+.main-content {
+  // Allow nesting of tab panes directly within
+  @extend .tab-content;
+
+  flex: 1;
+  min-width: 0;
+}
+
+.main-content-header,
+.main-content-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.main-content-header {
+  margin: calc(var(--content-area-padding) * -1) calc(var(--content-area-padding) * -1) var(--content-area-padding) !important;
+  padding: var(--content-area-header-padding);
+  background: var(--content-area-header-bg);
+  border-bottom: var(--content-area-header-border)
+}
+
+.main-content-footer {
+  margin: var(--content-area-padding) calc(var(--content-area-padding) * -1) calc(var(--content-area-padding) * -1) !important;
+  padding: var(--content-area-footer-padding);
+  background: var(--content-area-footer-bg);
+  border-top: var(--content-area-footer-border);
+}
+
+.main-content,
+.main-content-sidebar,
+.tab-pane {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.main-content-sidebar {
+  background: var(--content-area-sidebar-bg);
+  flex: 0 0 var(--content-area-sidebar-width);
+  max-width: var(--content-area-sidebar-width);
+}
+
+.utilities {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 0.75rem;
+}
+
+@include media-breakpoint-down(lg) {
+  .main-content-container {
+    flex-direction: column;
+  }
+
+  .main-content-sidebar {
+    flex-basis: 0;
+    max-width: none;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .main-content-area {
+    --content-area-margin: 0.625rem;
+    --content-area-padding: 0.875rem;
+
+    --content-area-header-padding: 0.625rem 0.875rem;
+    --content-area-footer-padding: 0.625rem 0.875rem;
+  }
+
+  .main-content-header,
+  .main-content-footer {
+    flex-direction: column;
+    align-items: center;
+  }
+}