spotlight-frontend 3.5.0-beta.1

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

@@ -0,0 +1,224 @@
+.page-links a {
+  padding-left: 0;
+  padding-right: 0;
+  line-height: $btn-line-height;
+  @include font-size($btn-font-size);
+}
+
+.missing-description {
+  font-style: italic;
+}
+.expanded-add-button {
+  display: inline-block;
+  .input-field {
+    input[type='text'] {
+      @extend .form-control-sm;
+      height: auto;
+      padding: 0 5px;
+      width: 195px;
+      color: black;
+      border-color: white;
+    }
+    input[type='submit'] {
+      @extend .btn;
+      @extend .btn-secondary;
+      @extend .btn-sm;
+    }
+    display: none;
+  }
+  [data-expanded-add-button] {
+    text-align: left;
+  }
+}
+
+
+.card-header {
+  .pic {
+    width: 70px;
+    display: inline-block;
+    margin-bottom: 0;
+  }
+
+  .form-check-inline {
+    margin-top: -3px;
+    vertical-align: middle;
+  }
+
+  .main {
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+
+  .btn-link.collapse-toggle {
+    // removing padding and margins to style this button as a simple link
+    // with the expected vertical alignment with the rest of the header.
+    margin: 0;
+    padding: 0;
+  }
+}
+
+[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;
+}
+
+.home_page .card {
+  .card-body {
+    @extend .py-2;
+    @extend .px-3;
+  }
+
+  .card-title {
+    @extend .mb-0;
+    @extend .py-2;
+  }
+}
+
+
+.card.page-admin {
+  &:hover {
+    @include panel-hover-highlighting;
+  }
+  .card-title {
+    @extend .mb-0;
+    @extend .py-2;
+  }
+
+  .page-links, .contact-links {
+    text-align: right;
+    a {
+      padding: 0 2px;
+    }
+  }
+  .main {
+    width: 99%;
+    vertical-align: text-top;
+  }
+}
+
+.contacts_admin .card-header.page .main {
+  width: 95%;
+}
+
+.card-header.item-grid {
+  &:hover {
+    @include panel-hover-highlighting;
+  }
+  .main {
+    width: 65%;
+    vertical-align: top;
+    display: inline-block;
+    margin-left: $spacer;
+  }
+  .remove {
+    width: 10%;
+    vertical-align: top;
+    display: inline-block;
+    margin-left: $spacer;
+  }
+}
+
+.search_admin {
+  .pic {
+    flex-basis: 70px;
+  }
+
+  .main {
+    flex-basis: 40%;
+  }
+
+  .description {
+    flex-basis: 30%;
+  }
+}
+
+#edit-search {
+  #preview {
+    height: 60px;
+    width: 60px;
+  }
+}
+
+h1,h2,h3,h4,h5,h6 {
+  & + .instructions {
+    border-top: 1px solid lightgray;
+    padding-top: 5px;
+  }
+}
+
+.label.curation-widget {
+  display: inline-block;
+  margin-top: 1em;
+  padding: 0.7em 1em;
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+}
+
+#content-header {
+  height: auto;
+  min-height: 0;
+}
+
+.spotlight-admin-thumbnail {
+  position: relative;
+  .badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.facet-metadata {
+  @extend .text-muted;
+  font-size: $font-size-base;
+  text-align: right;
+}
+
+table#exhibit-specific-fields {
+  margin-top: 1em;
+  .field-label {
+    min-width: 10em;
+    font-size: $h4-font-size;
+  }
+  .field-description {
+    font-size: $font-size-base;
+    vertical-align: middle;
+  }
+  .actions a {
+    padding: 0 2px;
+  }
+}
+
+#nested-navigation {
+  margin-bottom: 2 * $spacer;
+}
+
+table.users {
+  td:nth-child(3), th:nth-child(3) {
+    text-align: center;
+  }
+}
+
+table.tags {
+  td:nth-child(2), th:nth-child(2) {
+    text-align: right;
+  }
+  td:nth-child(3), th:nth-child(3) {
+    text-align: center;
+  }
+}
+
+.card-title .subtitle::before {
+  content: " \000B7 ";
+  color: $text-muted;
+  padding-right: 3px;
+}

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

@@ -0,0 +1,9 @@
+.edit-in-place {
+  cursor: text;
+  color: inherit;
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+    @include edit-in-place-highlighting;
+  }
+}

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

@@ -0,0 +1,81 @@
+.exhibit-admin {
+  .contact {
+    margin-bottom: 0.5em;
+  }
+
+  #another-email {
+    cursor: hand;
+  }
+  .confirmation-status {
+    margin-top: 10px;
+    margin-left: 0;
+    padding-left: 0;
+
+    &.not-validated {
+      margin-top: 0;
+    }
+
+    .confirmed {
+      @extend .text-success;
+      white-space: nowrap;
+    }
+    .unconfirmed {
+      @extend .text-danger;
+    }
+
+    a {
+      white-space: nowrap;
+    }
+  }
+}
+
+#edit-search {
+  .remove {
+    display: none;
+  }
+
+  .constraint-value {
+     @include border-right-radius($border-radius-sm);
+  }
+
+  .form-control-plaintext { display: none; }
+}
+
+.analytics {
+  border-bottom: 1px solid $table-border-color;
+  table-layout: fixed;
+  text-align: center;
+
+  & > tfoot > tr > th {
+    padding-top: 0;
+    border-top: 0;
+    text-align: center;
+  }
+
+  th, td {
+    &:first-child {
+      border-left: 0;
+    }
+
+    border-left: 1px solid $table-border-color;
+  }
+}
+
+.pending-label {
+  display: none;
+}
+
+.invite-pending {
+  .pending-label {
+    display: inline;
+  }
+}
+
+.download-csv {
+  align-items: flex-end;
+  display: flex;
+
+  .btn-primary {
+    margin-bottom: $spacer;
+  }
+}

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

@@ -0,0 +1,10 @@
+.exhibit-navbar {
+  .navbar-nav,
+  .exhibit-search-form {
+    width: 100%;
+
+    @media (min-width: breakpoint-min("md")) {
+      width: auto;
+    }
+  }
+}

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

@@ -0,0 +1,147 @@
+$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 {
+  background: $exhibit-card-bg;
+  overflow-y: hidden;
+  padding-bottom: 3rem;
+
+  .unpublished {
+    @extend .mx-auto;
+    display: block;
+    font-size: $font-size-sm;
+    margin-top: -1.5rem;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 15ch;
+  }
+
+  .card-title {
+    -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 {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  .description {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    font-size: $font-size-sm;
+    -webkit-line-clamp: 15;
+    overflow: hidden;
+  }
+
+  &:hover {
+    .exhibit-description {
+      max-height: 450px;
+    }
+  }
+
+  &:focus-within {
+    // Use Bootstrap focus style
+    outline: $input-focus-border-color auto 5px;
+
+    // Use WebKit focus styles if available
+    @supports (-webkit-appearance:none) {
+      outline-color: -webkit-focus-ring-color;
+    }
+
+    .exhibit-description {
+      max-height: 450px;
+    }
+  }
+
+  @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;
+    }
+  }
+
+  @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
+    .description {
+      -webkit-line-clamp: 4;
+    }
+
+    .subtitle {
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  @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;
+    }
+  }
+}