hyrax 3.6.0 → 4.0.0.beta1

data/app/assets/stylesheets/hyrax/_batch-edit.scss

@@ -1,6 +1,6 @@
 .help-icon {
-  @extend .glyphicon;
-  @extend .glyphicon-question-sign;
+  @extend .fa !optional;
+  @extend .fa-question !optional;
   @extend .large-icon;
   top: 5px;
 }
@@ -14,13 +14,13 @@
 }
 
 #hide_addl_descriptions {
-  margin-bottom: $padding-large-vertical;
+  margin-bottom: $input-btn-padding-y-lg;
 }
 
-.glyphicon-chevron-right-helper.collapsed .chevron {
-  @extend .glyphicon-chevron-right;
+.fa-chevron-right-helper.collapsed .chevron {
+  @extend .fa-chevron-right !optional;
 }
-.glyphicon-chevron-right-helper .chevron {
-  @extend .glyphicon;
-  @extend .glyphicon-chevron-down;
+.fa-chevron-right-helper .chevron {
+  @extend .fa !optional;
+  @extend .fa-chevron-down !optional;
 }

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

@@ -1,4 +1,4 @@
-@import "browse_everything/browse_everything";
+@import "browse_everything/browse_everything_bootstrap4";
 
 #browse-everything {
   top: 10%;

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

@@ -4,7 +4,7 @@
 }
 
 .multi_value .listing .input-group {
-  margin-bottom: .35em;
+  margin-bottom: 0.35em;
 }
 
 .input-group-btn:last-child > .btn {
@@ -34,3 +34,33 @@ span.appliedFilter .remove {
 .additional-fields {
   margin-bottom: 1.5em;
 }
+
+/* add bootstrap 3.x style .btn-default */
+
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.btn-default:focus {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #8c8c8c;
+}
+
+.btn-default:hover {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+.btn-default:active {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+td.toggle input[type="submit"]:not(.active) {
+  @extend .btn-default;
+}

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

@@ -0,0 +1,10 @@
+.card {
+  margin-bottom: 20px;
+}
+
+.card-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 16px;
+  color: inherit;
+}

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

@@ -10,60 +10,16 @@
   }
 }
 
-.document {
-  .list-thumbnail {
-    width: 30%;
-    float: left;
-  }
-
-  .metadata {
-    width: 70%;
-    display: inline-block;
-  }
-}
-
-// Styles added to help with newly implemented
-// Bootstrap row / column setup for search results
 .search-result-wrapper {
-  border-bottom: 1px dashed #ccc;
-  margin-bottom: 30px;
-  padding-bottom: 0;
-
-  .search-results-title-row {
-    align-items: center;
-    display: flex;
-    padding: 0 0 15px;
-
-    .search-result-title {
-      display: inline-block;
-      margin: 0 15px;
-      font-size: 18px;
-    }
-
-    @media (max-width: 768px) {
-      display: block;
-
-      > .search-result-title {
-        display: block;
-        padding-bottom: 5px;
-      }
-
-      .label {
-        margin-left: 15px;
-      }
-    }
-  }
-
   .list-thumbnail {
-    float: none;
+    display: flex;
+    justify-content: center;
     padding-bottom: 20px;
-    width: 100%;
 
     @media (max-width: 768px) {
       img {
         max-height: 200px;
       }
-
     }
   }
 
@@ -76,10 +32,12 @@
   }
 
   .collection-counts-wrapper {
-    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 
     @media (max-width: 992px) {
-      text-align: left;
+      justify-content: flex-start;
     }
 
     .collection-counts-item {
@@ -113,3 +71,19 @@
     }
   }
 }
+
+.badge {
+  color: #fff;
+}
+
+.view-type-group a {
+  > span.caption {
+    display: none;
+  }
+}
+
+.search-widgets {
+  .view-type {
+    display: inline-block;
+  }
+}

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

@@ -25,7 +25,7 @@
     width: 1px;
   }
 
-  .panel-heading {
+  .card-header {
     align-items: center;
     display: flex;
     justify-content: space-between;

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

@@ -80,15 +80,15 @@ header {
   }
 }
 
-.label-default a:link,
-.label-default a:visited,
-.label-default a:hover {
+.badge-secondary a:link,
+.badge-secondary a:visited,
+.badge-secondary a:hover {
   color: #fff;
   text-align: center;
 }
 
 .dropdown-menu .edit_collection {
-  margin-top: 2 * $padding-large-vertical;
+  margin-top: 2 * $input-btn-padding-y-lg;
 }
 
 div.view-type {
@@ -128,8 +128,8 @@ button.branding-banner-remove:hover {
 }
 
 .dashboard .collections-wrapper {
-  .panel {
-    .panel-title {
+  .card {
+    .card-title {
       font-weight: 300;
     }
   }
@@ -219,7 +219,7 @@ button.branding-banner-remove:hover {
       }
     }
 
-    .glyphicon {
+    .fa {
       margin: 4px 0 0 4px;
     }
   }
@@ -276,7 +276,7 @@ button.branding-banner-remove:hover {
 // Admin show page
 .admin-show-page {
 
-  .panel-body > section {
+  .card-body > section {
     border-top: 1px solid #efefef;
     margin-bottom: 40px;
 
@@ -285,7 +285,7 @@ button.branding-banner-remove:hover {
     }
   }
 
-  .panel-heading {
+  .card-header {
     vertical-align: middle;
 
     .btn {
@@ -312,7 +312,7 @@ button.branding-banner-remove:hover {
         margin-bottom: 10px;
       }
 
-      .label {
+      .badge {
         margin-left: 5px;
       }
 
@@ -404,7 +404,7 @@ button.branding-banner-remove:hover {
     padding-bottom: 40px;
 
     .sharing-row-form {
-      margin-bottom: $padding-large-vertical;
+      margin-bottom: $input-btn-padding-y-lg;
     }
   }
 
@@ -463,7 +463,7 @@ button.branding-banner-remove:hover {
       text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
     }
 
-    .label {
+    .badge {
       border: 1px solid rgba(255, 255, 255, 0.5);
       box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.25);
       margin-left: 0.5em;
@@ -537,7 +537,7 @@ button.branding-banner-remove:hover {
       padding: 0;
     }
 
-    .label {
+    .badge {
       margin-left: 0.5em;
       vertical-align: 100%;
     }

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

@@ -0,0 +1,46 @@
+#facet-panel-collapse {
+    display: inline-block !important; 
+    width: 100%;
+}
+
+.navbar-toggler-icon {
+    display: none;
+}
+
+.facet-label .facet_select, .selected, .facet-label .remove {
+    margin-right: 0.5rem;
+}
+
+.facet-label .remove {
+    margin-left: 0.75rem;
+}
+
+ul.facet-values.list-unstyled {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+
+    > li {
+        display: table-row;
+
+        > .facet-label {
+            display: table-cell;
+            hyphens: auto;
+            padding: 0 0.875rem 0.375rem 0.875rem;
+            text-indent: -0.938rem;
+
+            > a.facet_select { margin-right: unset;}
+        }
+
+        > .facet-count {
+            display: table-cell;
+            text-align: right;
+        }
+    }
+}
+
+.filter-name:after {
+    content: "\f105";
+    font-family: "FontAwesome";
+    padding-left: 0.5rem;
+}

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

@@ -27,7 +27,7 @@ ol#featured_works {
   }
 
   .main {
-    padding: $padding-small-vertical;
+    padding: $custom-select-padding-y-sm;
   }
 
   .featured-label {

data/app/assets/stylesheets/hyrax/_file-listing.scss

@@ -2,7 +2,7 @@ div.facets h3 {
   font-size: 1.4em;
 }
 h4 .small {
-  color: $navbar-default-toggle-icon-bar-bg;
+  color: $navbar-light-active-color;
 }
 
 @media screen and (max-width: 961px) {
@@ -88,7 +88,7 @@ h4 .small {
   display: none;
 }
 
-.visibility-link .label {
+.visibility-link .badge {
   font-size: .85em;
   font-weight: normal;
 }
@@ -124,7 +124,7 @@ input#check_all {
   border: 0;
   border-radius: 0;
   box-shadow: none;
-  margin-bottom: 10px;
+  margin: 0.625rem 0;
 }
 
 #collection-list-container {

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