blacklight-spotlight 3.0.0.alpha.3 → 3.0.0.alpha.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3fa9f3a7e1e9c57300b2fe7d8e6bd5b9a71060f67023d4af18d98e71a4ab403f
-  data.tar.gz: 56ee1b33497e018c21b2715cb70ffe046cbb20c9b94d29bd8c190a0e6bf98861
+  metadata.gz: eee784e93eaeb64d3b581a84b8969f67ef1365fcb244845541cce3db8743a44d
+  data.tar.gz: 72cc1075f6bf87b3f0ec675d71484ea0f664181d36fe55978878890627d8f264
 SHA512:
-  metadata.gz: d983db3c039418272a76203ae52763887394bc6f04100b0d5722142ce122e87a59c7e28eb1c7616a6cbb078c28d5df4f04d1b0a63e1e0b9780058e6b8c9b2ce0
-  data.tar.gz: 1445e0928407f8e5510c0b86b7e2fbfb1ea62d7124ea131ae78fcafb0c183ec6dfab34434c41128d6031ef93a3b16c0d12ff3c371e56d8c7da0d0b15fdb8fefc
+  metadata.gz: 99dd649874596c8b56267f9757fd4c56a05768289c52545b698932dbd8756c498b280f969602b2578afb31e13c5a26856379a573ea4b4fb5dc7d938f18199b19
+  data.tar.gz: 2477bf2480ec591974433df8bb7a48c58c51ca2961ddfbee954fe3ca5a4a82244cfcd9efbd784a046d8c86b90df9c1078ebc77cef04422e1d77eb66c91f4871e

data/app/assets/images/blacklight/highlight_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>

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

@@ -0,0 +1,8 @@
+// Global accessibility overrides
+
+// Increase visibility of Firefox focus indicator
+@-moz-document url-prefix() {
+  &:focus {
+    outline: $input-focus-border-color auto 5px;
+  }
+}

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

@@ -31,8 +31,8 @@
     padding-bottom: 0;
 
     label {
-      margin-left: $padding-base-horizontal;
-      margin-right: $padding-base-horizontal;
+      margin-left: $spacer;
+      margin-right: $spacer;
       padding-left: 0px;
       padding-bottom: $table-cell-padding;
       padding-top: 1 + $table-cell-padding;
@@ -47,7 +47,7 @@
 }
 
 .dd-table {
-  margin-top: 2 * $padding-large-vertical;
+  margin-top: 2 * $spacer;
 
   th {
     &:first-child {

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

@@ -15,8 +15,8 @@
 
 .navbar-sm {
   li > a {
-    padding-top:$padding-base-vertical !important;
-    padding-bottom:$padding-base-vertical !important;
+    padding-top:$spacer !important;
+    padding-bottom:$spacer !important;
   }
 
   margin-top: -10px;
@@ -32,14 +32,13 @@
 
     padding-bottom: 0.25rem;
     margin-bottom: 0.25rem;
-    margin-left: 0.5rem;
     padding-left: 0;
     padding-top: 0;
   }
 
   .nav-link {
     padding: 0rem 1rem;
-    padding-left: 0.5rem;
+    padding-left: 0px;
   }
 
   .nav-link.active {
@@ -81,21 +80,22 @@ h1,h2,h3,h4,h5,h6 {
   }
 }
 
-.tab-pane {
-  fieldset {
-    margin-bottom: $padding-large-vertical * 2;
-    margin-top: $padding-large-vertical * 1;
-  }
-  legend {
-    margin-bottom: $padding-large-vertical;
-  }
-  small.form-text {
-    margin-bottom: $spacer;
-    margin-top: $spacer * 0.3125;
-  }
-  div.form-check + input[type="file"] {
-    margin-top: $padding-large-vertical;
-  }
+fieldset {
+  margin-bottom: $spacer * 2;
+  margin-top: $spacer * 1;
+}
+
+legend {
+  margin-bottom: $spacer;
+}
+
+small.form-text {
+  margin-bottom: $spacer;
+  margin-top: $spacer * 0.3125;
+}
+
+div.form-check + input[type="file"] {
+  margin-top: $spacer;
 }
 
 @media (max-width: breakpoint-max("md")) {
@@ -103,7 +103,3 @@ h1,h2,h3,h4,h5,h6 {
     padding-left: 0;
   }
 }
-
-.carousel-block .carousel-indicators li {
-  opacity: 1;
-}

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

@@ -1,7 +1,7 @@
 $image-overlay-max-height: 300px;
 
 .long-description-text {
-  margin: ($padding-base-vertical * 2) 0;
+  margin: ($spacer * 2) 0;
   width: 40em;
 }
 
@@ -14,6 +14,18 @@ $image-overlay-max-height: 300px;
   }
 }
 
+.blacklight-browse {
+  .sort-pagination {
+    .page-links {
+      display: none;
+    }
+
+    .search-widgets {
+      margin-left: auto;
+    }
+  }
+}
+
 .browse-landing {
   text-align: center;
   // Placeholder for vertically alignment - might already be available from use in another feature
@@ -24,7 +36,7 @@ $image-overlay-max-height: 300px;
   }
 
   .category {
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
   }
 
   .image-overlay {
@@ -61,7 +73,7 @@ $image-overlay-max-height: 300px;
       small {
         display: block;
         color: $white;
-        margin-top: $padding-large-vertical;
+        margin-top: $spacer;
         text-transform: uppercase;
       }
     }
@@ -72,19 +84,16 @@ $image-overlay-max-height: 300px;
   }
 
   @media screen and (max-width: breakpoint-max("sm")) {
-    $image-overlay-max-height: 180px;
-    .category {
-      margin: 10px auto;
-    }
-
+    $image-overlay-max-height: 240px;
     .image-overlay {
+      margin: 10px auto;
       max-height: $image-overlay-max-height;
       max-width: 350px;
     }
     .text-overlay .browse-category-title {font-size: $h3-font-size;}
   }
   @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
-    $image-overlay-max-height: 180px;
+    $image-overlay-max-height: 240px;
     .image-overlay {max-height: $image-overlay-max-height;}
   }
   @media screen and (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
@@ -106,10 +115,6 @@ $image-overlay-max-height: 300px;
   }
 
   .browse-search-form {
-    .browse-search-expand {
-      text-align: center;
-    }
-
     .btn-reset {
       background-color: transparent;
       display: none;
@@ -122,4 +127,8 @@ $image-overlay-max-height: 300px;
       z-index: 30;
     }
   }
+
+  .browse-search-expand {
+    text-align: center;
+  }
 }

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

@@ -61,7 +61,7 @@
 
 .blacklight-catalog-admin {
   .add-items-nav {
-    margin-bottom: $padding-large-vertical;
+    margin-bottom: $spacer;
   }
 
   .sort-pagination {
@@ -119,7 +119,7 @@ form.edit_solr_document {
 
 #save-this-search {
   float:left;
-  margin-right: $padding-xs-horizontal;
+  margin-right: $spacer * 0.1;
 }
 
 #document {

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

@@ -1,6 +1,8 @@
 .page-links a {
   padding-left: 0;
   padding-right: 0;
+  line-height: $btn-line-height;
+  @include font-size($btn-font-size);
 }
 
 .missing-description {
@@ -36,23 +38,10 @@
     display: inline-block;
     margin-bottom: 0;
   }
-  .checkbox {
-    width: 3%;
-    vertical-align: top;
-    display: inline-block;
-    padding-top: 0;
-  }
-
-  .publish-control {
-    display: inline;
 
-    .checkbox {
-      padding-top: 0;
-    }
-
-    .form-check-inline {
-      vertical-align: middle;
-    }
+  .form-check-inline {
+    margin-top: -3px;
+    vertical-align: middle;
   }
 
   .main {
@@ -125,13 +114,13 @@
     width: 65%;
     vertical-align: top;
     display: inline-block;
-    margin-left: $padding-base-horizontal;
+    margin-left: $spacer;
   }
   .remove {
     width: 10%;
     vertical-align: top;
     display: inline-block;
-    margin-left: $padding-base-horizontal;
+    margin-left: $spacer;
   }
 }
 
@@ -210,7 +199,7 @@ table#exhibit-specific-fields {
 }
 
 #nested-navigation {
-  margin-bottom: 2 * $padding-large-vertical;
+  margin-bottom: 2 * $spacer;
 }
 
 table.users {

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

@@ -1,108 +1,147 @@
-.exhibit-card {
-  box-sizing: border-box;
-  height: $exhibit-card-height;
-  margin-bottom: 2rem;
-  //               image width        +       gutter         + border (x2)
-  max-width: $exhibit-card-image-size + $exhibit-card-gutter + 2px;
-  padding-right: ($exhibit-card-gutter / 2) !important;
-  perspective: 1000; // for flip animation
-  position: relative;
-
-  .flipper {
-    position: relative;
-    transform-style: preserve-3d;
-    transition: 0.6s;
-  }
-
-  &.hover .flipper,
-  &:hover .flipper {
-    -ms-filter: "FlipH"; // autoprefixer doesn't handle this case.
-    filter: FlipH;
-    transform: rotateY(180deg);
-  }
-}
-
-.card-face {
-  backface-visibility: hidden;
-  background-color: $exhibit-card-bg;
-  border: 1px solid $exhibit-card-border;
-  height: $exhibit-card-height;
-  left: 0;
-  position: absolute;
-  top: 0;
-  transform-style: preserve-3d;
-  transition: 0.6s;
-  width: 100%;
-}
+$exhibit-card-overlay-padding: $card-img-overlay-padding / 2 !default;
+$exhibit-card-overlay-opacity: 0.85 !default;
+$exhibit-card-bg: $card-bg !default;
 
-.exhibit-card-title {
-  @extend .h5;
-  @extend .text-center;
-}
-
-.card-front {
-  transform: rotateY(0deg);
-  z-index: 2;
+.exhibit-card {
+  background: $exhibit-card-bg;
+  overflow-y: hidden;
+  padding-bottom: 3rem;
 
   .unpublished {
     @extend .mx-auto;
     display: block;
-    font-size: $font-size-base;
-    margin-top: -1em;
-    position: relative;
+    font-size: $font-size-sm;
+    margin-top: -1.5rem;
+    position: absolute;
+    left: 0;
+    right: 0;
     width: 15ch;
   }
-}
-
-.card-back {
-  box-shadow: $exhibit-card-shadow;
-  transform: rotateY(-180deg);
 
   .card-title {
-    border-bottom: 1px dotted $exhibit-card-border;
-    padding-bottom: $padding-base-vertical;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+
+  .card-title .stretched-link {
+    outline: none;
+  }
+
+  .card-img {
+    margin-top: -1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .card-img-overlay {
+    background: rgba($exhibit-card-bg, $exhibit-card-overlay-opacity);
+    border-bottom-left-radius: calc(0.25rem - 1px);
+    border-bottom-right-radius: calc(0.25rem - 1px);
+    display: flex;
+    flex-direction: column;
+    padding: $exhibit-card-overlay-padding;
+    top: inherit;
+    max-height: 100%;
+  }
+
+  .exhibit-description {
+    display: flex;
+    flex-direction: column;
+    max-height: 0;
+    outline: none;
+    overflow-y: hidden;
+    transition: $transition-base;
   }
 
   .subtitle {
-    @extend .h5;
-    @extend .text-center;
-    font-size: 0.875rem;
-    line-height: $headings-line-height;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-align: center;
   }
 
   .description {
-    font-size: 0.75rem;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    font-size: $font-size-sm;
+    -webkit-line-clamp: 15;
+    overflow: hidden;
   }
 
-  .visit-exhibit {
-    bottom: 1rem;
-    position: absolute;
+  &:hover {
+    .exhibit-description {
+      max-height: 450px;
+    }
   }
-}
 
-// between the small and medium breakpoints, reduce the size of the image by a little bit
-@media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("lg")) {
+  &:focus-within {
+    // Use Bootstrap focus style
+    outline: $input-focus-border-color auto 5px;
 
-  // calculate the size of one full grid column
-  $reduce-exhibit-card-image-size: (((map-get($container-max-widths, "md") - $grid-gutter-width) / $grid-columns) - ($grid-gutter-width / 2));
+    // Use WebKit focus styles if available
+    @supports (-webkit-appearance:none) {
+      outline-color: -webkit-focus-ring-color;
+    }
 
-  .exhibit-card,
-  .card-face {
-    height: $exhibit-card-height - $reduce-exhibit-card-image-size;
+    .exhibit-description {
+      max-height: 450px;
+    }
   }
 
-  // Cannot extend .btn-sm within a @media query
-  .center-btn .btn {
-    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("sm")) {
+    &:hover {
+      .exhibit-description {
+        max-height: 215px;
+      }
+    }
+
+    &:focus-within {
+      .exhibit-description {
+        max-height: 215px;
+      }
+    }
+
+    .description {
+      -webkit-line-clamp: 5;
+    }
+
+    .subtitle {
+      -webkit-line-clamp: 2;
+    }
   }
-}
 
-.center-btn {
-  left: 50%;
-  position: absolute;
+  @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
+    .description {
+      -webkit-line-clamp: 4;
+    }
+
+    .subtitle {
+      -webkit-line-clamp: 2;
+    }
+  }
 
-  .btn {
-    left: -50%;
-    position: relative;
+  @media (min-width: breakpoint-max("lg")) {
+    &:hover {
+      .exhibit-description {
+        max-height: 230px;
+      }
+    }
+
+    &:focus-within {
+      .exhibit-description {
+        max-height: 230px;
+      }
+    }
+
+    .description {
+      -webkit-line-clamp: 6;
+    }
+
+    .subtitle {
+      -webkit-line-clamp: 2;
+    }
   }
 }