hyrax 3.5.0 → 4.0.0.beta1

data/app/assets/stylesheets/hyrax/_file_manager.scss

@@ -20,23 +20,23 @@
   ul {
     list-style-type: none;
     &.grid li {
-      @extend .col-xs-4;
+      @extend .col-4;
       .thumbnail {
         height: 150px;
-        @extend .col-xs-12;
+        @extend .col-12;
         img {
           max-height: 140px;
         }
       }
 
       .spacer {
-        @extend .col-xs-12;
+        @extend .col-12;
       }
       .attributes {
-        @extend .col-xs-12;
+        @extend .col-12;
       }
       .member_resource_options {
-        @extend .col-xs-12;
+        @extend .col-12;
         float: none;
         input[type=radio] {
           margin-left: 1px;
@@ -53,23 +53,23 @@
       }
     }
     li {
-      @extend .col-xs-12;
+      @extend .col-12;
       .text {
         display: inline-block;
       }
       .thumbnail {
-        @extend .col-xs-3;
+        @extend .col-3;
       }
       .spacer {
-        @extend .col-xs-3;
+        @extend .col-3;
       }
       .attributes {
-        @extend .col-xs-6;
+        @extend .col-6;
       }
       .member_resource_options {
-        @extend .col-xs-12;
+        @extend .col-12;
         float: none;
-        span.radio:first-of-type {
+        span.form-check:first-of-type {
           margin-top: 50px;
         }
         input[type=radio] {
@@ -95,13 +95,13 @@
           top: 5px;
         }
       }
-      .ui-selecting .panel-body {
+      .ui-selecting .card-body {
         background: #FECA40;
       }
-      .ui-selected .panel-body {
+      .ui-selected .card-body {
         background: #F39814;
       }
-      .panel-heading {
+      .card-header {
         cursor: grab;
         cursor: -webkit-grab;
         cursor: -moz-grab;
@@ -113,18 +113,18 @@
     }
   }
   #file-manager-tools {
-    @media (max-width: $screen-md-min) {
+    @media (max-width: map-get($grid-breakpoints, "lg")) {
       &.affix {
         position: inherit;
       }
     }
-    @media (min-width: $screen-md-min) {
+    @media (min-width: map-get($grid-breakpoints, "lg")) {
       &.affix {
         top: -50px;
         width: 235px;
       }
     }
-    @media (min-width: $screen-lg-min) {
+    @media (min-width: map-get($grid-breakpoints, "xl")) {
       &.affix {
         width: 285px;
       }

data/app/assets/stylesheets/hyrax/_file_sets.scss

@@ -36,7 +36,7 @@ h2 small {
    background: white image_url('loading.gif') center bottom no-repeat;
 }
 
-h1.visibility span.label {
+h1.visibility span.badge {
   font-size: 30%;
   vertical-align: middle;
 }

data/app/assets/stylesheets/hyrax/_file_upload.scss

@@ -1,16 +1,16 @@
 .dropzone {
   border: 1px dashed $gray-light;
   font-weight: bold;
-  height: $padding-large-vertical * 5;
-  line-height: $padding-large-vertical * 5;
+  height: $input-btn-padding-y * 5;
+  line-height: $input-btn-padding-y * 5;
   text-align: center;
   transition: all 0.3s ease-out;
 
   &.in {
     background-color: lighten($gray-base, 98%);
     font-size: larger;
-    height: $padding-large-vertical * 20;
-    line-height: $padding-large-vertical * 20;
+    height: $input-btn-padding-y * 20;
+    line-height: $input-btn-padding-y * 20;
   }
 
   &.hover {

data/app/assets/stylesheets/hyrax/_fixedsticky.scss

@@ -1,4 +1,4 @@
-@media (min-width: $screen-sm-min) {
+@media (min-width: map-get($grid-breakpoints, "md")) {
   .fixedsticky {
     position: -webkit-sticky;
     position: -moz-sticky;

data/app/assets/stylesheets/hyrax/_footer.scss

@@ -5,7 +5,7 @@ html {
 }
 
 body {
-  margin-bottom: $footer-height + $footer-top-margin;
+  margin-bottom: calc(#{$footer-height} + #{$footer-top-margin});
 
   &.dashboard {
     margin-bottom: 0;
@@ -24,10 +24,10 @@ body {
   width: 100%;
 }
 
-@media (max-width: $screen-sm) {
+@media (max-width: map-get($grid-breakpoints, "md")) {
   // make more room in the footer for mobile devices
   body {
-    margin-bottom: 2 * $footer-height + $footer-top-margin;
+    margin-bottom: calc(#{2 * $footer-height} + #{$footer-top-margin});
   }
   .site-footer {
     height: 2 * $footer-height;

data/app/assets/stylesheets/hyrax/_form-progress.scss

@@ -1,10 +1,10 @@
-@media (min-width: $screen-xs-min) {
+@media (min-width: map-get($grid-breakpoints, "sm")) {
   .fixedsticky {
     margin-top: 1em;
   }
 }
 
-@media (min-width: $screen-sm-min) {
+@media (min-width: map-get($grid-breakpoints, "md")) {
   .fixedsticky {
     margin-top: 0;
     top: 0; /* Required to get consistent results in Safari and Chrome */
@@ -24,23 +24,25 @@
   margin-bottom: $save-viz-widget-legend-margin;
 }
 
-.requirements, .visibility {
+.requirements,
+.visibility {
   list-style-type: none;
   padding-left: 8px;
 }
 
+// FIXME: There should be a better way to implement these with FontAwesome direct in the markup?
 aside.form-progress {
   .incomplete::before {
-    content: "\e101";
+    content: "\f00d";
     color: $brand-danger;
-    font-family: 'Glyphicons Halflings';
+    font-family: "FontAwesome";
     padding-right: 5px;
   }
 
   .complete::before {
-    content: "\e013";
+    content: "\f00c";
     color: $brand-success;
-    font-family: 'Glyphicons Halflings';
+    font-family: "FontAwesome";
     padding-right: 5px;
   }
 }
@@ -48,5 +50,3 @@ aside.form-progress {
 .progress-bar-complete {
   width: 100%;
 }
-
-

data/app/assets/stylesheets/hyrax/_form.scss

@@ -8,10 +8,9 @@ td.status {
   font-size: 1.1rem;
 
   span {
-    @extend .label;
     @extend .badge;
-    &.on { @extend .label-success; }
-    &.off { @extend .label-default; }
+    &.on { @extend .badge-success; }
+    &.off { @extend .badge-secondary; }
   }
 }
 
@@ -20,7 +19,7 @@ td.toggle {
     @extend .btn;
     @extend .btn-sm;
     &.active { @extend .btn-primary; }
-    &:not(.active) { @extend .btn-default; }
+    &:not(.active) { @extend .btn-secondary; }
   }
 }
 

data/app/assets/stylesheets/hyrax/_forms.scss

@@ -1,5 +1,5 @@
 legend small {
-  margin-left:.5em;
+  margin-left: 0.5em;
   color: #999999;
   font-size: 15px;
 }
@@ -7,16 +7,15 @@ legend small {
 .label-large {
   font-size: 110%;
   line-height: 1.2;
-  padding: .3em .6em;
+  padding: 0.3em 0.6em;
   white-space: normal;
   position: relative;
 
-
-  input[type="checkbox"]{
-    margin:-2px 0 0;
+  input[type="checkbox"] {
+    margin: -2px 0 0;
     position: absolute;
-    left:.5em;
-    top:38%;
+    left: 0.5em;
+    top: 38%;
   }
 }
 
@@ -25,14 +24,14 @@ legend small {
 }
 
 .label-checkbox .label-text {
-  display:block;
-  padding-left:1.2em;
+  display: block;
+  padding-left: 1.2em;
 }
 
-.form-group.has-error input,
-.form-group.has-error option,
-.form-group.has-error textarea {
-  color:$gray-dark;
+.form-group:invalid input,
+.form-group:invalid option,
+.form-group:invalid textarea {
+  color: $gray-dark;
 }
 
 .form-actions {
@@ -40,18 +39,47 @@ legend small {
 }
 
 form {
-  label { font-weight: bold; }
+  .form-group {
+    align-items: center;
+
+    > div {
+      > .row {
+        margin: 0;
+
+        > div > .select2-container {
+          width: 100%;
+
+          > .select2-choice {
+            height: 100%;
+            > .select2-chosen {
+              height: 100%;
+              padding-top: 0.5rem;
+              padding-left: 0.5rem;
+            }
+          }
+        }
+      }
+    }
 
-  label { margin-bottom: 7px; }
+    > label {
+      text-align: left;
+
+      @media only screen and (min-width: 640px) {
+        text-align: right;
+      }
+    }
+  }
 
-  .help-block {
+  .form-text {
     margin-top: 0;
     margin-bottom: 10px;
   }
 }
 
 .set-access-controls {
-  label { font-weight: normal; }
+  label {
+    font-weight: normal;
+  }
   & .form-group {
     padding: 0 1.75em;
 
@@ -87,25 +115,26 @@ form {
   }
 
   .form-inline {
-    .control-label, label {
+    .col-form-label,
+    label {
       padding-left: 0;
       display: inline;
       &:after {
-        content: ' ';
+        content: " ";
       }
     }
-    .help-block {
+    .form-text {
       display: inline;
       &:before {
-        content: ' ';
+        content: " ";
       }
     }
   }
 }
 
 .collection-types-settings {
-
   .form-inline {
+    display: block;
     label {
       font-weight: bold;
 
@@ -114,34 +143,39 @@ form {
       }
     }
 
-    .control-label,
+    .col-form-label,
     label {
       display: inline;
       padding-left: 0;
 
       &::after {
-        content: ' ';
+        content: " ";
       }
     }
 
-    .help-block {
+    .form-text {
       display: inline;
 
       &::before {
-        content: ' ';
+        content: " ";
       }
     }
+
+    .form-group .help-block {
+      display: inline;
+      margin: 0 0.5rem 10px;
+    }
   }
 }
 
-.control-label.required {
+.col-form-label.required {
   abbr {
     font-weight: bold;
   }
 }
 
 form.button-to {
-  margin:0 .3em;
+  margin: 0 0.3em;
 }
 
 .required-tag {
@@ -164,7 +198,6 @@ form.button-to {
 }
 
 .search-form {
-
   .form-group {
     margin: 0;
   }

data/app/assets/stylesheets/hyrax/_header.scss

@@ -1,20 +1,3 @@
-#search-form-header {
-  margin-top: $search-bar-margin-top;
-}
-
-#masthead {
-  z-index: $zindex-navbar + 1;
-}
-
-header > .navbar {
-  margin-bottom: 0;
-}
-
-.navbar + .navbar,
-.navbar + .image-masthead {
-  margin-top: -1 * $navbar-margin-bottom;
-}
-
 .searchbar-right {
   margin-right: 0;
 }

data/app/assets/stylesheets/hyrax/_home-page.scss

@@ -8,8 +8,8 @@
 }
 
 .image-masthead {
-  border-bottom: 1px solid $navbar-default-border;
-  margin-bottom: $padding-large-vertical * 2.5;
+  border-bottom: 1px solid $nav-divider-color;
+  margin-bottom: $navbar-padding-y * 2.5;
   position: relative;
 
   .background-container {
@@ -24,12 +24,11 @@
 
   .background-container-gradient {
     @include masthead-background-containers();
-    background:
-      linear-gradient(
-        rgba(0, 0, 0, 0.0),
-        rgba(0, 0, 0, 0.4),
-        rgba(0, 0, 0, 0.5)
-      );
+    background: linear-gradient(
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.4),
+      rgba(0, 0, 0, 0.5)
+    );
   }
 
   .site-title {
@@ -37,54 +36,17 @@
     padding-bottom: 6px;
     position: relative;
   }
-
-  .navbar {
-    background-color: $navbar-transparent-bg;
-    color: #fff;
-    margin-bottom: 0;
-
-    .navbar-nav {
-      a {
-        color: $navbar-transparent-link-color;
-        text-transform: uppercase;
-
-        &:hover,
-        &:focus {
-          background-color: $navbar-transparent-link-hover-bg;
-          color: $navbar-transparent-link-hover-color;
-        }
-      }
-      li {
-        background-color: #286090;
-      }
-    }
-
-    @media only screen and (max-width: 767px) {
-      .navbar-nav {
-        margin-left: 10px;
-      }
-    }
-
-    .active > a {
-      &,
-      &:hover,
-      &:focus {
-        background-color: $navbar-transparent-link-active-bg;
-        color: $navbar-transparent-link-active-color;
-      }
-    }
-  }
 }
 
 .home-content {
   .nav {
-    margin-bottom: $padding-large-vertical * 2;
+    margin-bottom: $navbar-padding-y * 2;
   }
 
   // Give some separation between the Works and Collections columns, which stack up vertically on mobile
   @media screen and (max-width: 640px) {
     > div {
-      margin-bottom: $padding-large-vertical * 3;
+      margin-bottom: $navbar-padding-y * 3;
     }
   }
 }
@@ -101,11 +63,11 @@
 }
 
 .home-share-work {
-  margin-bottom: $padding-large-vertical * 4;
-  margin-top: $padding-large-vertical * 2;
+  margin-bottom: $navbar-padding-y * 4;
+  margin-top: $navbar-padding-y * 2;
 
   .terms-of-use {
-    margin-top: $padding-large-vertical;
+    margin-top: $navbar-padding-y;
   }
 }
 
@@ -137,7 +99,7 @@ div#announcement {
 
 ol.list-group.list-group-striped {
   li:nth-of-type(odd) {
-    background: $table-bg-accent;
+    background: $table-accent-bg;
   }
 
   li:nth-of-type(even) {

data/app/assets/stylesheets/hyrax/_html.scss

@@ -0,0 +1,11 @@
+/*
+ * Bootstrap 4 has increased global font-size from 14px to 1rem, computed 
+ * by modern browsers as 16px. This can be reset by overriding the html
+ * selector and adding the property/value of `font-size: 14px;`.
+ *
+ * See https://getbootstrap.com/docs/4.0/migration/ for more information.
+ */
+
+html {
+  font-size: inherit;
+}

data/app/assets/stylesheets/hyrax/_hyrax.scss

@@ -1,17 +1,19 @@
-@import 'hydra-editor/multi_value_fields';
-@import 'hyrax/variables', 'hyrax/file_sets', 'hyrax/settings', 'hyrax/header',
-  'hyrax/styles', 'hyrax/file-listing', 'hyrax/browse_everything_overrides',
-  'hyrax/nestable', 'hyrax/collections', 'hyrax/collection_types',
-  'hyrax/batch-edit', 'hyrax/home-page', 'hyrax/featured', 'hyrax/usage-stats',
-  'hyrax/catalog', 'hyrax/buttons', 'hyrax/tinymce', 'hyrax/proxy-rights',
-  'hyrax/file-show', 'hyrax/work-show', 'hyrax/modal', 'hyrax/forms',
-  'hyrax/form', 'hyrax/file_manager', 'hyrax/form-progress', 'hyrax/positioning',
-  'hyrax/fixedsticky', 'hyrax/file_upload', 'hyrax/representative-media',
-  'hyrax/footer', 'hyrax/select_work_type', 'hyrax/users', 'hyrax/dashboard',
-  'hyrax/sidebar', 'hyrax/controlled_vocabulary', 'hyrax/accessibility',
-  'hyrax/recent', 'hyrax/viewer', 'hyrax/breadcrumbs';
-@import 'typeahead';
-@import 'sharing_buttons';
+@import "hyrax/variables", "hyrax/file_sets", "hyrax/settings", "hyrax/html",
+  "hyrax/header", "hyrax/styles", "hyrax/file-listing",
+  "hyrax/browse_everything_overrides", "hyrax/nestable", "hyrax/collections",
+  "hyrax/collection_types", "hyrax/batch-edit", "hyrax/home-page",
+  "hyrax/featured", "hyrax/usage-stats", "hyrax/catalog", "hyrax/buttons",
+  "hyrax/tinymce", "hyrax/proxy-rights", "hyrax/file-show", "hyrax/work-show",
+  "hyrax/modal", "hyrax/forms", "hyrax/form", "hyrax/file_manager",
+  "hyrax/form-progress", "hyrax/positioning", "hyrax/fixedsticky",
+  "hyrax/file_upload", "hyrax/representative-media", "hyrax/footer",
+  "hyrax/select_work_type", "hyrax/users", "hyrax/dashboard", "hyrax/sidebar",
+  "hyrax/controlled_vocabulary", "hyrax/accessibility", "hyrax/recent",
+  "hyrax/viewer", "hyrax/breadcrumbs", "hyrax/facets", "hyrax/card",
+  "hyrax/badge";
+@import "hydra-editor/multi_value_fields";
+@import "typeahead";
+@import "sharing_buttons";
 
 /* This class is to workaround an issue in which Bootstrap requires a div to display a tooltip
  * on a disabled button. Using a span instead of a div would be ideal but unfortunately it does

data/app/assets/stylesheets/hyrax/_nestable.scss

@@ -90,7 +90,7 @@ tr.dd-item {
 .dd3-content.page-admin {
   position: relative;
 }
-.dd3-content .panel-body {background: white;}
+.dd3-content .card-body {background: white;}
 .dd-dragel > .dd3-item > .dd3-content { margin: 0; }
 
 .dd3-item > button { margin-left: 30px; }

data/app/assets/stylesheets/hyrax/_select_work_type.scss

@@ -4,7 +4,7 @@
   }
 
   .modal-title {
-    font-size: $font-size-h3;
+    font-size: $h3-font-size;
   }
 }
 
@@ -49,7 +49,7 @@
     width: 80%;
 
     .work-type-title {
-      font-size: $font-size-h4;
+      font-size: $h4-font-size;
       margin-top: 0;
     }
   }

data/app/assets/stylesheets/hyrax/_styles.scss

@@ -1,7 +1,3 @@
-.input-group {
-  margin-bottom: $padding-large-vertical;
-}
-
 .breadcrumbs {
   padding: 1em 0;
 }
@@ -63,17 +59,16 @@ label.disabled {
   display: flex;
 }
 
-.navbar-default {
-  .navbar-nav {
-    li {
-      a {
-        color: #666;
-      }
-    }
-  }
-}
-
 .read-only {
   font-size: 1.2em;
   margin: 0 0 10px;
 }
+
+
+// Bootstrap 4 has no default row margins, so this helper
+// class will wrap rows giving some margin between
+.spaced-rows {
+  .row > .col {
+    margin-bottom: 1rem;
+  }
+}

data/app/assets/stylesheets/hyrax/_users.scss

@@ -1,7 +1,7 @@
 // Styles for the user index and show page
 
 .views-downloads-dashboard {
-  padding-left: $padding-large-horizontal;
+  padding-left: $input-btn-padding-x-lg;
 }
 
 .panel-user {
@@ -10,7 +10,7 @@
 
 #user_info {
   dt {
-    margin-top: $padding-small-vertical;
+    margin-top: $input-btn-padding-y-sm;
   }
 }