geoblacklight 2.1.2 → 3.0.0

data/app/assets/stylesheets/geoblacklight/geoblacklight.scss

@@ -0,0 +1,2 @@
+@import 'leaflet';
+@import 'modules/base';

data/app/assets/stylesheets/geoblacklight/modules/_base.scss

@@ -0,0 +1,33 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ */
+
+@import 'styles';
+@import 'facets';
+@import 'mixins';
+@import 'icon-customization';
+@import 'home';
+@import 'index_maps';
+@import 'item';
+@import 'layer_opacity';
+@import 'metadata';
+@import 'metadata_content';
+@import 'metadata_missing';
+@import 'metadata_markup';
+@import 'modal';
+@import 'results';
+@import 'geosearch';
+@import 'search_widgets';
+@import 'sidebar';
+@import 'toolbar';
+@import 'web_services';
+@import 'blacklight_overrides';
+@import 'downloads';

data/app/assets/stylesheets/geoblacklight/{_blacklight_overrides.scss → modules/_blacklight_overrides.scss}

@@ -2,6 +2,14 @@
   Stylesheet for overriding styles inherited from Blacklight proper
 **/
 
+$logo-image: image_url('blacklight/logo.svg') !default
+
+.navbar-logo {  /* The main logo image for the Blacklight instance */
+  @if $logo-image {
+    background: transparent $logo-image no-repeat top left;
+  }
+}
+
 // Begin - Addresses GBL issue #634
 // Emulates font-size for SVG icons and aligns to baseline
 .blacklight-icons {
@@ -32,12 +40,3 @@
   padding-top:0.5rem;
 }
 // End - Addresses GBL issue #639
-
-
-// Begin - Addresses GBL issue #766 - removes flex from display
-.modal-header {
-  display: block;
-  padding: 15px;
-  border-bottom: 1px solid #e9ecef;
-}
-// End - Addresses GBL issue #766

data/app/assets/stylesheets/geoblacklight/{_styles.scss → modules/_styles.scss}

@@ -1,4 +1,5 @@
 #table-container{
   overflow:scroll;
+  margin-top: 20px;
   max-height: 450px;
 }

data/app/assets/stylesheets/geoblacklight/modules/downloads.scss

@@ -1,91 +1,74 @@
-%downloads-exports {
-  .list-group-item {
-    display: inline-block;
-    width: 100%;
-  }
-}
-
-%download-export-links {
-  a {
-    width: 100%;
-    font-weight: 600;
-    background-color: $link-color;
-    color: #ffffff;
-    border-color: darken($link-color, 6.5%);
-    white-space: inherit;
-  }
-}
+// Common styling for the Downloads, Export, and Authentication cards
+.downloads,
+.card.exports,
+.authentication {
+  @include sidebar-children;
 
-@mixin download-export {
-  &-link {
-    &-container {
-      text-align: center;
-      @extend %download-export-links;
+  .list-group {
+    &.list-group-nested .list-group-item:last-child {
+      padding-bottom: 0;
     }
-  }
-}
 
-.downloads {
-  @include sidebar-children;
-  @extend %downloads-exports;
+    .list-group-item {
+      padding: 8px 20px;
 
-  .download {
-    @include download-export;
+      a {
+        @extend .btn-primary;
+      }
+    }
   }
 }
 
+// This section could be eliminated if we update the Authentication card
+// to follow the pattern of Dowloads and Exports (put the button in a
+// list-group rather than the card header).
 .authentication {
-  @include sidebar-children;
   .card-header {
     background-color: inherit;
     border-bottom: inherit;
 
-    @extend %download-export-links;
+    a {
+      @extend .btn-primary;
+    }
   }
 }
 
-.exports {
-  @include sidebar-children;
-  @extend %downloads-exports;
-
+// Specific to the Export card (mostly because of the current external
+// label + button approach, which could be mostly eliminated by reworking
+// as suggested in https://github.com/sul-dlss/earthworks/issues/646)
+.card.exports {
   .card-header {
-    .fa-spinner {
-      float: right;
+    .spinner-border { // if this is used, it probably should go in the card body rather than the card header
+      position: absolute;
+      right: 1rem;
+      top: 1rem;
     }
   }
 
   .export {
-    @include download-export;
-
-    padding-left: 0px;
-    padding-right: 0px;
     text-align: center;
-    width: 100%;
 
     @include media-breakpoint-up(xl) {
       text-align: left;
     }
 
-    &-label {
-      padding: 6px 12px;
+    .export-label {
+      padding: 6px 6px 6px 0;
 
       @include media-breakpoint-up(xl) {
         display: inline-block;
       }
     }
 
-    &-link {
-      &-container {
+    .export-link-container {
+      @include media-breakpoint-up(xl) {
+        display: inline-block;
+        float: right;
+      }
 
+      a {
         @include media-breakpoint-up(xl) {
-          display: inline-block;
-          float: right;
-        }
-
-        a {
-          @include media-breakpoint-up(xl) {
-            width: inherit;
-          }
+          width: inherit;
         }
       }
     }

data/app/assets/stylesheets/geoblacklight/modules/icon-customization.scss

@@ -1,60 +1,50 @@
-// Additional customizations beyond generated FontCustom styles
-
-.geoblacklight-icon {
-  color: $gray-600;
-  font-size: 1.2em;
-}
-
-.geoblacklight-stanford {
-  color: #8c1515;
-}
-
-.geoblacklight-public {
-  @extend .fa, .fa-unlock, .text-muted;
-}
-
-.geoblacklight-restricted {
-  @extend .fa, .fa-lock, .text-muted;
-  width: 17px;
-}
-
-.geoblacklight-citation {
-  @extend .fa, .fa-bookmark;
-}
-
-.geoblacklight-data-dictionary {
-  @extend .fa, .fa-book;
-}
-
-.geoblacklight-sms {
-  @extend .fa, .fa-mobile;
-}
-
-.geoblacklight-email {
-  @extend .fa, .fa-envelope;
-}
-
-.geoblacklight-relations-ancestor {
-  @extend .fa, .fa-pagelines;
-}
-
-.geoblacklight-relations-descendant {
-  @extend .fa, .fa-leaf;
-}
-
-.geoblacklight-web_services {
-  @extend .fa, .fa-external-link;
-}
-
-.geoblacklight-metadata {
-  @extend .fa, .fa-file-text-o;
-}
-
-.geoblacklight-carto {
-  @extend .fa, .fa-map-marker;
-}
-
-// DEPRECATED: Will be removed in GeoBlacklight v2.0
-.geoblacklight-cartodb {
-  @extend .geoblacklight-cartodb;
+// SVG icons via FontAwesome and IcoMoon, see geoblacklight-icons.json for project data
+
+span.icon-missing {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+}
+
+// CatalogController#index - Home
+.category-icon {
+  .blacklight-icons {
+    height: 6rem;
+    width: auto;
+  }
+
+  .blacklight-icons svg {
+    width:  100%;
+    height: 100%;
+    top: 2rem;
+  }
+}
+
+// CatalogController#show
+.document {
+  h2 {
+    .blacklight-icons {
+      height: 1.5rem;
+      width: auto;
+    }
+
+    .blacklight-icons svg {
+      width:  auto;
+      height: 100%;
+    }
+  }
+}
+
+// CatalogController#index - search results
+.facet-label {
+  .blacklight-icons, span.icon-missing {
+    margin-right:0.5em;
+  }
+}
+
+.blacklight-icons {
+  svg * {
+    width:  100%;
+    height: 100%;
+  }
 }

data/app/assets/stylesheets/geoblacklight/modules/item.scss

@@ -7,6 +7,7 @@
 
   #viewer-container {
     [data-map="item"] {
+      border: 1px solid $gray-400;
       height: 27.5rem;
     }
 
@@ -19,4 +20,20 @@
       }
     }
   }
+
+  .help-text {
+    cursor: pointer;
+  }
+
+  .truncate-abstract.collapse:not(.show),
+  .truncate-abstract.collapsing {
+    display: block;
+    display: -webkit-box;
+    height: auto;
+    min-height: #{8 * $line-height-base}rem;
+    max-height: #{8 * $line-height-base}rem;
+    overflow-y: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 8;
+  }
 }

data/app/assets/stylesheets/geoblacklight/modules/results.scss

@@ -3,44 +3,63 @@
 }
 
 .more-info-area {
-  float: left;
-  order:3;
   max-height: 100px;
   overflow:hidden;
+  padding-left: 2ch;
 }
 
-.text-span{
-  width:80%;
-  float:left;
+.documents-list {
+  @extend .mb-4;
 }
 
-.hide-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display:block
-}
+.index-split {
+  .index_title {
+    display: flex;
+    font-size: 1rem;
+    padding-right: 0;
+  }
 
-.status-icons {
-  order: 2;
-  margin-left: 0.5rem;
-}
+  .document-counter {
+    @extend .pr-1;
+  }
+
+  .caret-toggle {
+    @include caret('right');
+    padding-left: 0;
+    width: 28px;
 
-.index_title {
-  order: 1;
-  @extend .text-span;
-  @extend .hide-overflow;
-  @extend h5;
-  font-size:1rem;
-  width:80%;
+    &[aria-expanded="true"] {
+      @include caret('down');
+    }
+  }
+
+  .status-icons {
+    cursor: pointer;
+    margin-left: 0.5rem;
+    margin-top: -3px;
+    white-space: nowrap;
+    z-index: 2; // get the icons above the toggle
+  }
 }
 
-.caret-toggle {
-  @extend .fa, .fa-caret-right;
-  cursor: pointer;
-  width: 10px;
+#main-container {
+  .category-block {
+    min-height: 240px;
+
+    .category-icon {
+      font-size: 6em;
+    }
+  }
+
+  [data-map="index"] {
+    height: 400px;
 
-  &.open {
-    @extend .fa, .fa-caret-down;
+    .leaflet-control-container {
+      .search-control {
+        a {
+          color: $white;
+        }
+      }
+    }
   }
 }

data/app/assets/stylesheets/geoblacklight/modules/sidebar.scss

@@ -1,59 +1,29 @@
 // Mixins and shared properties for sidebar elements
-
 @mixin sidebar-children {
-  %list-group-item-children {
-    padding: 10px 15px;
-  }
-
-  %list-group-item-anchors {
-    text-align: center;
-    width: 1.4em;
-  }
-
-  margin-top: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
+  margin-top: 20px;
 
-  .card-header {
-    h2 {
-      display: inline-block;
-      padding-top: 8px;
-      padding-bottom: 8px;
-      margin-bottom: 0px;
-      font-size: 1rem;
-    }
+  .card-header h2 {
+    @extend .h6;
+    margin-bottom: 0px;
   }
 
   .card-subtitle {
-    margin: 1rem 0 .2rem;
-    font-size: .9rem;
+    margin: 1rem 0 0;
+    font-size: 1rem;
     font-weight: normal;
-    color: $gray-600;
   }
 
   .list-group {
-    padding-top: 24px;
-    padding-bottom: 24px;
-    padding-left: 4px;
-    padding-right: 4px;
+     border: 0;
+     margin: 8px 0;
 
     .list-group-item {
-      border-color: $white;
-      padding: 8px 16px;
+      border: 0;
+      padding: 0 0 0 20px;
 
       a {
-        @extend %list-group-item-children;
-
-        .geoblacklight {
-          color: $gray-600;
-        }
-      }
-    }
-
-    &-nested {
-      padding: 0;
-
-      .list-group-item {
-        padding: 8px 0;
+        display: block;
       }
     }
   }