trestle 0.8.4 → 0.8.11

data/app/assets/javascripts/trestle/core/_events.js

@@ -0,0 +1,39 @@
+// The ready function sets up a callback to run on each page load.
+//
+//     Trestle.ready(function() {
+//       ...
+//     });
+//
+Trestle.ready = function(callback) {
+  $(Trestle).on('load', callback);
+};
+
+// The init function sets up a callback to run on each page load, as well as when elements are added to the page
+// dynamically (e.g. via a modal). It is used to initialize dynamic elements such as date pickers, although it is
+// preferable if they can be set up using event delegation on the document element.
+//
+// The callback is triggered with the applicable root/container element as the second argument.
+//
+//     Trestle.init(function(e, root) {
+//       $(root).find('...');
+//     });
+//
+Trestle.init = function(callback) {
+  $(Trestle).on('init', callback);
+};
+
+// Initialize all elements within the document on page load.
+Trestle.ready(function() {
+  $(Trestle).trigger('init', document);
+});
+
+// Trigger the page load events.
+if (Trestle.turbolinks) {
+  $(document).on('turbolinks:load', function() {
+    $(Trestle).trigger("load");
+  });
+} else {
+  $(document).ready(function() {
+    $(Trestle).trigger("load");
+  });
+}

data/app/assets/javascripts/trestle/core/_l10n.js

@@ -0,0 +1,23 @@
+(function() {
+
+// Some of Flatpickr's locale names differ from Rails. This maps the Rails I18n locale to their Flatpickr equivalent.
+var FlatpickrLocaleConversions = { ca: "cat", el: "gr", nb: "no", vi: "vn" };
+
+// Sets up localization for Trestle and its dependencies, in particular Flatpickr.
+// This method accepts a list of locales in descending order of priority.
+//
+//     Trestle.localize('es-MX', 'es', 'en');
+//
+Trestle.localize = function() {
+  for (var i = 0; i < arguments.length; ++i) {
+    var locale = arguments[i];
+    var flatpickrLocale = FlatpickrLocaleConversions[locale] || locale;
+
+    if (flatpickr.l10ns[flatpickrLocale]) {
+      flatpickr.localize(flatpickr.l10ns[flatpickrLocale]);
+      break;
+    }
+  }
+};
+
+})();

data/app/assets/javascripts/trestle/core/_visit.js

@@ -0,0 +1,10 @@
+// The visit function is used to direct the user to the given URL. It is provided as an abstraction as the redirection
+// is handled differently depending on whether or not Turbolinks is enabled.
+//
+//     Trestle.visit("/admin/pages");
+//
+if (Trestle.turbolinks) {
+  Trestle.visit = function(url) { Turbolinks.visit(url); };
+} else {
+  Trestle.visit = function(url) { document.location = url; };
+}

data/app/assets/stylesheets/trestle/components/_alerts.scss

@@ -22,6 +22,10 @@
     margin-bottom: 0;
   }
 
+  a {
+    color: white;
+  }
+
   @include mobile {
     padding: 5px 10px;
 
@@ -57,3 +61,27 @@
     }
   }
 }
+
+.toggle-debug-errors {
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+
+  &:after {
+    @extend .ion;
+    content: $ionicon-var-chevron-down;
+    font-size: 10px;
+    margin-left: 5px;
+  }
+}
+
+.debug-errors {
+  overflow: hidden;
+
+  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/components/_avatar.scss

@@ -1,10 +1,11 @@
 .avatar {
   display: inline-block;
+  position: relative;
 
   width: 40px;
   height: 40px;
 
-  background: #fafafa;
+  background: #ccc;
   border-radius: 50%;
   box-shadow: rgba(black, 0.25) 0 1px 0;
 
@@ -14,5 +15,26 @@
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
+
+    position: relative;
+    z-index: 1;
+  }
+
+  .avatar-fallback {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 50%;
+
+    color: white;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 11px;
+    font-weight: 500;
   }
 }

data/app/assets/stylesheets/trestle/components/_breadcrumbs.scss

@@ -3,6 +3,14 @@
   background-color: transparent;
   font-size: 12px;
 
+  > li + li:before {
+    content: "/";
+
+    @include mobile {
+      padding: 0 2px;
+    }
+  }
+
   .active, .active a {
     font-weight: normal;
     color: $breadcrumb-active-color;
@@ -11,4 +19,8 @@
       text-decoration: none;
     }
   }
+
+  @include mobile {
+    font-size: 11px;
+  }
 }

data/app/assets/stylesheets/trestle/components/_buttons.scss

@@ -1,6 +1,110 @@
+@mixin button-child-visible($prefix, $selector) {
+  &.#{$prefix}-visible-xs,
+  &.#{$prefix}-visible-sm,
+  &.#{$prefix}-visible-md,
+  &.#{$prefix}-visible-lg {
+    #{$selector} { display: none; }
+  }
+
+  &.#{$prefix}-visible-xs {
+    @media (max-width: $screen-xs-max) {
+      #{$selector} { display: inline-block; }
+      @content;
+    }
+  }
+
+  &.#{$prefix}-visible-sm {
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      #{$selector} { display: inline-block; }
+      @content;
+    }
+  }
+
+  &.#{$prefix}-visible-md {
+    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+      #{$selector} { display: inline-block; }
+      @content;
+    }
+  }
+
+  &.#{$prefix}-visible-lg {
+    @media (min-width: $screen-lg-min) {
+      #{$selector} { display: inline-block; }
+      @content;
+    }
+  }
+}
+
+@mixin button-child-hidden($prefix, $selector) {
+  &.#{$prefix}-hidden-xs {
+    @media (max-width: $screen-xs-max) {
+      #{$selector} { display: none; }
+      @content;
+    }
+  }
+
+  &.#{$prefix}-hidden-sm {
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      #{$selector} { display: none; }
+      @content;
+    }
+  }
+
+  &.#{$prefix}-hidden-md {
+    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+      #{$selector} { display: none; }
+      @content;
+    }
+  }
+
+  &.#{$prefix}-hidden-lg {
+    @media (min-width: $screen-lg-min) {
+      #{$selector} { display: none; }
+      @content;
+    }
+  }
+}
+
 .btn {
-  border: none;
+  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,
+  &.icon-visible-lg {
+    > i + .btn-label {
+      margin-left: 0;
+    }
+  }
+
+  @include button-child-visible('icon', '> i') {
+    > i + .btn-label {
+      margin-left: 5px;
+    }
+  };
+
+  @include button-child-hidden('icon', '> i') {
+    > i + .btn-label {
+      margin-left: 0;
+    }
+  };
+
+  @include button-child-visible('label', '> .btn-label');
+  @include button-child-hidden('label', '> .btn-label');
 }
 
 .btn-delete {
@@ -11,3 +115,9 @@
     background: $btn-danger-bg;
   }
 }
+
+.btn-new-resource {
+  .btn-label {
+    @include sr-only;
+  }
+}

data/app/assets/stylesheets/trestle/components/_content.scss

@@ -1,38 +1,32 @@
 .content-header {
-  @extend .clearfix;
+  display: flex;
+  justify-content: space-between;
+
   background: $content-header-background;
-  padding: 5px 20px;
+  padding: 20px;
 
   h1 {
     font-weight: 300;
+    margin-top: 0;
   }
 
-  .btn-toolbar {
-    @extend .pull-right;
-    clear: right;
+  .breadcrumb {
+    margin-bottom: 0;
   }
 
-  .primary-toolbar {
-    margin-top: 16px;
+  .content-header-title {
+    margin: 5px 0;
+  }
 
-    .btn {
-      @extend .btn-lg;
-      font-size: 20px;
-      padding: 8px 16px;
-      border-radius: $border-radius-base;
-    }
+  .btn-toolbar {
+    text-align: right;
   }
 
   .secondary-toolbar {
     margin-top: 8px;
 
-    .btn {
-      font-size: 12px;
-      padding: 4px 10px;
-
-      i {
-        font-size: 11px;
-      }
+    @include mobile {
+      margin-top: 6px;
     }
   }
 }
@@ -59,6 +53,26 @@
   min-width: 0;
 }
 
+.main-content-header,
+.main-content-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.main-content-header {
+  margin: -20px -20px 20px !important;
+  padding: $main-content-header-padding;
+  background: $main-content-header-background;
+  border-bottom: $main-content-header-border;
+}
+
+.main-content-footer {
+  margin: 20px -20px -20px !important;
+  padding: $main-content-footer-padding;
+  background: $main-content-footer-background;
+  border-top: $main-content-footer-border;
+}
+
 .main-content,
 .main-content-sidebar,
 .tab-pane {
@@ -84,7 +98,7 @@
 
 @include mobile {
   .content-header {
-    padding: 0 10px;
+    padding: 10px;
   }
 
   .main-content-area {
@@ -105,4 +119,22 @@
   .main-content-sidebar {
     padding: 15px;
   }
+
+  .main-content-header,
+  .main-content-footer {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .main-content-header {
+    margin: -15px -15px 15px !important;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .main-content-footer {
+    margin: 15px -15px -15px !important;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
 }

data/app/assets/stylesheets/trestle/components/_datepicker.scss

@@ -1,3 +1,31 @@
+.clear-datepicker {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 4;
+
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+
+  color: #ccc;
+
+  &:hover, &:focus {
+    color: #aaa;
+  }
+
+  &::before {
+    @extend .fa;
+    content: $fa-var-times;
+  }
+
+  input[value=""] ~ &,
+  input:not([value]) ~ & {
+    display: none;
+  }
+}
+
 .flatpickr-calendar {
   background: $theme-bg;
 

data/app/assets/stylesheets/trestle/components/_fields.scss

@@ -1,3 +1,20 @@
+.form-group {
+  position: relative;
+}
+
+.help-block {
+  font-size: 13px;
+
+  @media (min-width: $screen-sm-min) {
+    &.floating {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 2px 0;
+    }
+  }
+}
+
 .select2-container--bootstrap {
   // This is required to ensure the select field is rendered at full width
   // within Bootstrap tabs that are hidden when the page is first loaded.

data/app/assets/stylesheets/trestle/components/_input-group.scss

@@ -2,10 +2,35 @@
 
 .input-group {
   display: flex;
+
+  .field_with_errors {
+    flex: 1;
+
+    .form-control {
+      border-radius: $input-border-radius;
+    }
+
+    &:not(:last-child) .form-control {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) .form-control {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
 
-.input-group-addon {
+.input-group-addon,
+.input-group-btn {
   width: auto;
   display: flex;
   align-items: center;
 }
+
+.input-group-btn {
+  > .btn {
+    border-width: 1px;
+  }
+}

data/app/assets/stylesheets/trestle/components/_modal.scss

@@ -0,0 +1,108 @@
+.modal {
+  &.background {
+    .modal-dialog {
+      transform: scale(0.9);
+      opacity: 0.75;
+    }
+  }
+}
+
+.modal-content {
+  border: none;
+  border-radius: 0;
+
+  .modal.loading & {
+    min-height: 100px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:after {
+      @extend .fa;
+      @extend .fa-spin;
+      content: $fa-var-spinner;
+
+      font-size: 32px;
+      opacity: 0.25;
+    }
+  }
+}
+
+.modal-header {
+  background: $theme-bg;
+  border-bottom: none;
+
+  .close {
+    opacity: 0.75;
+
+    &, &:hover, &:focus {
+      color: white;
+    }
+
+    &:hover, &:focus {
+      opacity: 1;
+    }
+  }
+
+  .modal.error & {
+    background: $error-bg;
+  }
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 500;
+  text-shadow: rgba(black, 0.5) 0 1px 1px;
+  color: white;
+}
+
+.modal-tabs .nav-tabs {
+  background: $body-bg;
+  padding: 10px 15px 0 15px;
+}
+
+.modal-flash {
+  .alert {
+    margin-bottom: 0;
+    border-radius: 0;
+    border-width: 0 0 1px 0;
+
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    .alert-icon {
+      font-size: 40px;
+      margin-right: 15px;
+    }
+
+    h3 {
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 13px;
+    }
+  }
+}
+
+.modal-body {
+  @extend .tab-content;
+
+  pre.exception {
+    max-height: 75vh;
+  }
+}
+
+.modal-footer {
+  background: $modal-footer-background;
+  border-color: $modal-footer-border-color;
+
+  .primary-toolbar {
+    float: right;
+  }
+
+  .secondary-toolbar {
+    float: left;
+  }
+}