trestle 0.9.8 → 0.10.0.pre

data/frontend/css/layout/_sidebar.scss

@@ -1,13 +1,20 @@
+@use "sass:math";
+
 .app-sidebar {
   background: $sidebar-bg;
 
   width: $sidebar-width;
+  padding: 0;
+
   flex-shrink: 0;
 
   position: relative;
 
   display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
+
+  align-items: stretch;
 }
 
 .app-sidebar-header {
@@ -19,24 +26,27 @@
   align-items: stretch;
 
   .navbar-toggler {
+    --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
+    --bs-navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
+    --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-border-color};
+
     outline: none;
 
     align-self: center;
 
-    margin-left: $grid-gutter-width / 2;
-    margin-right: $grid-gutter-width / 2;
+    margin-left: math.div($grid-gutter-width, 2);
+    margin-right: math.div($grid-gutter-width, 2);
 
-    background: $sidebar-mobile-toggle-bg;
-    border: $sidebar-mobile-toggle-border;
+    background: var(--bs-navbar-toggler-bg);
 
     &:hover, &:focus {
-      background: $sidebar-mobile-toggle-active-bg;
-      border: $sidebar-mobile-toggle-active-border;
+      --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
+      --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
     }
   }
 
   .navbar-toggler-icon {
-    background-image: $sidebar-mobile-toggle-icon-bg;
+    --bs-navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
   }
 }
 
@@ -122,7 +132,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   html, body {
     overflow-x: hidden;
   }
@@ -170,7 +180,7 @@
   }
 }
 
-@include media-breakpoint-between(md, lg) {
+@include media-breakpoint-between(md, xl) {
   .app-sidebar {
     width: $sidebar-width-collapsed;
 

data/frontend/css/support/_sprockets.scss

@@ -3,6 +3,7 @@
 // Mixins & functions
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/mixins";
+@import "trestle/frontend/css/core/functions";
 @import "trestle/frontend/css/core/mixins";
 
 // Variables
@@ -11,4 +12,5 @@
 @import "bootstrap/scss/variables";
 
 // Icon variables
+@import "@fortawesome/fontawesome-free/scss/functions";
 @import "@fortawesome/fontawesome-free/scss/variables";

data/frontend/css/support/_webpack.scss

@@ -3,6 +3,7 @@
 // Mixins & functions
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/mixins";
+@import "../core/functions";
 @import "../core/mixins";
 
 // Variables
@@ -11,4 +12,5 @@
 @import "~bootstrap/scss/variables";
 
 // Icon variables
+@import "~@fortawesome/fontawesome-free/scss/functions";
 @import "~@fortawesome/fontawesome-free/scss/variables";

data/frontend/css/variables/_bootstrap.scss

@@ -1,17 +1,13 @@
 // Color system
 
-$theme-colors: (
-  "primary": #4d6bb2,
-  "success": #7dc67d,
-  "info":    #7ccde5,
-  "warning": #f3bd71,
-  "danger":  #e17572,
-  "light":   #bbbbbb,
-  "dark":    #444444,
-
-  // Backwards compatibility
-  "default": #bbbbbb
-);
+$primary:   #4d6bb2;
+$secondary: #6c757d;
+$success:   #7dc67d;
+$info:      #7ccde5;
+$warning:   #f3bd71;
+$danger:    #e17572;
+$light:     #bbbbbb;
+$dark:      #444444;
 
 
 // Body
@@ -20,21 +16,36 @@ $body-bg:    #f3f3f3;
 $body-color: #333333;
 
 
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 5% !default;
-
-// Increase default color threshold for light vs dark
-$yiq-contrasted-threshold: 200;
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+$min-contrast-ratio: 1.7;
 
 // Enable box shadows
 $enable-shadows: true;
 
 // Decrease default grid spacing
-$grid-gutter-width: 10px * 2;
+$grid-gutter-width: 1.375rem;
+
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+
+// Components
+
+$box-shadow: soft-shadow(1rem, 1.5em, rgba(black, 0.25));
+$box-shadow-sm: soft-shadow(0.5rem, 0.75em, rgba(black, 0.075), $layers: 4);
 
 
 // Typography
 
+$link-decoration: none;
+
 $headings-font-weight:   400;
 $headings-margin-bottom: 1rem;
 
@@ -45,18 +56,25 @@ $h4-font-size: 1.25rem;
 $h5-font-size: 1.1rem;
 $h6-font-size: 1rem;
 
+$hr-color: rgba(black, 0.375);
 $hr-margin-y: 1.5rem;
 
 
 // Navs
 
+$nav-pills-link-active-bg: var(--primary);
+
 $nav-tabs-border-radius: 0;
 $nav-tabs-border-width:  0;
 
-$nav-tabs-link-bg:    #eeeeee;
-$nav-tabs-link-color: #555555;
+// (non-Bootstrap variables)
+$nav-tabs-link-bg:          #eeeeee;
+$nav-tabs-link-color:       #555555;
+$nav-tabs-link-hover-bg:    #eaeaea;
+$nav-tabs-link-hover-color: #505050;
+$nav-tabs-link-transition:  color .1s ease-in-out, background-color .1s ease-in-out;
 
-$nav-tabs-link-active-bg:  white;
+$nav-tabs-link-active-bg:    white;
 $nav-tabs-link-active-color: $body-color;
 
 
@@ -70,21 +88,20 @@ $navbar-dark-color:        rgba(white, 0.75);
 
 $breadcrumb-padding-y:     0;
 $breadcrumb-padding-x:     0;
-$breadcrumb-bg:            transparent;
 $breadcrumb-active-color:  #777777;
 $breadcrumb-divider-color: #cccccc;
 
 
 // Tables
 
-$table-cell-padding: 6px 8px;
-$table-accent-bg:    rgba(black, 0.02);
+$table-cell-padding-x: 0.625rem;
+$table-cell-padding-y: 0.375rem;
+
+$table-bg:           transparent;
+$table-striped-bg:   rgba(black, 0.02);
 $table-hover-bg:     rgba(black, 0.04);
 $table-border-color: rgba(black, 0.13);
 
-$table-bg-level:     -11;
-$table-border-level: -7;
-
 
 // Alerts
 
@@ -92,6 +109,23 @@ $alert-padding-y:     1.5rem;
 $alert-border-radius: 0.1rem;
 
 
+// Progress bars
+
+$progress-bar-bg: var(--primary);
+
+
+// List group
+
+$list-group-bg: white;
+$list-group-active-bg: var(--primary);
+
+
+// Close
+
+$btn-close-color: white;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
+
+
 // Badges
 
 $badge-padding-y: 0.35em;
@@ -105,40 +139,55 @@ $btn-padding-x-sm: 0.65rem;
 
 // Forms
 
-$input-border-color: #cccccc;
+$input-bg:           white;
 $input-disabled-bg:  #fafafa;
 
-$input-box-shadow: none;
+$input-border-color: #cccccc;
 
 $input-placeholder-color: #999999;
 
 $input-group-addon-bg: #eeeeee;
 
-$form-feedback-invalid-color: darken(theme-color("danger"), 20%);
+$form-feedback-invalid-color: shade-color($danger, 10%);
 
 $form-feedback-margin-top: 0.5rem;
 $form-feedback-font-size:  90%;
 
+$form-label-font-weight: bold;
+
 $form-text-color: #666666;
 
-$custom-control-indicator-size:         1.15rem;
-$custom-control-indicator-border-width: 1px;
+$form-check-input-width: 1.25em;
+$form-check-padding-start: $form-check-input-width + 0.6em;
 
-$custom-control-gutter: 0.6rem;
+$form-switch-width: 2.25em;
+$form-switch-focus-color: #aaaaaa;
 
-$custom-switch-width: 2.25rem;
-$custom-switch-indicator-size: calc(#{em($custom-control-indicator-size)} - #{$custom-control-indicator-border-width * 4}) !default;
+$form-select-padding-x-sm: 0.62rem;
+$form-select-padding-x-lg: 0.75rem;
 
 
 // Dropdowns
 
+$dropdown-bg:                white;
 $dropdown-spacer:            0.5rem;
-$dropdown-box-shadow:        0 3px 6px rgba(black, 0.175);
+$dropdown-box-shadow:        $box-shadow-sm;
 $dropdown-arrow-width:       7px;
 $dropdown-arrow-outer-width: $dropdown-arrow-width + 1px;
 $dropdown-header-color:      #111111;
 $dropdown-font-size:         0.9rem;
 
+$dropdown-link-active-bg:    var(--primary);
+
+$dropdown-dark-bg:           #222222;
+$dropdown-dark-divider-bg:   rgba(white, 0.15);
+
+
+// Pagination
+
+$pagination-bg:          white;
+$pagination-disabled-bg: white;
+
 
 // Cards
 
@@ -146,11 +195,29 @@ $card-bg:            rgba(white, 0.5);
 $card-border-radius: 0;
 
 
+// Accordion
+
+$accordion-bg:                white;
+$accordion-icon-active-color: #111111;
+
+
+// Tooltips
+
+$tooltip-color: white;
+
+
 // Popovers
 
-$popover-box-shadow:  $dropdown-box-shadow;
-$popover-arrow-width: $dropdown-arrow-width;
-$popover-font-size:   0.9rem;
+$popover-font-size:      0.9rem;
+$popover-box-shadow:     $dropdown-box-shadow;
+
+$popover-header-bg:      #f7f7f7;
+$popover-header-border:  #ebebeb;
+
+$popover-body-padding-y: 0.5rem;
+$popover-body-padding-x: 0.75rem;
+
+$popover-arrow-width:    $dropdown-arrow-width;
 
 
 // Modals
@@ -160,6 +227,7 @@ $modal-inner-padding:    1.5rem;
 $modal-header-padding-x: 1.5rem;
 $modal-header-padding-y: 1.05rem;
 
+$modal-content-bg: white;
 $modal-content-border-radius: 0;
 $modal-content-border-width:  0;
 
@@ -172,4 +240,30 @@ $modal-lg: 900px;
 
 // Select2 Bootstrap Theme
 
-$s2bs-btn-default-border: #cccccc;
+$s2bs5-border-color: #ced4da;
+
+$s2bs5-item-active-bg: tint-color($primary, 90%);
+
+$s2b25-clear-width: 0.5rem;
+$s2b25-clear-height: 0.5rem;
+$s2b25-clear-height-sm: 0.5rem;
+$s2b25-clear-height-lg: 1rem;
+
+$s2bs5-clear-icon:        str-replace($btn-close-bg, #{$btn-close-color}, #{shade-color($s2bs5-border-color, 50%)});
+$s2bs5-clear-bg:          transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height auto no-repeat;
+$s2bs5-clear-hover-bg:    $s2bs5-clear-bg;
+
+$s2bs5-clear-bg-sm:       transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-sm auto no-repeat;
+$s2bs5-clear-hover-bg-sm: $s2bs5-clear-bg-sm;
+
+$s2bs5-clear-bg-lg:       transparent escape-svg($s2bs5-clear-icon) center / $s2b25-clear-height-lg auto no-repeat;
+$s2bs5-clear-hover-bg-lg: $s2bs5-clear-bg-lg;
+
+$s2bs5-clear-tag-icon:    $btn-close-bg;
+$s2bs5-clear-tag-bg:      transparent escape-svg($s2bs5-clear-tag-icon) center / $s2b25-clear-height-sm auto no-repeat;
+
+$s2bs5-padding-x: 0.75rem;
+$s2bs5-padding-y: 0.375rem;
+
+$s2bs5-multi-item-padding-x: 0.375rem;
+$s2bs5-multi-item-padding-y: 0;

data/frontend/css/variables/_maps.scss

@@ -0,0 +1,15 @@
+// Update color maps
+
+$custom-colors: (
+  // Backwards compatibility
+  "default": #bbbbbb
+);
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+
+// Disable box shadows on form controls.
+// This is done after importing the default Bootstrap variables as a null value would be overwritten.
+
+$input-box-shadow: null;
+$form-select-box-shadow: null;

data/frontend/css/variables/_trestle.scss

@@ -1,7 +1,19 @@
 // Default theme
 
-$theme-bg: theme-color("primary");
-$error-bg: theme-color("danger");
+$theme-bg: $primary;
+$error-bg: $danger;
+
+$theme-bg-variations: (
+  default:  -20%,
+
+  dark:     -35%,
+  darker:   -50%,
+  darkest:  -65%,
+
+  light:    0,
+  lighter:  15%,
+  lightest: 30%
+);
 
 
 // Header
@@ -31,22 +43,24 @@ $sidebar-group-color: #595959;
 $sidebar-toggle-bg:    rgba(black, 0.25);
 $sidebar-toggle-color: rgba(white, 0.5);
 
-$sidebar-mobile-toggle-bg:     transparent;
-$sidebar-mobile-toggle-color:  white;
-$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15);
+$sidebar-mobile-toggle-color:   white;
+$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
 
-$sidebar-mobile-toggle-active-bg:     rgba($sidebar-mobile-toggle-color, 0.1);
-$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border;
+$sidebar-mobile-toggle-bg:           transparent;
+$sidebar-mobile-toggle-border-width: 1px;
+$sidebar-mobile-toggle-border-color: rgba($sidebar-mobile-toggle-color, 0.15);
+$sidebar-mobile-toggle-border:       $sidebar-mobile-toggle-border-width solid $sidebar-mobile-toggle-border-color;
 
-$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
+$sidebar-mobile-toggle-active-bg:           rgba($sidebar-mobile-toggle-color, 0.1);
+$sidebar-mobile-toggle-active-border-width: $sidebar-mobile-toggle-border-width;
+$sidebar-mobile-toggle-active-border-color: $sidebar-mobile-toggle-border-color;
+$sidebar-mobile-toggle-active-border:       $sidebar-mobile-toggle-border-width solid $sidebar-mobile-toggle-active-border-color;
 
 $sidebar-width:           250px;
 $sidebar-width-collapsed: 54px;
 
 $sidebar-transition-duration: 250ms;
 
-$sidebar-font-size-scale: 0.925;
-
 
 // Content
 
@@ -64,15 +78,26 @@ $main-content-footer-padding: 12px 20px;
 $main-content-footer-border:  1px solid rgba(black, 0.1);
 
 
+// Typography
+
+$headings-border: 1px solid rgba(black, 0.1);
+
+$header-font-size-scale: 0.925;
+$sidebar-font-size-scale: 0.925;
+
+$badge-hover-scale: -15%;
+
+
 // Tags
 
-$tag-color:        white;
-$tag-bg:           lighten(theme-color("primary"), 10%);
-$tag-border:       theme-color("primary");
+$tag-bg-scale:           -30%;
+$tag-border-scale:       0;
+
+$tag-hover-bg-scale:     -15%;
+$tag-hover-border-scale: 15%;
 
-$tag-hover-color:  white;
-$tag-hover-bg:     theme-color("primary");
-$tag-hover-border: darken(theme-color("primary"), 10%);
+$tag-spacing-x: 0.325rem;
+$tag-spacing-y: 0.25rem;
 
 
 // Scopes
@@ -101,25 +126,29 @@ $alert-danger-bg:      #de7471;
 $alert-danger-color:   white;
 $alert-danger-border:  #d85956;
 
-$alert-info-bg:        darken(theme-color("info"), 10%);
+$alert-info-bg:        shade-color($info, 10%);
 $alert-info-color:     white;
-$alert-info-border:    darken($alert-info-bg, 10%);
+$alert-info-border:    shade-color($alert-info-bg, 5%);
 
-$alert-warning-bg:     darken(theme-color("warning"), 5%);
+$alert-warning-bg:     shade-color($warning, 5%);
 $alert-warning-color:  white;
-$alert-warning-border: darken($alert-warning-bg, 5%);
+$alert-warning-border: shade-color($alert-warning-bg, 5%);
 
-$alert-light-bg:       theme-color("light");
+$alert-light-bg:       $light;
 $alert-light-color:    $body-color;
-$alert-light-border:   darken($alert-light-bg, 5%);
+$alert-light-border:   shade-color($alert-light-bg, 5%);
 
-$alert-dark-bg:        theme-color("dark");
+$alert-dark-bg:        $dark;
 $alert-dark-color:     white;
-$alert-dark-border:    darken($alert-dark-bg, 10%);
+$alert-dark-border:    shade-color($alert-dark-bg, 20%);
 
-$alert-primary-bg:     darken(theme-color("primary"), 5%);
+$alert-primary-bg:     shade-color($primary, 10%);
 $alert-primary-color:  white;
-$alert-primary-border: darken($alert-primary-bg, 10%);
+$alert-primary-border: shade-color($alert-primary-bg, 10%);
+
+$alert-secondary-bg:     shade-color($secondary, 10%);
+$alert-secondary-color:  white;
+$alert-secondary-border: shade-color($alert-secondary-bg, 10%);
 
 
 // Modals

data/frontend/js/controllers/application_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+import { fetchWithErrorHandling, fetchTurboStream } from '../core/fetch'
+
+export default class extends Controller {
+  fetch (url, options = {}) {
+    return fetchWithErrorHandling(url, options)
+  }
+
+  fetchTurboStream (url, options = {}) {
+    return fetchTurboStream(url, options)
+  }
+
+  get csrfToken () {
+    return document.querySelector("[name='csrf-token']").content
+  }
+}

data/frontend/js/controllers/checkbox_select_controller.js

@@ -0,0 +1,43 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static targets = ['checkbox', 'selectAll']
+
+  toggle () {
+    this.updateSelectAllState()
+  }
+
+  toggleAll () {
+    const isChecked = this.selectAllTarget.checked
+
+    this.checkboxTargets.forEach((checkbox) => {
+      checkbox.checked = isChecked
+    })
+  }
+
+  updateSelectAllState () {
+    const checked = this.checked
+    const checkboxes = this.checkboxTargets
+
+    if (checked.length === checkboxes.length) {
+      // All checked
+      this.selectAllTarget.indeterminate = false
+      this.selectAllTarget.checked = true
+    } else if (checked.length == 0) {
+      // None checked
+      this.selectAllTarget.indeterminate = false
+      this.selectAllTarget.checked = false
+    } else {
+      // Some checked
+      this.selectAllTarget.indeterminate = true
+    }
+  }
+
+  get checked () {
+    return this.checkboxTargets.filter((checkbox) => checkbox.checked)
+  }
+
+  get unchecked () {
+    return this.checkboxTargets.filter((checkbox) => !checkbox.checked)
+  }
+}