trestle 0.8.13 → 0.9.0

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

@@ -1,6 +1,6 @@
 <div class="modal-header">
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title"><%= content_for(:title) %></h4>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 </div>
 
 <div class="modal-flash">

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

@@ -1,14 +1,14 @@
-<% if tabs.size > 1 || render_sidebar_as_tab? -%>
+<% if tabs.any? || render_sidebar_as_tab? -%>
   <ul class="nav nav-tabs">
     <% tabs.each do |name, tab| %>
-      <li<% if name == tabs.keys.first %> class="active"<% end %>>
-        <%= link_to tab.label, "##{tab.id(("modal" if dialog_request?))}", role: "tab", data: { toggle: "tab" } %>
+      <li class="nav-item">
+        <%= link_to tab.label, "##{tab.id(("modal" if dialog_request?))}", class: ["nav-link", ("active" if name == tabs.keys.first)], role: "tab", data: { toggle: "tab" } %>
       </li>
     <% end %>
 
     <% if render_sidebar_as_tab? %>
-      <li class="pull-right">
-        <%= link_to icon("fa fa-list-alt"), "#tab-sidebar", role: "tab", data: { toggle: "tab" } %>
+      <li class="nav-item align-right">
+        <%= link_to icon("fa fa-list-alt"), "#tab-sidebar", class: "nav-link", role: "tab", data: { toggle: "tab" } %>
       </li>
     <% end %>
   </ul>

data/app/views/trestle/flash/_flash.html.erb

@@ -1,7 +1,7 @@
 <% if flash[:message] -%>
-  <%= render "trestle/flash/alert", html_class: "alert-success", icon: icon("alert-icon ion-ios-checkmark-outline"), alert: normalize_flash_alert(flash[:message]) %>
+  <%= render "trestle/flash/alert", html_class: "alert-success", icon: icon("alert-icon far fa-check-circle"), alert: normalize_flash_alert(flash[:message]) %>
 <% elsif flash[:error] -%>
-  <%= render layout: "trestle/flash/alert", locals: { html_class: "alert-danger", icon: icon("alert-icon ion-ios-close-outline"), alert: normalize_flash_alert(flash[:error]) } do %>
+  <%= render layout: "trestle/flash/alert", locals: { html_class: "alert-danger", icon: icon("alert-icon far fa-times-circle"), alert: normalize_flash_alert(flash[:error]) } do %>
     <%= render "trestle/flash/debug" if debug_form_errors? %>
   <% end %>
 <% end -%>

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

@@ -1,4 +1,4 @@
-<ul class="scopes pull-left">
+<ul class="scopes">
   <% admin.scopes.each do |name, scope| %>
     <%= content_tag(:li, class: ("active" if scope.active?(params))) do %>
       <%= link_to persistent_params.merge(scope: (name unless scope.active?(params))) do %>

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

@@ -1,7 +1,7 @@
 <% content_for(:title, admin.t("titles.index", default: "Listing %{pluralized_model_name}")) %>
 
 <% toolbar(:primary) do |t| %>
-  <%= t.link admin.t("buttons.new", default: "New %{model_name}"), action: :new, icon: "fa fa-plus", class: "btn-new-resource" if admin.actions.include?(:new) %>
+  <%= t.link admin.t("buttons.new", default: "New %{model_name}"), action: :new, style: :light, icon: "fa fa-plus", class: "btn-new-resource" if admin.actions.include?(:new) %>
 <% end %>
 
 <% content_for(:utilities) do %>

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

@@ -1,13 +1,10 @@
-<aside class="app-sidebar">
+<aside class="app-sidebar navbar-expand-md" id="app-sidebar">
   <header class="app-sidebar-header">
-    <button class="navbar-toggle">
-      <span class="sr-only"><%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
+    <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>">
+      <span class="navbar-toggler-icon"></span>
     </button>
 
-    <%= link_to Trestle.config.root, class: "navbar-brand" do %>
+    <%= link_to Trestle.config.root, class: "app-sidebar-title" do %>
       <%= hook("view.title") { render "trestle/shared/title" } %>
     <% end %>
   </header>
@@ -27,7 +24,7 @@
                 <%= icon("nav-icon", item.icon) %>
                 <span class="nav-label"><%= item.label %></span>
 
-                <%= content_tag(:span, item.badge.text, class: ["nav-badge", item.badge.html_class]) if item.badge? %>
+                <%= content_tag(:span, item.badge.text, class: ["badge", item.badge.html_class]) if item.badge? %>
               <% end %>
             </li>
           <% end %>

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

@@ -1,14 +1,14 @@
 <% if Trestle.config.site_logo %>
   <% if Trestle.config.site_logo_small %>
-    <%= image_tag(Trestle.config.site_logo, class: "visible-xs-inline visible-lg-inline", alt: Trestle.config.site_title) %>
-    <%= image_tag(Trestle.config.site_logo_small, class: "visible-sm-inline visible-md-inline", alt: Trestle.config.site_title) %>
+    <%= image_tag(Trestle.config.site_logo, class: "title-large", alt: Trestle.config.site_title) %>
+    <%= image_tag(Trestle.config.site_logo_small, class: "title-small", alt: Trestle.config.site_title) %>
   <% else %>
     <%= image_tag(Trestle.config.site_logo) %>
   <% end %>
 <% elsif Trestle.config.site_logo_small %>
   <%= image_tag(Trestle.config.site_logo_small, alt: "") %>
-  <span class="visible-xs-inline visible-lg-inline"><%= Trestle.config.site_title %></span>
+  <span class="title-large"><%= Trestle.config.site_title %></span>
 <% else %>
-  <span class="visible-xs-inline visible-lg-inline"><%= Trestle.config.site_title %></span>
-  <span class="visible-sm-inline visible-md-inline"><%= Trestle.config.site_title.split(/ /).map(&:first).first(3).join %></span>
+  <span class="title-large"><%= Trestle.config.site_title %></span>
+  <span class="title-small"><%= Trestle.config.site_title.split(/ /).map(&:first).first(3).join %></span>
 <% end %>

data/config/locales/en.yml

@@ -34,6 +34,10 @@ en:
       delete: "Delete"
       cancel: "Cancel"
 
+    file:
+      choose_file: "Choose file..."
+      browse: "Browse"
+
   admin:
     titles:
       index: "Listing %{pluralized_model_name}"

data/frontend/css/_support.scss

@@ -0,0 +1 @@
+@import "./support/webpack";

data/frontend/css/components/_alerts.scss

@@ -0,0 +1,113 @@
+.alert {
+  display: flex;
+  align-items: center;
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: 2px;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  a {
+    color: white;
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding: ($alert-padding-y * 0.75) ($alert-padding-x * 0.75);
+
+    h3 {
+      font-size: 1.25rem;
+    }
+
+    p {
+      font-size: 0.85rem;
+    }
+  }
+}
+
+.alert-icon {
+  margin-right: $alert-padding-x;
+  font-size: 40px;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: $alert-padding-x * 0.25;
+    margin-right: $alert-padding-x * 0.75;
+
+    font-size: 32px;
+  }
+}
+
+.alert-dismissable {
+  position: relative;
+
+  .close {
+    position: absolute;
+    top: 0.75rem;
+    right: $alert-padding-x;
+
+    color: white;
+    opacity: 0.5;
+
+    &:hover, &:focus {
+      color: inherit;
+      opacity: 0.75;
+    }
+
+    @include media-breakpoint-down(sm) {
+      top: 0.375rem;
+      right: $alert-padding-x * 0.75;
+    }
+  }
+}
+
+
+// Alert colors
+
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
+  background: $background;
+  border-color: $border;
+
+  a {
+    &:hover, &:focus {
+      color: mix($color, $background, 80%);
+    }
+  }
+}
+
+.alert-success {
+  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-color);
+}
+
+.alert-danger {
+  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-color);
+}
+
+
+// Debug errors
+
+.toggle-debug-errors {
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &:after {
+    @include icon-fa($fa-var-caret-down);
+    font-size: 0.75rem;
+    margin-left: 5px;
+  }
+}
+
+.debug-errors {
+  ul {
+    list-style: none;
+    margin: 5px 0 0 0;
+    padding: 0 0 0 5px;
+    border-left: 4px solid rgba(white, 0.25);
+  }
+}

data/{app/assets/stylesheets/trestle → frontend/css}/components/_avatar.scss

@@ -11,8 +11,10 @@
 
   img {
     display: block;
+
     width: 100%;
     height: 100%;
+
     object-fit: cover;
     border-radius: 50%;
 
@@ -26,6 +28,7 @@
     bottom: 0;
     left: 0;
     right: 0;
+
     border-radius: 50%;
 
     color: white;
@@ -34,7 +37,7 @@
     align-items: center;
     justify-content: center;
 
-    font-size: 11px;
+    font-size: 0.8rem;
     font-weight: 500;
   }
 }

data/frontend/css/components/_background.scss

@@ -0,0 +1,48 @@
+%textured-bg {
+  background-image: url(../images/bright-squares.png), linear-gradient(rgba(white, 0.05), rgba(black, 0.05));
+  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);
+}
+
+.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);
+}
+
+
+.error-bg {
+  @extend %textured-bg;
+  background-color: $error-bg;
+}

data/frontend/css/components/_breadcrumbs.scss

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

data/{app/assets/stylesheets/trestle → frontend/css}/components/_buttons.scss

@@ -1,3 +1,52 @@
+.btn {
+  border-width: 0;
+  box-shadow: none;
+
+  &.loading {
+    &::before {
+      @include icon-fa($fa-var-spinner);
+      @extend .fa-spin;
+      margin-right: 10px;
+    }
+  }
+
+  > i {
+    font-size: 90%;
+
+    + .btn-label {
+      margin-left: 5px;
+    }
+  }
+}
+
+
+// Alternative delete button (no background color until hover)
+
+.btn-delete {
+  color: theme-color("danger");
+
+  &:hover, &:focus {
+    color: color-yiq(theme-color("danger"));
+    background: theme-color("danger");
+  }
+}
+
+
+// New resource button does not show label by default
+
+.btn-new-resource {
+  > i {
+    font-size: 100%;
+  }
+
+  .btn-label {
+    @include sr-only;
+  }
+}
+
+
+// Button icon/label visibility
+
 @mixin button-child-visible($prefix, $selector) {
   &.#{$prefix}-visible-xs,
   &.#{$prefix}-visible-sm,
@@ -7,28 +56,28 @@
   }
 
   &.#{$prefix}-visible-xs {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-only(xs) {
       #{$selector} { display: inline-block; }
       @content;
     }
   }
 
   &.#{$prefix}-visible-sm {
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include media-breakpoint-only(sm) {
       #{$selector} { display: inline-block; }
       @content;
     }
   }
 
   &.#{$prefix}-visible-md {
-    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @include media-breakpoint-only(md) {
       #{$selector} { display: inline-block; }
       @content;
     }
   }
 
   &.#{$prefix}-visible-lg {
-    @media (min-width: $screen-lg-min) {
+    @include media-breakpoint-up(lg) {
       #{$selector} { display: inline-block; }
       @content;
     }
@@ -37,28 +86,28 @@
 
 @mixin button-child-hidden($prefix, $selector) {
   &.#{$prefix}-hidden-xs {
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-only(xs) {
       #{$selector} { display: none; }
       @content;
     }
   }
 
   &.#{$prefix}-hidden-sm {
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    @include media-breakpoint-only(sm) {
       #{$selector} { display: none; }
       @content;
     }
   }
 
   &.#{$prefix}-hidden-md {
-    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+    @include media-breakpoint-only(md) {
       #{$selector} { display: none; }
       @content;
     }
   }
 
   &.#{$prefix}-hidden-lg {
-    @media (min-width: $screen-lg-min) {
+    @include media-breakpoint-up(lg) {
       #{$selector} { display: none; }
       @content;
     }
@@ -66,22 +115,6 @@
 }
 
 .btn {
-  border-width: 0;
-  box-shadow: none;
-
-  &.loading {
-    &::before {
-      @extend .fa;
-      @extend .fa-spin;
-      content: $fa-var-spinner;
-      margin-right: 10px;
-    }
-  }
-
-  > i + .btn-label {
-    margin-left: 5px;
-  }
-
   &.icon-visible-xs,
   &.icon-visible-sm,
   &.icon-visible-md,
@@ -106,18 +139,3 @@
   @include button-child-visible('label', '> .btn-label');
   @include button-child-hidden('label', '> .btn-label');
 }
-
-.btn-delete {
-  color: $btn-danger-bg;
-
-  &:hover, &:focus {
-    color: $btn-danger-color;
-    background: $btn-danger-bg;
-  }
-}
-
-.btn-new-resource {
-  .btn-label {
-    @include sr-only;
-  }
-}