trestle 0.10.0.pre → 0.10.0.pre2

data/app/controllers/concerns/trestle/resource/controller/actions.rb

@@ -14,7 +14,7 @@ module Trestle
         def new
           respond_to do |format|
             format.html
-            format.turbo_stream { render turbo_stream: turbo_stream_modal }
+            format.turbo_stream { render turbo_stream: turbo_stream.modal }
             format.json { render json: instance }
 
             yield format if block_given?
@@ -56,7 +56,7 @@ module Trestle
           else
             respond_to do |format|
               format.html
-              format.turbo_stream { render turbo_stream: turbo_stream_modal } if modal_request?
+              format.turbo_stream { render turbo_stream: turbo_stream.modal } if modal_request?
               format.json { render json: instance }
 
               yield format if block_given?
@@ -75,7 +75,7 @@ module Trestle
           else
             respond_to do |format|
               format.html
-              format.turbo_stream { render turbo_stream: turbo_stream_modal } if modal_request?
+              format.turbo_stream { render turbo_stream: turbo_stream.modal } if modal_request?
               format.json { render json: instance }
 
               yield format if block_given?

data/app/controllers/trestle/application_controller.rb

@@ -9,5 +9,5 @@ class Trestle::ApplicationController < ActionController::Base
   include Trestle::Controller::Modal
   include Trestle::Controller::Title
   include Trestle::Controller::Toolbars
-  include Trestle::Controller::Turbo
+  include Trestle::Controller::TurboStream
 end

data/app/helpers/trestle/modal_helper.rb

@@ -1,10 +1,5 @@
 module Trestle
   module ModalHelper
-    def turbo_stream_modal(template: action_name)
-      template = render_to_string template: action_name, prefixes: _prefixes, formats: [:html], layout: "trestle/modal"
-      %(<turbo-stream action="modal"><template>#{template}</template></turbo-stream>).html_safe
-    end
-
     def modal_options!(options)
       modal_options.merge!(options)
     end

data/app/helpers/trestle/turbo/frame_helper.rb

@@ -0,0 +1,29 @@
+module Trestle
+  module Turbo
+    module FrameHelper
+      def index_turbo_frame(options={}, &block)
+        defaults = {
+          id: "index",
+          data: {
+            controller: "reloadable",
+            turbo_action: "advance"
+          }
+        }
+
+        content_tag("turbo-frame", defaults.merge(options), &block)
+      end
+
+      def resource_turbo_frame(instance, options={}, &block)
+        defaults = {
+          id: dom_id(instance),
+          target: ("_top" unless modal_request?),
+          data: {
+            controller: ("deprecated--init" if modal_request? || request.post? || turbo_frame_request?)
+          }
+        }
+
+        content_tag("turbo-frame", defaults.merge(options), &block)
+      end
+    end
+  end
+end

data/app/helpers/trestle/turbo/stream_helper.rb

@@ -0,0 +1,9 @@
+module Trestle
+  module Turbo
+    module StreamHelper
+      def turbo_stream
+        Trestle::Turbo::TagBuilder.new(self)
+      end
+    end
+  end
+end

data/app/helpers/trestle/turbo/tag_builder.rb

@@ -0,0 +1,21 @@
+module Trestle
+  module Turbo
+    class TagBuilder < ::Turbo::Streams::TagBuilder
+      def modal(template=nil)
+        turbo_stream_action_tag :modal, template: @view_context.render(template: template || @view_context.action_name, layout: "layouts/trestle/modal", prefixes: @view_context.controller._prefixes, formats: :html)
+      end
+
+      def close_modal(target)
+        turbo_stream_action_tag :closeModal, targets: target
+      end
+
+      def flash
+        turbo_stream_action_tag :flash, template: @view_context.render(partial: "trestle/flash/flash", formats: :html)
+      end
+
+      def reload
+        turbo_stream_action_tag :reload
+      end
+    end
+  end
+end

data/app/helpers/trestle/url_helper.rb

@@ -47,7 +47,7 @@ module Trestle
           # Determine link data options
           options[:data] ||= {}
 
-          if MODAL_ACTIONS.include?(action) && admin.form.modal?
+          if MODAL_ACTIONS.include?(action) && admin.respond_to?(:form) && admin.form.modal?
             options[:data][:controller] ||= "modal-trigger"
           else
             options[:data][:turbo_frame] = "_top"

data/app/views/layouts/trestle/admin.html.erb

@@ -51,6 +51,6 @@
       </div>
     </div>
 
-    <turbo-frame id="modal"></turbo-frame>
+    <turbo-frame id="modal" data-controller="modal-frame"></turbo-frame>
   <% end %>
 </html>

data/app/views/layouts/trestle/admin.turbo_stream.erb

@@ -1,11 +1,4 @@
 <%= yield %>
 
-<% unless modal_request? %>
-  <turbo-stream action="flash">
-    <template>
-      <%= render partial: "trestle/flash/flash", formats: [:html] %>
-    </template>
-  </turbo-stream>
-<% end %>
-
-<turbo-stream action="reload"></turbo-stream>
+<%= turbo_stream.flash unless modal_request? %>
+<%= turbo_stream.reload %>

data/app/views/trestle/application/_header.html.erb

@@ -1,16 +1,6 @@
 <header class="content-header">
   <div class="content-header-title">
     <h1><%= title %></h1>
-
-    <% unless local_assigns.fetch(:hide_breadcrumbs, false) %>
-    <ol class="breadcrumb">
-      <% breadcrumbs.each do |breadcrumb| %>
-        <li class="breadcrumb-item<% if breadcrumb == breadcrumbs.last %> active<% end %>">
-          <%= link_to breadcrumb.label, breadcrumb.path, data: { turbo_frame: "_top" } %>
-        </li>
-      <% end %>
-    </ol>
-    <% end %>
   </div>
 
   <div class="content-header-toolbars">
@@ -24,4 +14,16 @@
       <%= deprecated_toolbar(:secondary) %>
     </div>
   </div>
+
+  <% unless local_assigns.fetch(:hide_breadcrumbs, false) %>
+    <div class="content-header-breadcrumbs">
+      <ol class="breadcrumb">
+        <% breadcrumbs.each do |breadcrumb| %>
+          <li class="breadcrumb-item<% if breadcrumb == breadcrumbs.last %> active<% end %>">
+            <%= link_to breadcrumb.label, breadcrumb.path, data: { turbo_frame: "_top" } %>
+          </li>
+        <% end %>
+      </ol>
+    </div>
+  <% end %>
 </header>

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

@@ -1,5 +1 @@
-<turbo-stream action="replace" target="<%= dom_id(admin.build_instance({}, params)) %>">
-  <template>
-    <%= render template: instance.persisted? ? "trestle/resource/show" : "trestle/resource/new", formats: [:html] %>
-  </template>
-</turbo-stream>
+<%= turbo_stream.replace admin.build_instance({}, params), template: "trestle/resource/#{instance.persisted? ? "show" : "new"}" %>

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

@@ -1 +1 @@
-<turbo-stream action="closeModal" target="<%= dom_id(instance) %>"></turbo-stream>
+<%= turbo_stream.close_modal instance %>

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

@@ -5,10 +5,12 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.save_or_dismiss(:update) %>
+  <%= hook("edit.toolbar.primary", t) %>
 <% end %>
 
 <% toolbar(:secondary) do |t| %>
   <%= t.delete %>
+  <%= hook("edit.toolbar.secondary", t) %>
 <% end %>
 
 <%= resource_turbo_frame(instance) do %>

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

@@ -2,6 +2,11 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.new %>
+  <%= hook("index.toolbar.primary", t) %>
+<% end %>
+
+<% toolbar(:secondary) do |t| %>
+  <%= hook("index.toolbar.secondary", t) %>
 <% end %>
 
 <% content_for(:utilities) do %>

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

@@ -5,6 +5,11 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.save_or_dismiss(:create) %>
+  <%= hook("new.toolbar.primary", t) %>
+<% end %>
+
+<% toolbar(:secondary) do |t| %>
+  <%= hook("new.toolbar.secondary", t) %>
 <% end %>
 
 <%= resource_turbo_frame(instance) do %>

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

@@ -5,10 +5,12 @@
 
 <% toolbar(:primary) do |t| %>
   <%= t.save_or_dismiss(:update) %>
+  <%= hook("show.toolbar.primary", t) %>
 <% end %>
 
 <% toolbar(:secondary) do |t| %>
   <%= t.delete %>
+  <%= hook("show.toolbar.secondary", t) %>
 <% end %>
 
 <%= resource_turbo_frame(instance) do %>

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

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

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

@@ -14,11 +14,11 @@
       <% 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}", data: { action: "navigation#toggle" } %></li>
+            <li class="nav-header"><%= link_to content_tag(:span, 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 %>
+            <%= content_tag(:li, class: ["nav-item", ("active" if current_navigation_item?(item))]) do %>
               <%= link_to item.path, item.html_options.merge(data: { controller: "navigation-tooltip" }) do %>
                 <%= icon("nav-icon", item.icon) %>
                 <span class="nav-label" data-navigation-tooltip-target="label"><%= item.label %></span>

data/frontend/css/components/_alerts.scss

@@ -3,9 +3,7 @@
   align-items: center;
 
   h3 {
-    margin-top: 0;
-    margin-bottom: 2px;
-    font-size: 1.5rem;
+    margin-bottom: 0.125rem;
     font-weight: 600;
   }
 
@@ -25,33 +23,38 @@
     }
   }
 
+  @include media-breakpoint-down(md) {
+    --#{$prefix}alert-padding-y: 0.875rem;
+  }
+
   @include media-breakpoint-down(sm) {
-    padding: ($alert-padding-y * 0.75) ($alert-padding-x * 0.75);
+    --#{$prefix}alert-padding-x: 0.625rem;
+    --#{$prefix}alert-padding-y: 0.75rem;
 
     h3 {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
     }
 
     p {
-      font-size: 0.85rem;
+      font-size: 0.75rem;
     }
   }
 }
 
 .alert-icon {
-  margin-right: $alert-padding-x;
+  margin-right: var(--#{$prefix}alert-padding-x);
 
-  font-size: 40px;
-  width: 40px;
+  font-size: 2.375rem;
+  width: 2.375rem;
 
   text-align: center;
 
   @include media-breakpoint-down(sm) {
-    margin-left: $alert-padding-x * 0.25;
-    margin-right: $alert-padding-x * 0.75;
+    margin-left: calc(var(--#{$prefix}alert-padding-x) * 0.25);
+    margin-right: calc(var(--#{$prefix}alert-padding-x) * 0.75);
 
-    font-size: 32px;
-    width: 32px;
+    font-size: 2rem;
+    width: 2rem;
   }
 }
 
@@ -60,8 +63,8 @@
 
   .btn-close {
     position: absolute;
-    top: 0.75rem;
-    right: $alert-padding-x;
+    top: calc(var(--#{$prefix}alert-padding-y) * 0.5);
+    right: var(--#{$prefix}alert-padding-x);
 
     color: white;
     opacity: 0.5;
@@ -72,8 +75,7 @@
     }
 
     @include media-breakpoint-down(sm) {
-      top: 0.375rem;
-      right: $alert-padding-x * 0.75;
+      right: calc(var(--#{$prefix}alert-padding-x) * 0.5);
     }
   }
 }
@@ -132,15 +134,15 @@
   &:after {
     @include icon-fa($fa-var-caret-down);
     font-size: 0.75rem;
-    margin-left: 5px;
+    margin-left: 0.25rem;
   }
 }
 
 .debug-errors {
   ul {
     list-style: none;
-    margin: 5px 0 0 0;
-    padding: 0 0 0 5px;
+    margin: 0.25rem 0 0 0;
+    padding: 0 0 0 0.25rem;
     border-left: 4px solid rgba(white, 0.25);
   }
 }

data/frontend/css/components/_avatar.scss

@@ -1,11 +1,15 @@
 .avatar {
+  --avatar-bg: #ccc;
+  --avatar-size: 2.5rem;
+  --avatar-fallback-font-size: 0.75rem;
+
   display: inline-block;
   position: relative;
 
-  width: 40px;
-  height: 40px;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
 
-  background: #ccc;
+  background: var(--avatar-bg);
   border-radius: 50%;
   box-shadow: rgba(black, 0.25) 0 1px 0;
 
@@ -37,21 +41,17 @@
     align-items: center;
     justify-content: center;
 
-    font-size: 0.8rem;
+    font-size: var(--avatar-fallback-font-size);
     font-weight: 500;
   }
 }
 
 .avatar-sm {
-  width: 24px !important;
-  height: 24px !important;
+  --avatar-size: 1.5rem;
+  --avatar-fallback-font-size: 0.625rem;
 }
 
 .avatar-lg {
-  width: 64px !important;
-  height: 64px !important;
-
-  .avatar-fallback {
-    font-size: 1.5rem;
-  }
+  --avatar-size: 4rem;
+  --avatar-fallback-font-size: 1.5rem;
 }

data/frontend/css/components/_background.scss

@@ -1,5 +1,5 @@
 %textured-bg {
-  background-image: url(../images/bright-squares.png), linear-gradient(rgba(white, 0.05), rgba(black, 0.05));
+  background-image: var(--theme-texture), var(--theme-gradient);
   background-repeat: repeat, no-repeat;
 }
 

data/frontend/css/components/_breadcrumbs.scss

@@ -1,40 +1,19 @@
 .breadcrumb {
-  font-size: 0.85rem;
-
-  .active, .active a {
-    font-weight: normal;
-    color: $breadcrumb-active-color;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
+  --#{$prefix}breadcrumb-font-size: 0.75rem;
+  --#{$prefix}breadcrumb-item-padding-x: 0.35rem;
 
   @include media-breakpoint-down(md) {
-    font-size: 0.75rem;
+    --#{$prefix}breadcrumb-font-size: 0.625rem;
+    --#{$prefix}breadcrumb-item-padding-x: 0.25rem;
   }
 }
 
-// Fine-tune spacing between breadcrumb separators
-
 .breadcrumb-item {
-  + .breadcrumb-item {
-    &::before {
-      padding-right: 0.35rem;
-    }
+  a {
+    font-weight: normal;
   }
-}
-
-// Reduce breadcrumb separator spacing on mobile
-
-@include media-breakpoint-down(md) {
-  .breadcrumb-item {
-    + .breadcrumb-item {
-      padding-left: divide($breadcrumb-item-padding-x, 2);
 
-      &::before {
-        padding-right: divide($breadcrumb-item-padding-x, 4);
-      }
-    }
+  &.active a {
+    color: inherit;
   }
 }

data/frontend/css/components/_buttons.scss

@@ -6,7 +6,7 @@
       display: inline-block;
       @include icon-fa($fa-var-spinner);
       @extend .fa-spin;
-      margin-right: 10px;
+      margin-right: 0.625rem;
     }
   }
 
@@ -14,7 +14,7 @@
     font-size: 90%;
 
     + .btn-label {
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
   }
 }
@@ -126,7 +126,7 @@
 
   @include button-child-visible('icon', '> i') {
     > i + .btn-label {
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
   };
 

data/frontend/css/components/_datepicker.scss

@@ -4,9 +4,9 @@
   right: 0;
   z-index: 4;
 
-  width: 34px;
-  height: 34px;
-  line-height: 34px;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
   text-align: center;
 
   color: #ccc;

data/frontend/css/components/_dropdown.scss

@@ -7,31 +7,37 @@
 
   &:before {
     top: -$dropdown-arrow-outer-width;
-    left: 12px;
+    left: 0.75rem;
 
     border-left: $dropdown-arrow-width solid transparent;
     border-right: $dropdown-arrow-width solid transparent;
-    border-bottom: $dropdown-arrow-width solid $dropdown-border-color;
+    border-bottom: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
   }
 
   &:after {
     top: -$dropdown-arrow-width;
-    left: 11px;
+    left: 0.75rem;
+
+    margin-left: -1px;
+    margin-right: 0;
 
     border-left: $dropdown-arrow-outer-width solid transparent;
     border-right: $dropdown-arrow-outer-width solid transparent;
-    border-bottom: $dropdown-arrow-outer-width solid $dropdown-bg;
+    border-bottom: $dropdown-arrow-outer-width solid var(--#{$prefix}dropdown-bg);
   }
 
   &.dropdown-menu-end {
     &:before {
       left: auto;
-      right: 12px;
+      right: 0.75rem;
     }
 
     &:after {
       left: auto;
-      right: 11px;
+      right: 0.75rem;
+
+      margin-left: 0;
+      margin-right: -1px;
     }
   }
 
@@ -41,7 +47,7 @@
       bottom: -$dropdown-arrow-outer-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-width solid $dropdown-border-color;
+      border-top: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
     }
 
     &:after {
@@ -49,27 +55,13 @@
       bottom: -$dropdown-arrow-width;
 
       border-bottom: 0;
-      border-top: $dropdown-arrow-outer-width solid $dropdown-bg;
+      border-top: $dropdown-arrow-outer-width solid var(--bs-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;
-    }
+  @include media-breakpoint-down(md) {
+    --#{$prefix}dropdown-font-size: 0.75rem;
+    --#{$prefix}dropdown-padding-y: 0.375rem;
+    --#{$prefix}dropdown-item-padding-x: 0.75rem;
   }
 }

data/frontend/css/components/_forms.scss

@@ -1,6 +1,6 @@
 .form-group {
   position: relative;
-  margin-bottom: 1rem;
+  margin-bottom: 0.875rem;
 
   &.has-error {
     > .form-label {
@@ -21,14 +21,14 @@ ul.invalid-feedback {
 
 .form-text {
   color: $form-text-color;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
 
   @include media-breakpoint-up(sm) {
     &.floating {
       position: absolute;
       top: 0;
       right: 0;
-      margin: 2px 0;
+      margin: 0.125rem 0;
     }
   }
 }
@@ -46,6 +46,6 @@ ul.invalid-feedback {
   .form-control,
   .form-select,
   .input-group-text {
-    font-size: 16px;
+    font-size: 1rem;
   }
 }

data/frontend/css/components/_grid.scss

@@ -0,0 +1,29 @@
+.grid {
+  --grid-gap: var(--content-area-margin, 0);
+  --grid-column-count: 1;
+  --grid-column-min-width: 0;
+
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), minmax(var(--grid-column-min-width), 1fr));
+  gap: var(--grid-gap);
+
+  > .grid-col-full {
+    grid-column: 1 / -1;
+  }
+}
+
+@for $cols from 2 through 12 {
+  .grid-cols-#{$cols} {
+    --grid-column-count: #{$cols};
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    @for $cols from 2 through 12 {
+      .grid-cols-#{$breakpoint}-#{$cols} {
+        --grid-column-count: #{$cols};
+      }
+    }
+  }
+}

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

@@ -105,7 +105,7 @@
 }
 
 .media-grid-auto {
-  --media-grid-item-size: 240px;
+  --media-grid-item-size: 15rem;
 
   grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
 }