commonwealth-vlr-engine 0.0.1

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

@@ -0,0 +1,329 @@
+/* styles for views/shared/header */
+
+#header-navbar {
+  min-width: 320px;
+  height:92px;
+  margin-bottom: 0;
+  background-color:#f9f9f9;
+  background-image:-moz-linear-gradient(top, #fff, #f2f2f2);
+  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f2f2f2));
+  background-image:-webkit-linear-gradient(top, #fff, #f2f2f2);
+  background-image:-o-linear-gradient(top, #fff, #f2f2f2);
+  background-image:linear-gradient(to bottom, #fff, #f2f2f2);
+  background-repeat:repeat-x;
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFF2F2F2', GradientType=0);
+  border-bottom:1px solid #d4d4d4;
+  -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.3);
+  -moz-box-shadow:0 1px 5px rgba(0,0,0,0.3);
+  box-shadow:0 1px 5px rgba(0,0,0,0.3);
+
+  .navbar-header {
+    height: 5.5em;
+    padding-top: 0.5em;
+    float: none;
+
+    /* The main logo image for the Blacklight instance */
+    .navbar-brand {
+      width: 205px;
+      background:transparent asset_url($header_logo_image) no-repeat top left;
+      display: inline-block;
+      text-indent: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      padding-right:0;
+      margin-left: 0;
+      margin-right:20px;
+      padding-left: 0;
+      height: 74px;
+    }
+
+    #user-util-collapse {
+      padding-right:0;
+
+      #user-util-links {
+        font-size: 12px;
+        text-align: right;
+        height: 42px;
+
+        #util-links-nologin, #user-nav-btn {
+          display: inline-block;
+          vertical-align: super;
+        }
+
+        #user-nav-btn {
+          vertical-align: top;
+          padding-top: 6px;
+        }
+
+        ul.dropdown-menu {
+          text-align: left;
+          font-size: 12px;
+
+          > li > a:hover {
+            color:#FFFFFF;
+            background-color: #0081C2;
+            background-image: linear-gradient(to bottom, #0088CC, #0077B3);
+            background-repeat: repeat-x;
+          }
+
+        }
+
+        #header-search {
+          display: inline-block;
+          padding: 0.4em 0 0 0.7em;
+
+          input {
+            padding: 0 0 0 4px;
+            width: 120px;
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+            height: 20px;
+          }
+
+          .submit-search-text {
+            display: none;
+          }
+
+        }
+
+      }
+
+    }
+
+    #nav_collapse_button {
+      padding: 7px 8px 4px 5px;
+      border-color: #DDDDDD;
+
+      .glyphicon-search {
+        display: inline-block;
+        position: relative;
+        -moz-opacity: 0.6;
+        opacity: 0.6;
+        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+        top:0px;
+      }
+
+      #icon-bar-wrapper {
+        display: inline-block;
+
+        .icon-bar {
+          background-color: #888888;
+        }
+
+      }
+
+    }
+
+    #header_main_nav {
+      float: right;
+      margin-bottom: 0;
+      padding-top: .2em;
+    }
+
+    .navbar .nav {
+      margin: 0;
+
+      > li > a {
+        padding: 10px 60px 10px 0;
+        background-color: inherit;
+        color: #777777;
+
+        &:hover {
+          color: #333333;
+        }
+
+      }
+
+      > li.last_nav > a {
+        padding: 10px 0;
+      }
+
+      > li.dropdown > a.active  {
+        background-color: inherit;
+        box-shadow: none;
+        color: #333333;
+      }
+
+      li.dropdown.open > .dropdown-toggle,
+      li.dropdown.active > .dropdown-toggle,
+      li.dropdown.open.active > .dropdown-toggle {
+        background-color: inherit;
+      }
+
+      li.dropdown .dropdown-menu {
+        margin: 0;
+
+        > li > a:hover {
+          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;
+        }
+
+      }
+
+      /* display nav dropdown menus on hover */
+      li.dropdown:hover .dropdown-menu {
+        display: block;
+      }
+
+    }
+
+  }
+
+}
+
+
+/* styles for expanded nav */
+
+.navbar-collapse.in.collapse, .navbar-collapse.collapsing {
+  background-color: #f2f2f2;
+  @include rounded-corners(0 0 5px 5px);
+  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid $light_gray;
+  border-left: 1px solid $light_gray;
+  border-right: 1px solid $light_gray;
+  /* float: right; */
+  padding-right: 5px !important;
+  position: relative;
+  left: 7px;
+  top: 9px;
+  width: 98%;
+  z-index: 20;
+}
+
+.navbar-collapse {
+
+  .btn {
+    padding: 0 6px;
+  }
+
+  .nav > li {
+    float: left;
+  }
+
+}
+
+
+/* responsive styles */
+
+/* greater than Portrait tablet (iPad) to landscape and desktop */
+@media (min-width: 768px) and (max-width: 991px) {
+
+  #header-navbar {
+
+    .navbar-header {
+
+      .navbar .nav > li > a {
+        padding: 10px 40px 10px 0;
+      }
+
+      .navbar .nav > li.last_nav > a {
+        padding: 10px 0;
+      }
+
+    }
+
+  }
+
+}
+
+/* Landscape phone to portrait tablet (iPad) */
+@media (max-width: 767px) {
+
+  #header-navbar {
+
+    .navbar-header {
+
+      #user-util-collapse {
+
+        #user-util-links {
+
+          #header-search {
+            float:none;
+            width:30%;
+
+            input {
+              width:100%;
+            }
+
+          }
+
+        }
+
+      }
+
+      .navbar .nav {
+
+        > li.dropdown > a.active  {
+          color: #777777;
+        }
+
+        /* don't display nav dropdown menus on hover */
+        li.dropdown:hover .dropdown-menu {
+          display: none;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+
+  #header-navbar {
+
+    .navbar-header {
+
+      #user-util-collapse {
+          width:93%;
+
+        #user-util-links {
+
+          #util-links-nologin {
+            display: block;
+          }
+
+          #header-search {
+            float:none;
+            width:43%;
+
+            input {
+              width:100%;
+            }
+
+          }
+
+        }
+
+        #header_main_nav {
+          padding-top:13px;
+        }
+
+        .navbar .nav {
+          text-align: right;
+
+          > li, li.last_nav {
+            float: none;
+
+            > a {
+              padding: 4px 0;
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+

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

@@ -0,0 +1,269 @@
+/* styles for home page view */
+
+/* don't show the search icon on home page */
+body.blacklight-home {
+
+  #header-navbar .navbar-header #nav_collapse_button {
+    padding-left: 8px;
+
+    .glyphicon-search {
+      display: none;
+    }
+
+  }
+
+}
+
+#content_home {
+  padding-top: 13px;
+
+  #hero_search {
+    @include rounded-corners(5px);
+    background-color: #eeeeee;
+    text-align: center;
+    padding: 0 0 25px 0;
+    height: 235px;
+    width: 48.5%; /* ARRGH! */
+
+    #hero_search_headline {
+      width:78%;
+      margin: auto;
+      text-align: left;
+
+      h2 {
+        font-size: 24px;
+        line-height: 30px;
+        padding: 15px 0 10px 5px;
+      }
+    }
+
+    #hero_search_form {
+      padding-top:10px;
+
+      div.search_select_wrapper {
+        display: inline;
+      }
+
+      #search_field {
+        text-align: left;
+        height: 34px;
+        margin-right: 3px;
+      }
+
+    }
+
+  }
+
+  #content_home_browse {
+    margin-top: 50px;
+
+    div.browse_item {
+      text-align: center;
+
+      a.browse_icon_link {
+        color: $dark_gray;
+      }
+
+      img.browse_img {
+        width:120px;
+        border: 1px solid $light_gray;
+      }
+
+      .browse_item_desc {
+        font-size: 16px;
+        color: $darker_gray;
+      }
+
+    }
+
+  }
+
+  #content_home_context {
+    margin-top: 30px;
+
+    #content_home_news li {
+      padding-bottom: .5em;
+    }
+
+    .more-info-link {
+      text-align: right;
+      padding-right: 1em;
+    }
+
+
+  }
+
+}
+
+
+
+/* Large desktop */
+@media (min-width: 1200px) {
+
+  #content_home {
+
+    #hero_search {
+      height: 287px;
+
+      #hero_search_headline {
+        width:81%;
+
+        h2 {
+          font-size: 31.5px;
+          line-height: 35px;
+          padding: 30px 0 10px 10px;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 991px) {
+
+  #content_home {
+
+    #hero_search {
+      height: 179px;
+
+      #hero_search_headline {
+        width:82%;
+
+        h2 {
+          font-size: 20px;
+          line-height: 20px;
+          padding: 10px 0 0 7px;
+        }
+
+      }
+
+      #hero_search_form {
+
+        #search_field {
+          display:none;
+        }
+
+        #q {
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
+        }
+
+      }
+
+    }
+
+    #content_home_browse h4 {
+      font-size: 16px;
+    }
+
+  }
+
+}
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+
+  #content_home {
+
+    #hero_search {
+      margin-bottom: 20px;
+      height: auto;
+      margin-left: 15px;
+      width: 95%;
+
+      #hero_search_headline {
+        width:82%;
+        text-align: center;
+
+        h2 {
+          padding: 25px 0 0 5px;
+        }
+
+      }
+
+      #hero_search_form {
+        padding-top: 0;
+        width:75%;
+        display: inline-block;
+
+        div.search_select_wrapper {
+          float: left;
+        }
+
+      }
+
+    }
+
+    #content_home_browse {
+      margin-top: 10px;
+
+      h4 {
+        font-size:24px;
+      }
+
+      img.media-object {
+        width: 70px;
+      }
+
+    }
+
+  }
+
+
+
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+
+  #content_home {
+
+    #hero_search {
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      height: auto;
+      width: 91%;
+
+      #hero_search_headline {
+
+        h2 {
+          font-size: 16px;
+          line-height: 20px;
+          padding: 15px 0 0 5px;
+        }
+
+      }
+
+      #hero_search_form {
+        padding-top: 0;
+
+        form.search-query-form {
+          padding-top: 0;
+          margin-top:0;
+
+          #search_field {
+            display:none;
+          }
+
+          #q {
+            border-bottom-left-radius: 4px;
+            border-top-left-radius: 4px;
+          }
+
+          .submit-search-text {
+            display: none;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+}