spotlight-frontend 3.5.0-beta.1

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

@@ -0,0 +1,269 @@
+$featured-browse-category-border-color: $border-color;
+$featured-browse-category-caption-color: $white;
+
+// These are the widths of the main content area at each viewport width
+$container-sm: 510px; // (Bootstrap 4 "sm")
+$container-md: 690px; // (Bootstrap 4 "md")
+$container-lg: 930px; // (Bootstrap 4 "lg")
+$container-xl: 1100px; // (Bootstrap 4 "xl")
+$container-xl-sidebar: 825px; // ("xl" main content area when sidebar present)
+
+// The aspect ratio factor determines the height of the tile.
+// Can use different values because images are background images
+// and will fit the container without distortion.
+$aspect-ratio-factor-4x3: 0.75; // 4:3 width:height
+$aspect-ratio-factor-1x1: 1; // 1:1 width: height
+
+// Horizontal space between tiles
+$tile-margin: 16px;
+
+// Limits size of tile in cases where calculations create unreasonably large tile
+$maximum-tile-width: 290px;
+
+// `xs` viewport width; always display one full-width tile, wrapping others
+$xs-one-tile-width: $maximum-tile-width;
+
+// `sm` viewport width
+$sm-one-tile-width: $xs-one-tile-width;
+$sm-two-tile-width: ($container-sm / 2) - $tile-margin;
+$sm-three-tile-width: ($container-sm / 3) - $tile-margin;
+
+// `md` viewport width
+$md-one-tile-width: $xs-one-tile-width;
+$md-two-tile-width: ($container-md/ 2) - $tile-margin;
+$md-three-tile-width: ($container-md / 3) - $tile-margin;
+
+// `lg` viewport width
+$lg-one-tile-width: $xs-one-tile-width;
+$lg-two-tile-width: ($container-lg/ 2) - $tile-margin;
+$lg-three-tile-width: ($container-lg / 3) - $tile-margin;
+$lg-four-tile-width: ($container-lg / 4) - $tile-margin;
+$lg-five-tile-width: ($container-lg / 5) - $tile-margin;
+
+// `xl` viewport width
+$xl-one-tile-width: $xs-one-tile-width;
+$xl-two-tile-width: ($container-xl/ 2) - $tile-margin;
+$xl-three-tile-width: ($container-xl / 3) - $tile-margin;
+$xl-four-tile-width: ($container-xl / 4) - $tile-margin;
+$xl-five-tile-width: ($container-xl / 5) - $tile-margin;
+
+// `xl` with sidebar viewport width
+$xl-sidebar-three-tile-width: ($container-xl-sidebar / 3) - $tile-margin;
+$xl-sidebar-four-tile-width: ($container-xl-sidebar / 4) - $tile-margin;
+$xl-sidebar-five-tile-width: ($container-xl-sidebar / 5) - $tile-margin;
+
+.browse-category {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: 2px solid $featured-browse-category-border-color;
+  border-radius: $border-radius-lg;
+  position: relative;
+
+  .category-caption {
+    bottom: 16px; // assumes default font-size of 16px, using browser default of 1 rem == 16px
+    color: $featured-browse-category-caption-color;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 1px 0 $black;
+    width: 100%;
+  }
+
+  .category-title {
+    font-size: $h4-font-size;
+    line-height: 1.2;
+    margin: 0;
+    padding: $spacer / 4;
+
+    @media (min-width: breakpoint-min("sm")) {
+      font-size: 1.125rem;
+    }
+
+    @media (min-width: breakpoint-min("md")) {
+      font-size: $h5-font-size;
+    }
+
+    @media (min-width: breakpoint-min("lg")) {
+      font-size: $h4-font-size;
+    }
+  }
+
+  .category-subtitle {
+    display: block;
+  }
+
+  .item-count {
+    font-size: $font-size-base;
+    text-transform: uppercase;
+
+    @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-min("lg")) {
+      font-size: $font-size-sm;
+    }
+  }
+}
+
+.spotlight-flexbox.browse-categories {
+  justify-content: space-around;
+
+  .box {
+    flex: none;
+    margin-bottom: 1rem;
+    min-width: 150px;
+    padding: 0;
+  }
+}
+
+// Most tile sizing works regardless of sidebar or not, because
+// only "lg" and "xl" have a sidebar, and "lg" with a sidebar
+// is the same width as "md" without a sidebar.
+[data-sidebar="false"],
+[data-sidebar="true"] {
+  &.categories-1, &.categories-2, &.categories-3,
+  &.categories-4, &.categories-5 {
+    .browse-category {
+      max-width: $maximum-tile-width;
+      max-height: $maximum-tile-width * $aspect-ratio-factor-4x3;
+      width: $xs-one-tile-width;
+      height: $xs-one-tile-width * $aspect-ratio-factor-4x3;
+    }
+  }
+  &.categories-2 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-two-tile-width;
+        height: $sm-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+  &.categories-3 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-three-tile-width;
+        height: $sm-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("lg")) {
+        width: $lg-three-tile-width;
+        height: $lg-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+  &.categories-4 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-two-tile-width;
+        height: $sm-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("lg")) {
+        width: $lg-four-tile-width;
+        height: $lg-four-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-four-tile-width;
+        height: $xl-four-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+  &.categories-5 {
+    .browse-category {
+      @media (min-width: breakpoint-min("sm")) {
+        width: $sm-three-tile-width;
+        height: $sm-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("md")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("lg")) {
+        width: $lg-five-tile-width;
+        height: $lg-five-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-five-tile-width;
+        height: $xl-five-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+}
+
+[data-sidebar="true"] {
+  // Font size smaller at "lg" breakpoint only when there is a sidebar
+  .browse-category {
+    .category-title {
+      @media (min-width: breakpoint-min("lg")) and (max-width: breakpoint-min("xl")) {
+        font-size: $h5-font-size;
+      }
+    }
+
+    .item-count {
+      @media (min-width: breakpoint-min("lg")) and (max-width: breakpoint-min("xl")) {
+        font-size: $font-size-sm;
+      }
+    }
+  }
+}
+
+// Special cases where the sizing above doesn't work when there is a sidebar.
+// Note that "lg" with a sidebar has the same available width as "md"
+// without a sidebar.
+[data-sidebar="true"] {
+  &.categories-3 {
+    .browse-category {
+      @media (min-width: breakpoint-min("lg")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-sidebar-three-tile-width;
+        height: $xl-sidebar-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+  &.categories-4 {
+    .browse-category {
+      @media (min-width: breakpoint-min("lg")) {
+        width: $md-two-tile-width;
+        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-sidebar-four-tile-width;
+        height: $xl-sidebar-four-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+  &.categories-5 {
+    .browse-category {
+      @media (min-width: breakpoint-min("lg")) {
+        width: $md-three-tile-width;
+        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
+      }
+
+      @media (min-width: breakpoint-min("xl")) {
+        width: $xl-sidebar-five-tile-width;
+        height: $xl-sidebar-five-tile-width * $aspect-ratio-factor-4x3;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+.site-footer {
+  background-color: $gray-700;
+  color: $gray-600;
+  margin-top: $footer-top-margin;
+  padding: 10px;
+
+  // Styles below keep footer at bottom of viewport
+  position: absolute;
+  bottom: 0;
+  height: $footer-height;
+  width: 100%;
+}

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

@@ -0,0 +1,155 @@
+@mixin masthead-background-containers() {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: block;
+  width: auto;
+  height: inherit;
+}
+
+.navbar-static-top {
+  margin-bottom: 0;
+}
+
+.masthead {
+  background-color: $masthead-bg;
+  border-bottom: 1px solid $border-color;
+  margin-bottom: $spacer * 1.5;
+  padding: 0;
+  position: relative;
+
+
+  .site-title {
+    margin-bottom: 0;
+  }
+
+  .site-title-wrapper {
+    margin-top: $spacer * 1.25;
+    padding-bottom: $spacer * 0.75;
+    position: relative;
+    white-space: nowrap;
+  }
+
+  small {
+    @extend .d-none;
+    @extend .d-md-block;
+    @extend .py-2;
+
+    font-size: $h4-font-size;
+  }
+
+  .navbar {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .navbar-form {
+    text-align: right;
+  }
+}
+
+.resource-masthead {
+  .site-title {
+    @extend .text-center;
+  }
+
+  .navbar {
+    border-bottom: 1px solid $navbar-transparent-border;
+    border-top: 0;
+    margin-bottom: 0;
+  }
+
+  .navbar-nav {
+    float: right;
+  }
+
+  .search-query-form {
+    display: none;
+  }
+}
+
+.site-title-container {
+  @extend .px-4;
+  @extend .py-2;
+
+  max-height: $masthead-height - $navbar-brand-height;
+}
+
+.image-masthead {
+  background-color: $black;
+
+  .exhibit-navbar {
+    @extend .navbar-dark;
+    background-color: $navbar-transparent-page-bg;
+
+    .navbar-nav {
+      text-transform: uppercase;
+
+      .dropdown-menu {
+        text-transform: none;
+      }
+    }
+  }
+
+  .h2 {
+    color: $white;
+    text-shadow: 1px 1px 0 $gray-900;
+  }
+
+  small {
+    color: $white;
+  }
+
+  // This is to add a background image to the masthead, in a way that
+  // enables the site title and subtitle text to be visible above it.
+  .background-container {
+    @include masthead-background-containers();
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    // Add right border to image to hide lighter blurred edge
+    border-right: 1px solid $black;
+
+    // Add small amount of blur to help text stand out
+    //filter: url(masthead/blur.svg#blur); // for older versions of FF
+    -webkit-filter: blur($masthead-image-blur);
+    filter: blur($masthead-image-blur);
+
+    height: 100%;
+
+    // Shift image slightly to hide blurred edge of image
+    margin-left: -$masthead-image-blur;
+    margin-top: -$masthead-image-blur;
+    overflow: hidden;
+  }
+
+  // Include gradient to improve text legibility,
+  // especially on light background images.
+  .background-container-gradient {
+    @include masthead-background-containers();
+    background:
+     linear-gradient(
+       rgba(0, 0, 0, 0.0),
+       rgba(0, 0, 0, 0.4),
+       rgba(0, 0, 0, 0.5)
+     );
+
+    height: 100%;
+  }
+}
+
+.col-md-4 {
+  .submit-search-text {
+    // hide 'search' label
+    // copied from .sr-only, sadly can't seem to use @extend in a media
+    // query like this, have to copy.
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+  }
+}

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

@@ -0,0 +1,50 @@
+@mixin record-thumbnail-textarea {
+  color: #42474b;
+  border: 0.1em solid #d4d4d4;
+  padding: 0 .6em;
+}
+
+.st-block input[type="text"] {
+    @extend .form-control;
+}
+.primary-caption, .secondary-caption, .auto-cyle-images {
+  select {
+    margin-left: 10px;
+  }
+}
+
+.max-heights {
+  label.carousel-size {
+    margin-left: 5px;
+    padding-right: 10px;
+    font-weight: normal;
+  }
+}
+
+.item-text {
+  .items-col {
+    z-index: 1;
+  }
+}
+
+.item-text-admin {
+  .text-align {
+    margin-top: 15px;
+  }
+  .dd3-content {
+    &.card {
+      padding-left: 0;
+    }
+  }
+  #item-text {
+    @extend .form-control;
+
+    min-height: 7em;
+
+    &:hover, &:active {
+      @include record-thumbnail-textarea;
+    }
+    @include record-thumbnail-textarea;
+
+  }
+}

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

@@ -0,0 +1,17 @@
+@mixin edit-in-place-highlighting() {
+  background: #F7F7D0;
+  cursor: text;
+}
+
+@mixin panel-hover-highlighting() {
+  background: $gray-300;
+}
+
+@mixin private-label() {
+  &:after {
+    @extend .badge;
+    @extend .badge-warning;
+    content: 'Private';
+    margin-left: 3px;
+  }
+}

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

@@ -0,0 +1,3 @@
+.modal-body .form-check-label {
+  margin-bottom: 0.5rem;
+}

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

@@ -0,0 +1,22 @@
+.thumbs-list {
+  overflow-x: scroll;
+  height: 150px;
+  padding-bottom: 10px;
+  position: relative;
+  ul {
+    background: white;
+    padding-left: 0;
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    position: absolute;
+    li {
+      flex: 0 0 auto;
+      min-width: 60px;
+      padding: $spacer $spacer;
+      &.active {
+        background-color: #999999;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+.item-grid-admin {
+  .field {
+    input[type='text'] {
+      width: 89%;
+    }
+
+    .twitter-typeahead {  
+      margin-bottom: 2*$spacer;
+    }
+  }
+  .field-select {
+    margin-top: 2*$spacer;
+    select {
+      display: inline;
+      width: auto;
+    }
+  }
+  .dd3-item {
+    margin-bottom: 2*$spacer;
+  }
+}
+// Hide the secondary caption field
+// for the Features block so we can
+// re-use the rest from the generic
+// multi-up item grid.
+[data-type='item-features'] {
+  .secondary-caption {
+    display: none;
+  }
+}
+.spotlight-flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  flex-flow: row wrap;
+
+  .box {
+    text-align: center;
+    padding: 1em;
+    min-width: 125px;
+
+    @media (max-width: breakpoint-max("sm")) {
+      min-width: 200px;
+      -webkit-flex: 1 1 200px;
+    }
+
+    .caption {
+      margin-top: 5px;
+      font-style: italic;
+    }
+    img {
+      max-width: 100%;
+    }
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-flex: 1 1 125px;
+  }
+}