trestle 0.9.9 → 0.10.0.pre

data/app/views/trestle/resource/index.html.erb

@@ -9,17 +9,19 @@
 <% end if admin.scopes.any? %>
 
 <%= render layout: "layout" do %>
-  <% if hook?("resource.index.header") %>
-    <header class="main-content-header">
-      <%= hook("resource.index.header") %>
-    </header>
-  <% end %>
+  <%= index_turbo_frame do %>
+    <% if hook?("resource.index.header") %>
+      <header class="main-content-header">
+        <%= hook("resource.index.header") %>
+      </header>
+    <% end %>
 
-  <%= render "trestle/table/table", table: admin.table, collection: collection %>
+    <%= render "trestle/table/table", table: admin.table, collection: collection %>
 
-  <footer class="main-content-footer">
-    <%= hook("resource.index.footer") %>
+    <footer class="main-content-footer">
+      <%= hook("resource.index.footer") %>
 
-    <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
-  </footer>
+      <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
+    </footer>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/new.html.erb

@@ -7,6 +7,8 @@
   <%= t.save_or_dismiss(:create) %>
 <% end %>
 
-<%= trestle_form_for instance, url: admin.path(:create), method: :post do |f| %>
-  <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
+<%= resource_turbo_frame(instance) do %>
+  <%= trestle_form_for instance, url: admin.path(:create), method: :post do |f| %>
+    <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/show.html.erb

@@ -11,6 +11,8 @@
   <%= t.delete %>
 <% end %>
 
-<%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
-  <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
+<%= resource_turbo_frame(instance) do %>
+  <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
+    <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
+  <% end %>
 <% end %>

data/app/views/trestle/resource/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<turbo-stream action="replace" target="<%= dom_id(instance) %>">
+  <template>
+    <%= render template: "trestle/resource/show", formats: [:html] %>
+  </template>
+</turbo-stream>

data/app/views/trestle/shared/_sidebar.html.erb

@@ -1,6 +1,6 @@
-<aside class="app-sidebar navbar-expand-md" id="app-sidebar">
+<aside class="app-sidebar navbar navbar-expand-md" id="app-sidebar" data-controller="sidebar mobile-sidebar">
   <header class="app-sidebar-header">
-    <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>">
+    <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>" data-action="mobile-sidebar#toggle">
       <span class="navbar-toggler-icon"></span>
     </button>
 
@@ -9,19 +9,19 @@
     <% end %>
   </header>
 
-  <div class="app-sidebar-inner">
-    <nav class="app-nav">
+  <div class="app-sidebar-inner" data-sidebar-target="inner">
+    <nav class="app-nav" data-controller="navigation">
       <% Trestle.navigation(self).each do |group, items| %>
         <%= content_tag(:ul, class: ("collapsed" if group.present? && navigation_group_collapsed?(group)), data: { group: group.id }) do %>
           <% if group.present? %>
-            <li class="nav-header"><%= link_to group.label, "##{group.id}" %></li>
+            <li class="nav-header"><%= link_to group.label, "##{group.id}", data: { action: "navigation#toggle" } %></li>
           <% end %>
 
           <% items.each do |item| %>
             <%= content_tag(:li, class: ("active" if current_navigation_item?(item))) do %>
-              <%= link_to item.path, item.html_options do %>
+              <%= link_to item.path, item.html_options.merge(data: { controller: "navigation-tooltip" }) do %>
                 <%= icon("nav-icon", item.icon) %>
-                <span class="nav-label"><%= item.label %></span>
+                <span class="nav-label" data-navigation-tooltip-target="label"><%= item.label %></span>
 
                 <%= content_tag(:span, item.badge.text, class: ["badge", item.badge.html_class]) if item.badge? %>
               <% end %>
@@ -31,8 +31,8 @@
       <% end %>
     </nav>
 
-    <button class="toggle-sidebar">
-      <span class="sr-only"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
+    <button class="toggle-sidebar" data-action="sidebar#toggle">
+      <span class="visually-hidden"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
     </button>
   </div>
 </aside>

data/frontend/css/components/_alerts.scss

@@ -13,8 +13,16 @@
     margin-bottom: 0;
   }
 
+  code {
+    color: var(--#{$prefix}alert-color);
+  }
+
   a {
-    color: white;
+    color: var(--#{$prefix}alert-link-color, white);
+
+    &:hover, &:focus {
+      color: var(--#{$prefix}alert-link-hover-color, inherit);
+    }
   }
 
   @include media-breakpoint-down(sm) {
@@ -50,7 +58,7 @@
 .alert-dismissable {
   position: relative;
 
-  .close {
+  .btn-close {
     position: absolute;
     top: 0.75rem;
     right: $alert-padding-x;
@@ -74,21 +82,11 @@
 // Alert colors
 
 @mixin alert-variant($background, $border, $color) {
-  color: $color;
-  background: $background;
-  border-color: $border;
-
-  a {
-    color: $color;
-
-    &:hover, &:focus {
-      color: mix($color, $background, 80%);
-    }
-  }
-
-  code {
-    color: $color;
-  }
+  --#{$prefix}alert-color: #{$color};
+  --#{$prefix}alert-bg: #{$background};
+  --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{$color};
+  --#{$prefix}alert-link-hover-color: #{mix($color, $background, 80%)};
 }
 
 .alert-success {
@@ -119,6 +117,10 @@
   @include alert-variant($alert-primary-bg, $alert-primary-border, $alert-primary-color);
 }
 
+.alert-secondary {
+  @include alert-variant($alert-secondary-bg, $alert-secondary-border, $alert-secondary-color);
+}
+
 
 // Debug errors
 

data/frontend/css/components/_background.scss

@@ -3,45 +3,17 @@
   background-repeat: repeat, no-repeat;
 }
 
-
-.theme-bg {
-  @extend %textured-bg;
-  background-color: $theme-bg;
-}
-
-
-.theme-bg-dark {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval);
-}
-
-.theme-bg-darker {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval * 2);
+@each $variation, $lightness in $theme-bg-variations {
+  .theme-bg-#{$variation} {
+    @extend %textured-bg;
+    background-color: adjust-theme-hsl(primary, $lightness: $lightness);
+  }
 }
 
-.theme-bg-darkest {
-  @extend %textured-bg;
-  background-color: darken($theme-bg, $theme-color-interval * 3);
-}
-
-
-.theme-bg-light {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval);
-}
-
-.theme-bg-lighter {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval * 2);
-}
-
-.theme-bg-lightest {
-  @extend %textured-bg;
-  background-color: lighten($theme-bg, $theme-color-interval * 3);
+.theme-bg {
+  @extend .theme-bg-default;
 }
 
-
 .error-bg {
   @extend %textured-bg;
   background-color: $error-bg;

data/frontend/css/components/_badges.scss

@@ -0,0 +1,31 @@
+@mixin badge-variant(
+  $background,
+  $color: color-contrast($background),
+  $hover-background: shift-color($background, $badge-hover-scale)
+) {
+  --#{$prefix}badge-bg: #{$background};
+  --#{$prefix}badge-color: #{$color};
+  --#{$prefix}badge-hover-bg: #{$hover-background};
+}
+
+.badge {
+  background: var(--#{$prefix}badge-bg);
+
+  @at-root a#{&} {
+    &:hover,
+    &:focus {
+      color: var(--#{$prefix}badge-color);
+      background-color: var(--#{$prefix}badge-hover-bg);
+    }
+  }
+}
+
+.badge-pill {
+  border-radius: $border-radius-pill;
+}
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

data/frontend/css/components/_breadcrumbs.scss

@@ -10,7 +10,7 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     font-size: 0.75rem;
   }
 }
@@ -27,13 +27,13 @@
 
 // Reduce breadcrumb separator spacing on mobile
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .breadcrumb-item {
     + .breadcrumb-item {
-      padding-left: $breadcrumb-item-padding / 2;
+      padding-left: divide($breadcrumb-item-padding-x, 2);
 
       &::before {
-        padding-right: $breadcrumb-item-padding / 4;
+        padding-right: divide($breadcrumb-item-padding-x, 4);
       }
     }
   }

data/frontend/css/components/_buttons.scss

@@ -3,6 +3,7 @@
 
   &.loading {
     &::before {
+      display: inline-block;
       @include icon-fa($fa-var-spinner);
       @extend .fa-spin;
       margin-right: 10px;
@@ -22,11 +23,11 @@
 // Alternative delete button (no background color until hover)
 
 .btn-delete {
-  color: theme-color("danger");
+  color: $danger;
 
   &:hover, &:focus {
-    color: color-yiq(theme-color("danger"));
-    background: theme-color("danger");
+    color: color-contrast($danger);
+    background: $danger;
   }
 }
 
@@ -39,7 +40,7 @@
   }
 
   .btn-label {
-    @include sr-only;
+    @include visually-hidden;
   }
 }
 

data/frontend/css/components/_datepicker.scss

@@ -10,6 +10,8 @@
   text-align: center;
 
   color: #ccc;
+  background: none;
+  border: none;
 
   &:hover, &:focus {
     color: #aaa;
@@ -47,7 +49,7 @@
     margin-top: $dropdown-spacer;
 
     &::after {
-      border-bottom-color: mix($theme-bg, white, 95%);
+      border-bottom-color: tint-color($theme-bg, 95%);
     }
   }
 
@@ -55,7 +57,7 @@
     margin-top: -$dropdown-spacer;
   }
 
-  &.showTimeInput.hasTime {
+  &.hasTime {
     .flatpickr-time {
       border-radius: 0 0 5px 5px;
     }
@@ -66,7 +68,7 @@
       border-bottom-color: white;
     }
 
-    &.showTimeInput.hasTime {
+    &.hasTime {
       .flatpickr-time {
         border-top: 0;
         border-radius: 5px;
@@ -85,8 +87,10 @@
 
   .flatpickr-prev-month,
   .flatpickr-next-month {
+    line-height: 1;
+
     &:hover svg {
-      fill: lighten(theme-color("primary"), 15%);
+      fill: tint-color($primary, 50%);
     }
   }
 }
@@ -130,16 +134,16 @@ span.flatpickr-weekday {
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-  background: theme-color("primary");
-  border-color: theme-color("primary");
+  background: var(--primary);
+  border-color: var(--primary);
 }
 
 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-  box-shadow: -10px 0 0 theme-color("primary");
+  box-shadow: -10px 0 0 var(--primary);
 }
 
 .flatpickr-day.week.selected {
-  box-shadow: -5px 0 0 theme-color("primary"), 5px 0 0 theme-color("primary");
+  box-shadow: -5px 0 0 var(--primary), 5px 0 0 var(--primary);
 }

data/frontend/css/components/_dropdown.scss

@@ -20,10 +20,10 @@
 
     border-left: $dropdown-arrow-outer-width solid transparent;
     border-right: $dropdown-arrow-outer-width solid transparent;
-    border-bottom: $dropdown-arrow-outer-width solid white;
+    border-bottom: $dropdown-arrow-outer-width solid $dropdown-bg;
   }
 
-  &.dropdown-menu-right {
+  &.dropdown-menu-end {
     &:before {
       left: auto;
       right: 12px;
@@ -49,7 +49,27 @@
       bottom: -$dropdown-arrow-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-outer-width solid white;
+      border-top: $dropdown-arrow-outer-width solid $dropdown-bg;
+    }
+  }
+}
+
+.dropdown-menu-dark {
+  &:before {
+    border-bottom-color: $dropdown-dark-border-color;
+  }
+
+  &:after {
+    border-bottom-color: $dropdown-dark-bg;
+  }
+
+  .dropup & {
+    &:before {
+      border-top-color: $dropdown-dark-border-color;
+    }
+
+    &:after {
+      border-top-color: $dropdown-dark-bg;
     }
   }
 }

data/frontend/css/components/{_fields.scss → _forms.scss}

@@ -1,8 +1,9 @@
 .form-group {
   position: relative;
+  margin-bottom: 1rem;
 
   &.has-error {
-    > .control-label {
+    > .form-label {
       color: $form-feedback-invalid-color;
     }
 
@@ -32,7 +33,19 @@ ul.invalid-feedback {
   }
 }
 
-.control-label {
-  font-weight: bold;
+.form-label {
   display: block;
 }
+
+.control-label {
+  @extend .form-label;
+}
+
+// Prevent input zooming on mobile devices
+@include media-breakpoint-down(sm) {
+  .form-control,
+  .form-select,
+  .input-group-text {
+    font-size: 16px;
+  }
+}

data/frontend/css/components/_media-grid.scss

@@ -1,31 +1,33 @@
+@use "sass:math";
+
 .media-grid {
   @include list-unstyled;
-  @include make-row;
-
-  li {
-    position: relative;
-    width: 100%;
 
-    padding-right: $grid-gutter-width / 2;
-    padding-left: $grid-gutter-width / 2;
+  --media-grid-aspect-ratio: 4 / 3;
+  --media-grid-gap: #{$grid-gutter-width};
+  --media-grid-columns: 2;
 
-    @include make-col(6);
+  display: grid;
+  grid-template-columns: repeat(var(--media-grid-columns), 1fr);
+  gap: var(--media-grid-gap);
 
-    @include media-breakpoint-up(md) {
-      @include make-col(4);
-    }
+  @include media-breakpoint-up(md) {
+    --media-grid-columns: 3;
+  }
 
-    @include media-breakpoint-up(xl) {
-      @include make-col(3);
-    }
+  @include media-breakpoint-up(xl) {
+    --media-grid-columns: 4;
+  }
 
-    margin-bottom: 20px;
+  @include media-breakpoint-down(md) {
+    --media-grid-gap: #{math.div($grid-gutter-width, 2)};
   }
 
   figure {
     margin: 0;
+    position: relative;
 
-    @include aspect-ratio(4 / 3);
+    aspect-ratio: var(--media-grid-aspect-ratio);
 
     background: #eee;
     overflow: hidden;
@@ -34,7 +36,8 @@
     align-items: center;
 
     img {
-      @include fill-area;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
     }
   }
@@ -55,49 +58,54 @@
     }
   }
 
+  figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    background: rgba(black, 0.25);
+    color: white;
+
+    padding: 0.25rem 0.5rem;
+
+    display: flex;
+
+    font-size: 85%;
+    font-weight: normal;
+  }
+
   a {
     cursor: zoom-in;
   }
 }
 
 .media-grid-sm {
-  li {
-    @include make-col(4);
+  --media-grid-columns: 3;
 
-    @include media-breakpoint-up(md) {
-      @include make-col(3);
-    }
+  @include media-breakpoint-up(md) {
+    --media-grid-columns: 4;
+  }
 
-    @include media-breakpoint-up(lg) {
-      @include make-col(2);
-    }
+  @include media-breakpoint-up(lg) {
+    --media-grid-columns: 6;
   }
 }
 
 .media-grid-lg {
-  li {
-    @include make-col(12);
+  --media-grid-columns: 1;
 
-    @include media-breakpoint-up(sm) {
-      @include make-col(6);
-    }
+  @include media-breakpoint-up(sm) {
+    --media-grid-columns: 2;
+  }
 
-    @include media-breakpoint-up(lg) {
-      @include make-col(4);
-    }
+  @include media-breakpoint-up(lg) {
+    --media-grid-columns: 3;
   }
 }
 
-@include media-breakpoint-down(sm) {
-  .media-grid {
-    margin-left: -5px;
-    margin-right: -5px;
+.media-grid-auto {
+  --media-grid-item-size: 240px;
 
-    li {
-      padding-left: 5px;
-      padding-right: 5px;
-
-      margin-bottom: 10px;
-    }
-  }
+  grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
 }

data/frontend/css/components/_modal.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .modal {
   &.loading {
     .modal-content {
@@ -17,18 +19,23 @@
     }
   }
 
-  &.error {
+  &.error-modal {
     .modal-header {
       background-color: $error-bg;
     }
+
+    .modal-body {
+      padding: 0;
+    }
   }
 
+  &.show:not(:last-child),
   &.background {
+    z-index: $zindex-modal-backdrop - 1;
     overflow-y: hidden;
 
     .modal-dialog {
       transform: scale(0.9);
-      opacity: 0.75;
     }
   }
 }
@@ -96,8 +103,8 @@
     border-radius: 0;
     border-width: 0 0 1px 0;
 
-    padding-top: $alert-padding-y / 2;
-    padding-bottom: $alert-padding-y / 2;
+    padding-top: math.div($alert-padding-y, 2);
+    padding-bottom: math.div($alert-padding-y, 2);
 
     .alert-icon {
       font-size: 36px;
@@ -113,3 +120,25 @@
     }
   }
 }
+
+.modal-backdrop {
+  &.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:after {
+      @include icon-fa($fa-var-spinner);
+      @extend .fa-spin;
+
+      font-size: 5rem;
+
+      color: white;
+      opacity: 0.25;
+    }
+  }
+
+  &.show + &.show {
+    opacity: 0;
+  }
+}

data/frontend/css/components/_pagination.scss

@@ -23,7 +23,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
   .pagination-container {
     margin-right: auto;
 

data/frontend/css/components/_photoswipe.scss

@@ -0,0 +1,8 @@
+.pswp__content {
+  iframe,
+  video {
+    pointer-events: auto;
+    width: 100%;
+    height: 100%;
+  }
+}