blacklight-spotlight 2.13.0 → 3.0.0.alpha.1

data/app/assets/stylesheets/spotlight/_browse.scss

@@ -1,5 +1,5 @@
 $image-overlay-max-height: 300px;
-$image-overlay-bottom-margin: $padding-large-vertical * 3;
+$image-overlay-bottom-margin: 36px;
 
 @function category-min-height($overlay-max-height) {
   @return $overlay-max-height + $image-overlay-bottom-margin;
@@ -13,7 +13,7 @@ $image-overlay-bottom-margin: $padding-large-vertical * 3;
 .very-long-description-text {
   width: auto;
 
-  @media (min-width: $screen-sm-max) {
+  @media (min-width: breakpoint-min("md")) {
     column-gap: 3em;
     column-width: 20em;
   }
@@ -33,8 +33,8 @@ $image-overlay-bottom-margin: $padding-large-vertical * 3;
   }
 
   .image-overlay {
-    border: 2px solid $gray-light;
-    border-radius: $border-radius-large;
+    border: 2px solid $gray-600;
+    border-radius: $border-radius-lg;
     margin-bottom: $image-overlay-bottom-margin;
     max-height: 240px;
     min-height: 140px;
@@ -61,7 +61,7 @@ $image-overlay-bottom-margin: $padding-large-vertical * 3;
     transform-style: preserve-3d;
 
     .browse-category-title {
-      font-size: $font-size-h3;
+      font-size: $h3-font-size;
       @extend %vertical-align;
 
       small {
@@ -77,28 +77,28 @@ $image-overlay-bottom-margin: $padding-large-vertical * 3;
     }
   }
 
-  @media screen and (max-width: $screen-xs-max) {
+  @media screen and (max-width: breakpoint-max("sm")) {
     .image-overlay {
       margin: 10px auto;
       max-width: 350px;
     }
-    .text-overlay .browse-category-title {font-size: $font-size-h3;}
+    .text-overlay .browse-category-title {font-size: $h3-font-size;}
   }
-  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+  @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("lg")) {
     $image-overlay-max-height: 250px;
     .category {min-height: category-min-height($image-overlay-max-height);}
-    .text-overlay .browse-category-title {font-size: $font-size-h4;}
+    .text-overlay .browse-category-title {font-size: $h4-font-size;}
   }
-  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
     $image-overlay-max-height: 180px;
     .category {min-height: category-min-height($image-overlay-max-height);}
     .image-overlay {max-height: $image-overlay-max-height;}
   }
-  @media screen and (max-width: $screen-sm-min) {
+  @media screen and (max-width: breakpoint-max("sm")) {
     $image-overlay-max-height: 180px;
     .category {min-height: category-min-height($image-overlay-max-height);}
   }
-  @media screen and (min-width: $screen-lg-min) {
+  @media screen and (min-width: breakpoint-min("lg")) {
     .category {min-height: category-min-height($image-overlay-max-height);}
     .image-overlay {max-height: $image-overlay-max-height;}
   }
@@ -106,9 +106,12 @@ $image-overlay-bottom-margin: $padding-large-vertical * 3;
 
 .search-box-container {
   margin: 0 auto;
-  text-align: center;
   width: 100%;
 
+  .col-form-label {
+    text-align: right;
+  }
+
   .browse-search-form {
     .browse-search-expand {
       text-align: center;

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

@@ -8,7 +8,7 @@
   }
 
   .document-thumbnail a > img {
-    border: 1px solid $gray-light;
+    border: 1px solid $gray-600;
     width: 60px;
     height: 60px;
     object-fit: cover;
@@ -26,12 +26,18 @@
   }
 }
 
+#documents.documents-list {
+  .document-thumbnail a > img {
+    max-width: 100px;
+  }
+}
+
 #document {
   ul.tags {
     text-align: center;
     li {
-      @extend .label;
-      @extend .label-default;
+      @extend .badge;
+      @extend .badge-secondary;
       a {
         color: #fff;
       }
@@ -41,7 +47,7 @@
 
 .document, tr.doc-row, li.dd-item, .autocomplete-item {
   &.blacklight-private {
-    .index_title, h1, .panel-title, .autocomplete-title {
+    .index_title, h1, .card-title, .autocomplete-title {
       @include private-label;
     }
   }
@@ -59,7 +65,7 @@ form.edit_solr_document {
     cursor: text;
     display: block;
   }
-  .bg-warning.help-block {
+  .bg-warning.form-text {
     font-size: 0.9em;
     padding: 3px 6px;
   }
@@ -114,7 +120,7 @@ form.edit_solr_document {
   }
 
   .blacklight-exhibit_tags a {
-    @extend .label;
-    @extend .label-default;
+    @extend .badge;
+    @extend .badge-secondary;
   }
 }

data/app/assets/stylesheets/spotlight/_collapse_toggle.scss

@@ -1,18 +1,14 @@
+// Rotate collapse-chevron element (has a ❯ in it)
+// with the previous siblings collapsed status
 .btn.collapse-toggle {
-  // adjust as needed, taken from bootstrap.css glyphicons
-  &:after {
-    // symbol for "opening" panels
-    color: $text-muted;
-    content: "\e114"; // chevron down
-    float: right;
-    font-family: "Glyphicons Halflings";
-    font-size: 0.8em;
-    line-height: 2em;
-    padding-left: 1ch;
+  & + .collapse-chevron {
+    display: inline-block;
+    text-align: right;
+    transform: rotate(90deg);
+    width: 16px;
   }
-
-  &.collapsed:after {
-    // symbol for "collapsed" panels
-    content: "\e080"; //chevron right
+  &.collapsed + .collapse-chevron {
+    text-align: left;
+    transform: none;
   }
 }

data/app/assets/stylesheets/spotlight/_curation.scss

@@ -1,6 +1,6 @@
 .page-links a {
-  padding-left: 2px;
-  padding-right: 2px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .missing-description {
@@ -10,7 +10,7 @@
   display: inline-block;
   .input-field {
     input[type='text'] {
-      @extend .input-sm;
+      @extend .form-control-sm;
       height: auto;
       padding: 0 5px;
       width: 195px;
@@ -19,8 +19,8 @@
     }
     input[type='submit'] {
       @extend .btn;
-      @extend .btn-default;
-      @extend .btn-xs;
+      @extend .btn-secondary;
+      @extend .btn-sm;
     }
     display: none;
   }
@@ -30,8 +30,8 @@
 }
 
 
-.panel-heading {
-  .pic.thumbnail {
+.card-header {
+  .pic {
     width: 70px;
     display: inline-block;
     margin-bottom: 0;
@@ -45,9 +45,14 @@
 
   .publish-control {
     display: inline;
+
     .checkbox {
       padding-top: 0;
     }
+
+    .form-check-inline {
+      vertical-align: middle;
+    }
   }
 
   .main {
@@ -63,23 +68,24 @@
   }
 }
 
-.panel-heading.page {
+[data-in-place-edit-target]:hover:after {
+  content: "\270f";
+  line-height: 1;
+  margin-left: 6px;
+  display: inline-block;
+  color: #777;
+}
+[data-in-place-edit-target].hide-edit-icon:after {
+  display: none;
+}
+
+.card.page-admin {
   &:hover {
     @include panel-hover-highlighting;
   }
-  .panel-title {
-    font-size: 15px;
-    &[data-in-place-edit-target]:hover:after {
-      content: "\270f";
-      font-family: "Glyphicons Halflings";
-      line-height: 1;
-      margin-left: 6px;
-      display: inline-block;
-      color: #777;
-    }
-    &[data-in-place-edit-target].hide-edit-icon:after {
-      display: none;
-    }
+  .card-title {
+    @extend .mb-0;
+    @extend .py-2;
   }
 
   .page-links, .contact-links {
@@ -94,11 +100,11 @@
   }
 }
 
-.contacts_admin .panel-heading.page .main {
+.contacts_admin .card-header.page .main {
   width: 95%;
 }
 
-.panel-heading.item-grid {
+.card-header.item-grid {
   &:hover {
     @include panel-hover-highlighting;
   }
@@ -116,7 +122,7 @@
   }
 }
 
-.panel-heading.search {
+.card-header.search {
   &:hover {
     @include panel-hover-highlighting;
   }
@@ -132,16 +138,12 @@
     vertical-align: top;
     display: inline-block;
   }
-  .panel-title {
+  .card-title {
     font-size: 15px;
   }
 }
 
 #edit-search {
-  .input-group-addon {
-    background: none;
-    border: none;
-  }
   #preview {
     height: 60px;
     width: 60px;
@@ -171,7 +173,7 @@ h1,h2,h3,h4,h5,h6 {
 }
 .spotlight-admin-thumbnail {
   position: relative;
-  .label {
+  .badge {
     position: absolute;
     top: 0;
     left: 0;
@@ -189,7 +191,7 @@ table#exhibit-specific-fields {
   margin-top: 1em;
   .field-label {
     min-width: 10em;
-    font-size: $font-size-h4;
+    font-size: $h4-font-size;
   }
   .field-description {
     font-size: $font-size-base;
@@ -217,4 +219,4 @@ table.tags {
   td:nth-child(3), th:nth-child(3) {
     text-align: center;
   }
-}
+}

data/app/assets/stylesheets/spotlight/_exhibit_admin.scss

@@ -27,31 +27,6 @@
       white-space: nowrap;
     }
   }
-
-  .callout {
-    margin: 40px 0;
-    padding: 2 * $padding-large-vertical;
-    border-left: 3px solid $gray-lighter;
-    > p {
-      padding-left: 0;
-    }
-    h4 {
-      margin-top: 0;
-      margin-bottom: $padding-base-vertical;
-    }
-  }
-  .callout-danger {
-    background-color: lighten($brand-danger, 40%);
-    border-color: $brand-danger;
-    h4 {
-      color: $brand-danger;
-    }
-    a:hover, a:focus {
-      color: $btn-danger-color;
-      background-color: $btn-danger-bg;
-      border-color: $btn-danger-border;
-    }
-  }
 }
 
 #edit-search {
@@ -60,13 +35,15 @@
   }
 
   .constraint-value {
-     @include border-right-radius($border-radius-small);
+     @include border-right-radius($border-radius-sm);
   }
 
-  .form-control-static { display: none; }
+  .form-control-plaintext { display: none; }
 }
 
 .analytics {
+  border-bottom: 1px solid $table-border-color;
+  table-layout: fixed;
   text-align: center;
 
   & > tfoot > tr > th {
@@ -82,8 +59,6 @@
 
     border-left: 1px solid $table-border-color;
   }
-
-  border-bottom: 1px solid $table-border-color;
 }
 
 .pending-label {

data/app/assets/stylesheets/spotlight/_exhibits_index.scss

@@ -1,11 +1,9 @@
 .exhibit-card {
   box-sizing: border-box;
-  float: left;
   height: $exhibit-card-height;
-  margin: 0 -1 * $exhibit-card-gutter $exhibit-card-gutter $exhibit-card-gutter;
+  margin-bottom: 2rem;
   //               image width        +       gutter         + border (x2)
   max-width: $exhibit-card-image-size + $exhibit-card-gutter + 2px;
-  padding: 0 $exhibit-card-gutter 0 0;
   perspective: 1000; // for flip animation
   position: relative;
 
@@ -36,12 +34,14 @@
   width: 100%;
 }
 
-.card-title {
+.exhibit-card-title {
   @extend .h5;
   @extend .text-center;
 
-  font-size: $font-size-h4;
+  font-size: $h4-font-size;
   line-height: 1.2;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
 
 .card-front {
@@ -61,8 +61,9 @@
   }
 
   .unpublished {
-    @extend .center-block;
+    @extend .mx-auto;
 
+    display: block;
     font-size: $font-size-base;
     margin-top: -1em;
     position: relative;
@@ -80,6 +81,7 @@
   transform: rotateY(-180deg);
 
   .card-title {
+    @extend .text-center;
     border-bottom: 1px dotted $exhibit-card-border;
     line-height: $headings-line-height;
     margin-bottom: $padding-base-vertical;
@@ -93,7 +95,7 @@
   }
 
   .description {
-    font-size: $font-size-h6;
+    font-size: $h6-font-size;
   }
 
   .visit-exhibit {
@@ -107,10 +109,10 @@
 }
 
 // between the small and medium breakpoints, reduce the size of the image by a little bit
-@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+@media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("lg")) {
 
   // calculate the size of one full grid column
-  $reduce-exhibit-card-image-size: ((($container-sm - $grid-gutter-width) / $grid-columns) - ($grid-gutter-width / 2));
+  $reduce-exhibit-card-image-size: (((map-get($container-max-widths, "md") - $grid-gutter-width) / $grid-columns) - ($grid-gutter-width / 2));
 
   .exhibit-card,
   .card-face {
@@ -136,19 +138,19 @@
 }
 
 // For the medium breakpoint, reduce the max width of the .exhibit-card to align right-edge of row correctly
-@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+@media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
   .exhibit-card {
 
     // each card is 3 columns wide
-    max-width: 3 * ($container-md / $grid-columns) - $padding-xs-horizontal;
+    max-width: 3 * (map-get($container-max-widths, "lg") / $grid-columns) - 5px;
   }
 }
 
 // For the small breakpoint, reduce the max width of the .exhibit-card to align right-edge of row correctly
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+@media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
   .exhibit-card {
 
-    // each card is 4 columns wide
-    max-width: 4 * ($container-sm / $grid-columns) - $padding-xs-horizontal;
+    // each card is 6 columns wide
+    max-width: 6 * (map-get($container-max-widths, "md") / $grid-columns) - 5px;
   }
 }