trestle 0.10.0.pre → 0.10.0

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;
+  }
+}

data/frontend/css/layout/_navigation.scss

@@ -1,24 +1,28 @@
 .app-nav {
   flex: 1;
-  padding: 10px 0;
+  padding: 0.625rem 0;
 
   &, a {
     color: $sidebar-link-color;
   }
 
   ul {
-    margin: 10px 0;
+    margin: 0.625rem 0;
     padding: 0;
     list-style: none;
   }
 
-  a {
-    display: block;
+  .nav-item a {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
 
     font-weight: normal;
-    font-size: 0.9rem;
+    font-size: 0.8125rem;
 
-    padding: 12px 18px;
+    padding: 0.75rem 1rem;
+
+    position: relative;
 
     &:hover, &:focus {
       color: $sidebar-link-color;
@@ -31,12 +35,31 @@
     }
   }
 
+  .nav-item.active a {
+    border-left: $sidebar-active-border solid var(--primary);
+    padding-left: calc(1rem - #{$sidebar-active-border});
+
+    background: $sidebar-active-bg;
+    color: white;
+  }
+
   .nav-icon {
-    display: inline-block;
-    text-align: center;
-    width: 18px;
-    margin-right: 8px;
-    vertical-align: 0;
+    flex-shrink: 0;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.25rem;
+  }
+
+  .nav-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    opacity: 1;
+    transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
   }
 
   .nav-header a {
@@ -47,39 +70,38 @@
     font-weight: bold;
     line-height: 1;
 
-    font-size: 11px;
-    padding: 8px 20px;
+    font-size: 0.6875rem;
+    padding: 0.5rem 1.125rem;
 
-    &::after {
-      @include icon-fa($fa-var-caret-down);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    white-space: nowrap;
 
-      float: right;
-      margin-top: 2px;
+    span {
+      opacity: 1;
+      transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
+    }
 
+    &::after {
+      @include icon-fa($fa-var-caret-down);
       opacity: 0.75;
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: none;
 
-      &::before, &::after {
-        opacity: 1 !important;
+      &::before,
+      &::after {
+        opacity: 1;
       }
     }
   }
 
-  .active a {
-    border-left: $sidebar-active-border solid var(--primary);
-    padding-left: 18px - $sidebar-active-border;
-
-    background: $sidebar-active-bg;
-    color: white;
-  }
-
   .badge {
-    float: right;
-    position: relative;
-    top: 1px;
+    margin-left: auto;
   }
 
   .collapsed {
@@ -98,17 +120,17 @@
 }
 
 @mixin collapsed-nav-header {
-  height: 0;
-  padding: 13px 15px 14px;
-  text-indent: -99999px;
+  span {
+    opacity: 0;
+  }
 
   &::after {
     display: none;
 
     position: absolute;
-    top: 4px;
+    top: 50%;
     left: 50%;
-    margin-left: -3px;
+    translate: -50% -5px;
 
     text-indent: 0;
   }
@@ -117,24 +139,42 @@
     content: "";
 
     position: absolute;
-    left: 15px;
-    right: 15px;
     top: 50%;
-    margin-top: -4px;
+    left: 1rem;
+    right: 1rem;
+    margin-top: -2px;
 
     border-bottom: 1px solid $sidebar-active-bg;
     opacity: 0.75;
   }
 }
 
+@mixin collapsed-nav-label {
+  opacity: 0;
+}
+
+@mixin collapsed-nav-badge {
+  text-indent: -99999px;
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  top: 0.625rem;
+  left: 2rem;
+}
+
 @include media-breakpoint-between(md, xl) {
   .nav-tooltip {
     display: block !important;
   }
 
   .app-nav {
-    .nav-label, .badge {
-      display: none;
+    .nav-label {
+      @include collapsed-nav-label;
+    }
+
+    .badge {
+      @include collapsed-nav-badge;
     }
 
     .nav-header a {
@@ -151,9 +191,9 @@
   .sidebar-expanded {
     .app-nav {
       .nav-header a {
-        height: auto;
-        padding: 8px 20px;
-        text-indent: 0;
+        span {
+          opacity: 1;
+        }
 
         &::before {
           display: none;
@@ -162,12 +202,21 @@
         &::after {
           display: block;
           position: static;
-          margin-left: 0;
+          translate: 0;
         }
       }
 
-      .nav-label  { display: inline; }
-      .badge  { display: block; }
+      .nav-label {
+        opacity: 1;
+      }
+
+      .badge {
+        position: static;
+        width: auto;
+        height: auto;
+        text-indent: 0;
+        padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+      }
     }
 
     .nav-tooltip {
@@ -179,8 +228,12 @@
 @include media-breakpoint-up(xl) {
   .sidebar-collapsed {
     .app-nav {
-      .nav-label, .badge {
-        display: none;
+      .nav-label {
+        @include collapsed-nav-label;
+      }
+
+      .badge {
+        @include collapsed-nav-badge;
       }
 
       .nav-header a {
@@ -199,3 +252,12 @@
     }
   }
 }
+
+@media (prefers-reduced-motion) {
+  .app-nav {
+    .nav-label,
+    .nav-header a span {
+      transition: none;
+    }
+  }
+}