commonwealth-vlr-engine 0.0.1

data/app/assets/stylesheets/commonwealth-vlr-engine/index.scss

@@ -0,0 +1,580 @@
+/* styles for index views */
+
+body.blacklight-catalog-index {
+
+  #main-container {
+    padding-top: 115px;
+  }
+
+}
+
+
+#search_mode_tabs {
+  li.active a {
+    font-weight: bold;
+  }
+}
+
+#appliedParams {
+  padding: 16px 9px;
+
+  #constraintsLinks {
+    margin-bottom: 0;
+
+    & > li:first-child {
+      padding-left: 4px;
+    }
+
+    & > li {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+
+  }
+
+  .appliedFilter {
+    z-index: 1;
+
+    .constraint-value, .remove {
+      background-color: #E2EDFE;
+    }
+
+    .filterName:after {
+      padding-left: 2px;
+    }
+
+  }
+
+}
+
+h4.suggest {
+  font-size: 14px;
+}
+
+#sortAndPerPage {
+  @include rounded-corners(3px);
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05) inset);
+  padding: 9px;
+  background-color: #F5F5F5;
+  border: 1px solid #E3E3E3;
+  margin-bottom: 10px;
+
+  .page_links {
+    padding: 6px 6px 6px 0;
+  }
+
+  .search-widgets {
+
+    .btn {
+      padding: 6px 5px;
+    }
+
+    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+      color:#FFFFFF;
+      background-color: $dropdown-hover-background;
+      background-image: linear-gradient(to bottom, $dropdown-hover-background-gradient-start, $dropdown-hover-background-gradient-end);
+      background-repeat: repeat-x;
+    }
+
+  }
+
+}
+
+.css-dropdown ul {
+  /* make sure dropdowns aren't hidden behind images */
+  z-index:1;
+}
+
+#documents {
+
+  /* generic all-purpose catalog#index stuff */
+
+  .index-title-icon { // icons for collections/institutions
+    width: 20px;
+    padding-left: 3px;
+    display: inline;
+  }
+
+  .document {
+
+    .documentHeader {
+
+      .document-title-heading {
+        font-weight: bold;
+
+        .document-counter {
+          display:none;
+        }
+
+      }
+
+    }
+
+    img {
+      border: 1px solid $light_gray;
+
+      &.index-title-icon { // icons for collections/institutions
+        border: none;
+      }
+
+    }
+
+  }
+
+  /* catalog#index list view */
+  &.documents-list {
+
+    .document {
+      border-bottom: 1px solid $light_gray;
+      margin-top: 10px;
+
+      .document-thumbnail {
+        float:left;
+        padding: 0 0 0 0;
+        min-width: 200px;
+
+        img {
+          height:auto;
+          width:auto;
+          max-height:200px;
+          max-width:200px;
+        }
+
+      }
+
+      .documentHeader {
+        float: left;
+        padding: 0 0 0 20px;
+        width: 65%;
+
+        .document-title-heading {
+          margin: 0 0 3px 0;
+        }
+
+      }
+
+      dl.document-metadata {
+        padding: 10px 0 0 20px;
+        float: left;
+        width: 65%;
+
+        dt {
+          color: $darker_gray;
+          width: 80px;
+        }
+
+        dd {
+          margin-left: 90px;
+          color: $darker_gray;
+        }
+
+      }
+
+      &.blacklight-collection {
+
+        .documentHeader {
+          width:60%;
+        }
+
+        .collection_view_all_link {
+          float:right;
+          font-size: 12px;
+
+          a {
+            color: $dark_gray;
+            &:hover {
+              color: $bl_link;
+              text-decoration: none;
+            }
+          }
+
+        }
+
+        .collection_index_container {
+          float: left;
+          width: 65%;
+          margin: 0 0 10px 20px;
+
+          .collection-location a {
+            color: $darker_gray;
+            &:hover {
+              color: $bl_link;
+              text-decoration: none;
+            }
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  /* gallery view */
+  &.gallery {
+    display: block;
+
+    .document.new_row {
+      clear:left;
+    }
+
+    .document {
+      min-height: 200px;
+      min-width: 200px;
+
+      .thumbnail {
+        border: none;
+
+        img {
+          height:auto;
+          width:auto;
+          max-height:200px;
+
+          &.index-title-icon {
+            width: 20px; // ugh, also declared above
+          }
+
+        }
+
+        .caption {
+          padding: 0 2px;
+
+          .documentHeader {
+
+            .document-title-heading {
+              line-height: 16px;
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  /* masonry view */
+  .masonry {
+
+    &.document {
+      margin:1px 0;
+
+      .thumbnail {
+        padding: 0 1px;
+
+        .caption {
+          left: 2px;
+          width: 97.5%;
+
+          .documentHeader {
+
+            .document-title-heading {
+              font-weight: normal;
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  /* slideshow view */
+  .grid {
+
+    .document {
+      margin-right: 16px;
+    }
+
+  }
+
+  #slideshow-modal {
+
+    .modal-dialog {
+
+      .modal-body {
+        height: 90%; // for IE <9
+        height: 90vh;
+
+        #slideshow {
+
+          .caption {
+
+            a {
+              color: white;
+
+              &:hover {
+                color: $bl_link;
+              }
+
+            }
+
+          }
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+
+div.record-padding {
+  width: 100%;
+
+  #pagination_links {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+}
+
+
+#search_tips_list li {
+  padding-bottom: 10px;
+}
+
+
+/* responsive styles */
+
+/* Large desktop */
+@media (min-width: 1200px) {
+
+  #documents {
+
+    /* list view */
+    &.documents-list {
+
+      .document {
+
+        .document-thumbnail {
+          min-width: 250px;
+
+          img {
+            max-height: 250px;
+            max-width: 250px;
+          }
+
+        }
+
+      }
+
+    }
+
+    /* gallery view */
+    &.gallery {
+
+      .document {
+
+        .thumbnail {
+
+          img {
+            max-height: 250px;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 991px) {
+
+  #sortAndPerPage {
+
+    .page_links {
+      font-size: 12px;
+      width: auto;
+      padding: 6px 3px 6px 0;
+    }
+
+    .search-widgets {
+
+      .btn {
+        padding: 6px 3px;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+
+    }
+
+  }
+
+  #documents {
+
+    /* list view */
+    &.documents-list {
+
+      .document {
+
+        dl.document-metadata {
+          padding: 10px 0 0 0;
+          font-size: 12px;
+          width: 60%;
+        }
+
+        &.blacklight-collection {
+
+          .documentHeader {
+            width:50%;
+          }
+
+          .collection_view_all_link {
+            font-size: 11px;
+          }
+
+          .collection_index_container {
+            font-size: 12px;
+            width: 56%;
+          }
+
+        }
+
+      }
+
+    }
+
+    /* gallery view */
+    &.gallery {
+
+      .document {
+        padding: 0;
+        min-width: 150px;
+
+        .thumbnail {
+
+          img {
+            max-height: 150px;
+          }
+
+        }
+
+      }
+
+    }
+
+    /* slideshow view */
+    .grid {
+
+      .document {
+        margin-right: 5px;
+      }
+
+    }
+
+  }
+
+}
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+
+  #sortAndPerPage {
+
+    .page_links {
+      font-size: 12px;
+    }
+
+    .search-widgets {
+
+      .btn {
+        padding: 5px 6px;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+
+      a.view-type-slideshow, a.view-type-masonry {
+        display: none;
+      }
+
+      a.view-type-gallery {
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+
+    }
+
+  }
+
+  #documents {
+
+    /* list view */
+    &.documents-list {
+
+      .document {
+
+        dl.document-metadata {
+          font-size: 12px;
+          width: 60%;
+
+          dd {
+            margin-left: 5px;
+          }
+
+        }
+
+        &.blacklight-collection {
+
+          .documentHeader {
+            width:53%;
+          }
+
+          .collection_index_container {
+            font-size: 12px;
+            width: 55%;
+          }
+
+        }
+
+      }
+
+    }
+
+    /* gallery view */
+    &.gallery {
+
+      .document.new_row {
+        clear:none;
+      }
+
+      .document.new_row_device {
+        clear:left;
+      }
+
+    }
+
+  }
+
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+
+  #sortAndPerPage {
+
+    .page_links, .search-widgets {
+      float:left !important;
+    }
+
+    .view-type-group {
+      display: none;
+    }
+
+  }
+
+}
+