spotlight-frontend 3.5.0-beta.1

package/app/assets/stylesheets/spotlight/_nestable.scss

@@ -0,0 +1,124 @@
+.dd {
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+tbody.dd-list {
+  display: table-row-group;
+  padding-left: 0;
+}
+
+tbody.dd-dragel {
+  display: table;
+}
+
+li.dd-item {
+  list-style: none;
+}
+
+tr.dd-item {
+  display: table-row;
+  position: relative;
+}
+
+.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
+.dd-list .dd-list { padding-left: 30px; }
+.dd-collapsed .dd-list { display: none; }
+
+.dd-item,
+.dd-empty,
+.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
+
+.dd-handle { display: block; height: 100%; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
+    background: #fafafa;
+    background: linear-gradient(to bottom, #fafafa 0%, #eee 100%);
+    border-radius: 3px;
+    box-sizing: border-box;
+}
+.dd-handle:hover { color: #2ea8e5; background: #fff; }
+
+.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
+.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
+.dd-item > button[data-action="collapse"]:before { content: '-'; }
+
+.dd-placeholder,
+.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; border: 1px dashed #b6bcbf; box-sizing: border-box; }
+.dd-empty { border: 1px dashed #bbb; min-height: 100px;
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
+                      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
+}
+
+.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
+.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
+.dd-dragel .dd-handle {
+            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
+}
+
+/**
+ * Nestable Extras
+ */
+
+.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
+
+
+.dd-hover > .dd-handle { background: #2ea8e5 !important; }
+
+/**
+ * Nestable Draggable Handles
+ */
+
+.dd3-content {
+    display: block;
+    margin: 5px 0;
+    background: #fafafa;
+    background:         linear-gradient(to bottom, #fafafa 0%, #eee 100%);
+    border-radius: 3px;
+    box-sizing: border-box;
+
+  &.card, .card {
+    padding: 0 0 0 30px;
+  }
+
+  .card-header[data-behavior="restore-default"] {
+    min-height: 3rem;
+  }
+}
+.dd3-content.page-admin {
+  position: relative;
+}
+.dd-dragel > .dd3-item > .dd3-content { margin: 0; }
+
+.dd3-item > button { margin-left: 30px; }
+
+.dd3-handle {
+    position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px;
+    text-indent: 100px;
+    white-space: nowrap; overflow: hidden;
+    border: 1px solid #aaa;
+    background: #ddd;
+    background: linear-gradient(to bottom, #ddd 0%, #bbb 100%);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.dd3-handle:before { content: '≡'; display: block; position: absolute; left: 0; top: 9px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
+.dd3-handle:hover { background: #ddd; }
+
+.dd3-content .card-body,
+.dd3-content .card-header {
+  padding: .5rem 1rem
+}
+
+.dd3-content.tag {
+  .dd3-handle {
+    display: none;
+  }
+
+  padding-left: 0;
+}

package/app/assets/stylesheets/spotlight/_pages.scss

@@ -0,0 +1,282 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/
+
+.blacklight-home_pages-show .edit-button {
+  margin-bottom: 2em;
+}
+
+.form-actions {
+  @extend .clearfix;
+}
+
+.primary-actions {
+  @extend .float-right;
+}
+
+#nested-pages {
+  margin-bottom: 1em;
+}
+
+.st-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: theme-colors("secondary");
+  padding: 3px 8px;
+  color: $body-color;
+  font-weight: bold;
+}
+
+.st-block__inner {
+  div.field + div.field {
+    margin-top: 2 * $spacer;
+  }
+
+  .field-select {
+    margin-bottom: $spacer;
+    @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
+      margin-bottom: 2 * $spacer;
+
+      > select {
+        margin-left: 2 * $spacer * 0.25;
+      }
+    }
+  }
+}
+
+#sidebar {
+  li {
+    margin-top: $spacer * 0.5;
+  }
+  h4 {
+    line-height: $line-height-lg;
+  }
+  .contacts-header {
+    margin-top: 4 * $spacer;
+  }
+
+  .contact-properties {
+    padding-left: 0.125rem;
+
+    > div {
+      padding-bottom: 5px;
+    }
+  }
+
+  ol.contacts {
+    line-height: 1.33;
+
+    li {
+      margin-bottom: 1rem;
+      margin-top: $spacer * .5;
+      word-break: break-word;
+      .name {
+        font-weight: bold;
+      }
+    }
+  }
+
+  ol.sidenav {
+    li {
+      color: $gray-900;
+      margin-top: $spacer * .5;
+    }
+
+    ol.subsection {
+      margin-bottom: $spacer;
+      padding-left: 0;
+      li {
+        list-style: square;
+        margin-left: 18px;
+        margin-top: $spacer * 0.5;
+      }
+    }
+  }
+}
+
+.contacts_admin .name {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.contact-photo {
+  border: 1px solid #ccc;
+  border-radius: $border-radius;
+  height: 70px;
+  margin-right: 15px;
+  margin-top: 3px;
+  min-width: 70px;
+}
+
+// Indent contact fields so they align evenly, only when there is a contact photo
+.sidenav.contacts .contact-photo + div[itemprop] ~ div[itemprop] {
+  margin-left: 85px;
+}
+
+.item-grid-block {
+  h3 { margin-top: 0; }
+
+  .text-col {
+    float: none;
+    width: auto;
+  }
+
+  .items-col {
+    display: flex;
+    margin-bottom: 1em;
+    z-index: 1;
+
+    @media (max-width: breakpoint-max("md")) {
+      margin-bottom: $line-height-lg;
+    }
+  }
+
+  .box {
+    align-self: auto;
+    flex: 1 0 25%;
+    margin: auto;
+    min-width: 25%;
+    order: 1;
+    padding: 5px;
+  }
+
+  .img-thumbnail {
+    border: 1px solid $gray-600;
+    border-radius: 0;
+    height: 110px;
+    object-fit: cover;
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+
+    @media (min-width: breakpoint-min("lg")) {
+      height: 160px; // default: no sidebar, no text column
+      // reduce height if on a page with a sidebar or text column, because will be less wide
+      .col-md-9 & {
+        height: 125px;
+      }
+    }
+  }
+
+  .item-0 {
+    flex: 3 1 41%;
+  }
+
+  .item-2 {
+    flex: 2 1 33%;
+  }
+
+  .item-0,
+  .item-1,
+  .item-2 {
+    order: 0;
+
+    .img-thumbnail {
+      height: 270px;
+    }
+  }
+}
+
+.preview-btn, .preview-exit-btn {
+  float: left;
+  width: 100px;
+}
+
+.missing-croppable {
+  display: none;
+}
+
+.item-input-field[disabled="disabled"] {
+  visibility: hidden;
+}
+
+.empty-page-block {
+  @extend .alert;
+  @extend .alert-info;
+  margin-top: $spacer;
+  h2 {
+    margin-top: 0;
+  }
+  p, ol > li {
+    padding: $spacer * 0.5;
+  }
+  ol > li:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.oembed-block {
+  @media (max-width: breakpoint-max("md")) {
+    margin-bottom: $spacer;
+  }
+
+  iframe {
+    @media (min-width: breakpoint-min("md")) {
+      max-width: 100%;
+    }
+  }
+}
+
+.items-block {
+
+  .text-col {
+    float: none;
+    width: auto;
+  }
+  .items-col {
+    z-index: 1;
+
+    @media (max-width: breakpoint-max("md")) {
+      margin-bottom: 0;
+    }
+
+    .box {
+      min-width: 150px;
+      -webkit-flex: 1 1 150px;
+    }
+
+    /* two items */
+    .box:first-child:nth-last-child(2),
+    .box:first-child:nth-last-child(2) ~ .box {
+      min-width: 250px;
+      -webkit-flex: 1 1 250px;
+    }
+
+    /* only images, no text */
+    &:last-child {
+      .box {
+        padding: 0.25em;
+        img {
+          max-height: 250px;
+          object-fit: cover;
+          @media (max-width: breakpoint-max("md")) {
+            max-height: 175px;
+          }
+        }
+
+        @media (max-width: breakpoint-max("md")) {
+          -webkit-flex: 1 1 175px;
+        }
+      }
+    }
+  }
+}
+
+.item-features .carousel-indicators {
+  @media (max-width: breakpoint-max("sm")) {
+    width: 100%;
+    margin-top: 2 * $spacer;
+  }
+}
+
+.carousel-block .carousel-caption h3 {
+  padding-left: 2 * $spacer;
+  padding-right: 2 * $spacer;
+}
+
+.zpr-link {
+  @extend .btn-sm;
+  margin-top: $spacer * .75;
+}

package/app/assets/stylesheets/spotlight/_report_a_problem.scss

@@ -0,0 +1,14 @@
+#report-problem-form {
+  display: none;
+  border-bottom: 1px solid $gray-600;
+
+  h2 {
+    @extend .sr-only;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  #new_contact_form .col-form-label {
+    text-align: right;
+  }
+}

package/app/assets/stylesheets/spotlight/_sir-trevor_overrides.scss

@@ -0,0 +1,87 @@
+/* CSS for use across sir-trevor widgets */
+
+.widget-header {
+  padding: 5px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #D4D4D4;
+}
+
+.blacklight-home_pages-edit {
+  [data-type="search_results"] {
+    display: none;
+  }
+}
+
+.content-block {
+  margin-top: 3*$spacer;
+  margin-bottom: 3*$spacer;
+}
+
+// Sir-trevor sets the overflow to hidden which
+// obscures the bottom of things like the typeahead
+.st-blocks {
+  overflow: visible;
+}
+
+.st-block__inner {
+  border: 1px solid $gray-700;
+  box-shadow: 3px 3px 15px $gray-700;
+  margin: 1em 20px;
+  padding: 1.875em 1.875em 2.8em;
+}
+
+.st-block--textable .st-block__inner {
+  margin: 1em 20px;
+  transition: padding-left .2s ease;
+}
+
+.st-block--empty.st-block--textable .st-block__inner {
+  padding-left: 75px;
+}
+
+.st-block-replacer {
+  top: 40%;
+}
+
+.form-group .st-text-block {
+  @extend .form-control;
+  height: auto !important;
+  min-height: 6em;
+}
+
+.st-block .st-block-ui-btn__delete {
+  display: block !important;
+}
+
+.st-block-addition {
+  display: block !important;
+}
+
+.st-block-controls {
+  display: none !important;
+}
+
+.st-block--controls-active .st-block__inner {
+  display: none;
+}
+
+.spotlight-block-controls {
+  border: 1px solid $gray-700;
+  border-radius: 4px;
+  box-shadow: 3px 3px 15px $gray-700;
+  margin: 1em 20px;
+  padding: 1.875em 1.875em 2.8em 70px;
+}
+
+.st-block-controls__button {
+  @extend .btn;
+  @extend .btn-secondary;
+  @extend .btn-outline-secondary;
+
+  border: 1px solid $gray-700;
+
+  .st-icon {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

package/app/assets/stylesheets/spotlight/_slideshow_block.scss

@@ -0,0 +1,87 @@
+.carousel-block {
+
+  .carousel-inner > .carousel-item > a > img {
+    // center and fill the image
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+  }
+
+  .carousel-caption {
+
+    // replace bottom margin with padding
+    bottom: 0;
+    padding-bottom: 40px;
+
+    // fill left + right
+    left: 0;
+    right: 0;
+
+    // and add a nice background gradient to the captions
+    @include gradient-y($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
+  }
+
+  // Scale up controls for tablets and up
+  @media screen and (min-width: breakpoint-min("sm")) {
+    // Show and left align the captions
+    .carousel-caption {
+      left: 0;
+      right: 0;
+      padding-bottom: 50px;
+    }
+  }
+
+  &.carousel-height-small {
+    .carousel-inner > .carousel-item > a > img {
+      height: 350px;
+    }
+  }
+
+  &.carousel-height-medium {
+    .carousel-inner > .carousel-item > a > img {
+      height: 500px;
+    }
+  }
+
+  &.carousel-height-large {
+    .carousel-inner > .carousel-item > a > img {
+      height: 800px;
+    }
+  }
+}
+
+.item-features {
+  .carousel-indicators {
+    bottom: initial;
+    left: initial;
+    margin-left: 0;
+    margin-right: 0;
+    text-align: left;
+
+    &.col-sm-6 {
+      @extend .col-sm-6;
+    }
+
+    li {
+      display: relative;
+      width: 100%;
+      height: auto;
+      text-indent: 0;
+      margin: 0;
+      border: none;
+      border-radius: 0;
+      opacity: 1;
+
+      @extend .list-group-item;
+    }
+
+    .active, .active:hover {
+      @extend .list-group-item;
+
+      width: 100%;
+      height: auto;
+
+      a { color: #fff; }
+    }
+  }
+}

package/app/assets/stylesheets/spotlight/_spotlight.scss

@@ -0,0 +1,49 @@
+@import "spotlight/variables";
+@import "spotlight/mixins";
+@import "bootstrap/variables";
+
+@import "spotlight/sir-trevor_overrides";
+@import "spotlight/attachments";
+@import "spotlight/pages";
+@import "spotlight/breadcrumbs";
+@import "spotlight/browse";
+@import "spotlight/browse_group_categories_block";
+@import "spotlight/header";
+@import "spotlight/footer";
+@import "spotlight/catalog";
+@import "spotlight/croppable";
+@import "spotlight/curation";
+@import "spotlight/exhibit_admin";
+@import "spotlight/exhibit_navbar";
+@import "spotlight/edit_in_place";
+@import "spotlight/featured_browse_categories_block";
+@import "spotlight/item_text_block";
+@import "spotlight/uploaded_items_block";
+@import "spotlight/modals";
+@import "spotlight/multi_image_selector";
+@import "spotlight/multi_up_item_grid";
+@import "spotlight/slideshow_block";
+@import "spotlight/upload";
+@import "spotlight/nestable";
+@import "spotlight/blacklight_configuration";
+@import "spotlight/typeahead";
+@import "spotlight/bootstrap_overrides";
+@import "spotlight/blacklight_overrides";
+@import "spotlight/report_a_problem";
+@import "spotlight/exhibits_index";
+@import "spotlight/collapse_toggle";
+@import "spotlight/translations";
+@import "spotlight/utilities";
+@import "spotlight/view_larger";
+@import "spotlight/accessibility";
+
+
+
+// Styles below keep footer at bottom of viewport
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  margin-bottom: $footer-height + $footer-top-margin;
+}

package/app/assets/stylesheets/spotlight/_translations.scss

@@ -0,0 +1,86 @@
+.translation-edit-form {
+  .translation-complete {
+    svg { fill: $translation-available-color }
+  }
+
+  .browse-category-title {
+    margin-bottom: $spacer;
+
+    label {
+      font-weight: normal;
+    }
+  }
+
+  .browse-category-description {
+    margin-bottom: $spacer * 2;
+  }
+
+  .table.table-striped th {
+    border-top: 0;
+  }
+}
+
+.translation-subheading {
+  border-bottom: 1px solid $border-color;
+  margin-bottom: 20px;
+  @extend .mt-4;
+}
+
+.form-group.translation-form {
+  .col-form-label {
+    padding-top: $card-spacer-y + $spacer;
+  }
+
+  .translation-complete {
+    padding-top: $card-spacer-y + $spacer;
+  }
+}
+
+.translation-subtitle-toggle,
+.translation-description-toggle {
+  margin: 0;
+  padding: 0;
+
+  &.collapsed {
+    .caret {
+      transform: rotate(-90deg);
+    }
+  }
+
+  label { cursor: pointer; }
+}
+
+.panel-translation {
+  background-color: $translation-panel-bg;
+  padding-bottom: 0;
+
+  .form-text {
+    color: $translation-help-color;
+    padding-left: 12px;
+  }
+}
+
+.default-page-outdated {
+  font-weight: 700;
+}
+
+.new-translated-page {
+  font-style: italic;
+}
+
+.browse-translations-header {
+  border-bottom: 1px solid $border-color;
+  color: $gray-600;
+  display: block;
+  font-size: $h4-font-size;
+  font-weight: bold;
+  margin-bottom: $spacer * 2;
+  margin-top: $spacer;
+  padding-bottom: 3px;
+}
+
+.translation-import-export-label {
+  @media (min-width: 576px) {
+    text-align: right;
+  }
+}