hyrax 3.6.0 → 4.0.0.beta1

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;
   }
 }
 

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

@@ -1,3 +1,22 @@
+// hydra-editor Bootstrap 3.0 compatibility
+$border-radius-base: $border-radius;
+
+// greys
+$gray-base: $black;
+$gray: $gray-600;
+$gray-darker: $gray-900;
+$gray-lighter: $gray-200;
+
+// brand colours
+$brand-primary: $primary;
+$brand-secondary: $secondary;
+$brand-success: $success;
+$brand-info: $info;
+$brand-warning: $warning;
+$brand-danger: $danger;
+$brand-light: $light;
+$brand-dark: $dark;
+
 $masthead-image-blur: 1px !default;
 
 $navbar-transparent-color: $gray !default;
@@ -13,6 +32,6 @@ $title-height: 75px !default;
 $marketing-text-color: $gray-darker !important;
 $marketing-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1) !important;
 
-$footer-top-margin: 3 * $padding-small-vertical !default;
+$footer-top-margin: 3 * $pagination-padding-y-sm !default;
 $footer-dashboard-top-margin: 0 !default;
 $footer-height: 118px !default;

data/app/assets/stylesheets/hyrax/_work-show.scss

@@ -1,21 +1,29 @@
 .related-files {
   .thumbnail {
     width: $related-files-thumbnail-width;
+
+    img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      margin-right: auto;
+      margin-left: auto;
+    }
   }
 }
 
 .no-preview,
 .social-media {
-  padding: $panel-body-padding;
+  padding: $card-img-overlay-padding;
 }
 
-header > h1 .label {
+header > h1 .badge {
   font-size: $font-size-base;
   vertical-align: middle;
 }
 
 .citations {
-  padding: $panel-body-padding;
+  padding: $card-img-overlay-padding;
 }
 
 .ensure-wrapped {
@@ -50,15 +58,15 @@ ul.tabular {
   color: #808080;
   font-size: 24px;
   font-weight: 500;
-  margin-bottom: $padding-large-vertical;
-  margin-top: $padding-large-vertical * 2;
+  margin-bottom: $input-btn-padding-y;
+  margin-top: $input-btn-padding-y * 2;
 }
 
 .work-type {
   margin-bottom: 18px;
   margin-top: -8px;
 
-  .panel-body {
+  .card-body {
     .work_description,
     li.attribute {
       word-break: break-word;
@@ -67,15 +75,15 @@ ul.tabular {
 
   // Button row which sits below the title, and above panel content for a page
   .button-row-top-two-column {
-    margin-bottom: $padding-large-vertical;
-    margin-top: $padding-large-vertical;
+    margin-bottom: $btn-block-spacing-y;
+    margin-top: $btn-block-spacing-y;
 
     @media screen and (max-width: 767px) {
       > div {
         text-align: center;
 
         &:first-child {
-          padding-bottom: $padding-small-vertical;
+          padding-bottom: $btn-padding-y-sm;
         }
       }
     }
@@ -83,7 +91,7 @@ ul.tabular {
 }
 
 .work-title-wrapper {
-  margin-bottom: $padding-large-vertical * 2;
+  margin-bottom: $input-btn-padding-y * 2;
 
   .title-with-badges {
     align-items: center;
@@ -94,7 +102,7 @@ ul.tabular {
       margin: 0;
     }
 
-    .label {
+    .badge {
       margin-left: 5px;
 
       &:first-of-type {
@@ -108,7 +116,7 @@ ul.tabular {
   background: #fff;
   border-color: #e0e0e0;
 
-  .panel-heading {
+  .card-header {
     background-color: #e6ab5f;
     color: #ffffff;
 
@@ -117,7 +125,7 @@ ul.tabular {
     }
   }
 
-  .panel-body {
+  .card-body {
     background-color: #f2f1eb;
   }
 }

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

@@ -1,12 +1,12 @@
 /* These styles are very specific to override the thumbnails from blacklight gallery */
 
-.slideshow-documents {
+.documents-slideshow {
   .grid {
     .document {
       .thumbnail {
         padding: 0;
 
-        a > img {
+        > img {
           left: 0;
           max-width: 100%;
           top: 0;
@@ -15,3 +15,76 @@
     }
   }
 }
+
+.documents-gallery li div.search-result-wrapper {
+    margin: 0.25rem;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 0.25rem;
+
+    > .document-thumbnail {
+      margin: 0 auto 0.5rem auto;
+    }
+
+    > header {
+      margin: 0.5rem auto;
+      text-align: center;
+      width: 100%;
+      height: fit-content;
+    }
+
+    > .document-metadata {
+      margin: unset;
+    }
+}
+
+.documents-masonry {
+  list-style-type: none;
+
+  > li.document {
+    border-bottom: 1px dotted #ddd;
+    display: block;
+    margin-bottom: 0.625rem;
+    margin-top: 0.375rem;
+    margin-right: 0.313rem;
+    max-width: unset;
+    min-height: 4.5rem;
+    padding-bottom: unset !important;
+    padding-top: 0.375rem;
+    width: 25%;
+
+    &:hover div.search-result-wrapper header,
+    &:focus div.search-result-wrapper header {
+      background-color: rgba(0,0,0,0.3);
+      bottom: 0;
+      color: #333333;
+      display: block;
+      height: fit-content;
+      margin: unset;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      left: 0;
+      text-align: center;
+      width: 100%;
+    }
+
+    > div.search-result-wrapper {
+      display: block;
+      margin: unset;
+      text-align: center;
+
+      > header {
+        display: none;
+      }
+
+      > .document-thumbnail {
+        margin: unset;
+        text-align: center;
+      }
+
+      > .document-metadata {
+        display: none;
+      }
+    }
+  } 
+}