umlaut 3.0.5 → 3.1.0.pre1

data/app/assets/stylesheets/umlaut.css.scss

@@ -0,0 +1,19 @@
+// Bootstrap Variable over-rides can go here
+
+
+@import "bootstrap";
+@import "bootstrap-responsive";
+@import "umlaut/variables";
+@import "umlaut/mixins";
+@import "umlaut/layout";
+@import "umlaut/icons";
+@import "umlaut/forms";
+@import "umlaut/misc";
+@import "umlaut/az";
+@import "umlaut/search";
+@import "umlaut/results";
+@import "umlaut/resolve";
+@import "umlaut/spinner";
+@import "umlaut/admin";
+@import "umlaut/modal";
+

data/app/assets/stylesheets/umlaut/_admin.scss

@@ -0,0 +1,14 @@
+// ADMIN SCREENS
+// Most of admin screen CSS is about _undoing_ general customizations
+// umlaut css (or over-eager reset.css we're using, bah) 
+// did to all HTML elements, oops. 
+ 
+.admin {
+  ul {
+    list-style-type: disc;
+  }
+  
+  form {
+    margin-bottom: 1em;
+  }
+}

data/app/assets/stylesheets/umlaut/_az.scss

@@ -0,0 +1,29 @@
+// Az links based on bootstrap pagination, but tweaked, among other
+// things to wrap better. a-z links are ridiculous, but expected by
+// our users. 
+.umlaut-az {
+  @include clearfix;
+  a, span {
+    float: left;
+    margin-bottom: $baseLineHeight / 4;
+    margin-right: $baseLineHeight / 4;
+    @include border-radius(4px);
+    padding: 4px 8px;
+    border: 1px solid $umlautAzBorderColor;
+    line-height: $baseLineHeight;
+    text-decoration: none;
+    color: $umlautAzLinkColor;
+    background-color: $paginationBackground;
+    &:hover {
+      background-color: $paginationActiveBackground;
+    }
+
+    &.active {
+      background-color: transparent;
+      color: inherit;
+      &:hover {
+      background-color: transparent;;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/umlaut/_forms.scss

@@ -0,0 +1,31 @@
+input[type="submit"] {
+  @extend .btn;
+}
+
+/* Used on search form, our own .very-inline is added to form-inline, its 
+   SUPER inline, and allows multiple controls on a line, lined up well, with 
+   sub-groups of controls in span.control-sub-group */
+.form-inline.form-very-inline  {
+  .control-group {
+    display: inline-block;
+    line-height: ($baseLineHeight * 2);
+    margin-right: $umlautIndent;
+  }
+  .control-sub-group {
+    display: inline-block;
+    margin-right: $umlautIndent;
+  }
+  label, select, text-area, input, .uneditable-input {
+    vertical-align: bottom;
+  }
+  legend + .control-group {
+    margin-top: 0; //not sure why bootstrap did a margin here
+  }
+
+}
+
+@media (max-width: 767px) {
+  .umlaut-citation-link {
+    text-align: left;
+  }
+}

data/app/assets/stylesheets/umlaut/_icons.scss

@@ -0,0 +1,64 @@
+[class^="umlaut_icons-"],
+[class*=" umlaut_icons-"] {
+  @include umlaut_icons;
+}
+
+.umlaut_icons-famfamfam-book-go {
+  background-position: 0 -32px;
+}
+
+.umlaut_icons-famfamfam-book-open {
+  background-position: 0 -96px;
+}
+
+.umlaut_icons-famfamfam-book {
+  background-position: 0 -112px;
+}
+
+.umlaut_icons-famfamfam-cross {
+  background-position: 0 -80px;
+}
+
+.umlaut_icons-famfamfam-error {
+  background-position: 0 -64px;
+}
+
+.umlaut_icons-famfamfam-help {
+  background-position: 0 0;
+}
+
+.umlaut_icons-famfamfam-information {
+  background-position: 0 -16px;
+}
+
+.umlaut_icons-famfamfam-link {
+  background-position: 0 -160px;
+}
+
+.umlaut_icons-famfamfam-page-sound {
+  background-position: 0 -48px;
+}
+
+.umlaut_icons-famfamfam-page-text {
+  background-position: 0 -144px;
+}
+
+.umlaut_icons-famfamfam-page-up {
+  background-position: 0 -128px;
+}
+
+.umlaut_icons-famfamfam-page-white {
+  background-position: 0 -184px;
+}
+
+.umlaut_icons-famfamfam-tiny-cross {
+  background-position: 0 -176px;
+}
+
+.umlaut_icons-list-closed {
+  background-position: 0 -216px;
+}
+
+.umlaut_icons-list-open {
+  background-position: 0 -200px;
+}

data/app/assets/stylesheets/umlaut/_layout.scss

@@ -0,0 +1,52 @@
+// Bootstrap does some weird things with body/container-fluid margin/padding
+// swapping it around at different sizes. We had trouble working with that,
+// so make it more consistent here. 
+body {
+  background-color: $umlautBackgroundColor;
+  padding: 0;
+  margin: 0;
+}
+.container-fluid {
+  @include umlaut-container();  
+  // max width and center beyond that
+  max-width: $umlautContainerMaxWidth;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header {
+  @include umlaut-container();
+  @include clearfix();    
+  background-color: $umlautHeaderBackgroundColor;
+  border: {
+    bottom: 1px solid $umlautHeaderBorderColor;
+  }    
+  color: $navbarBrandColor;
+  h1 {
+    //semantically an h1, but let's make it not so big, inspired
+    //by twitter's navbar styles, copied
+    display: inline;
+    float: left;    
+    margin: 0 $umlautIndent 0 0;
+    padding: 0;    
+    font-size: 20px;
+    font-weight: 200;
+  }
+  line-height: 40px;
+}
+
+
+.footer {
+  @include umlaut-container();
+  margin: {
+    top: $baseLineHeight;
+  }
+  padding: {
+    top: 10px;
+    bottom: 10px;
+  }
+  border: {
+    top: 1px solid $umlautBorderColor;
+  }
+}
+

data/app/assets/stylesheets/umlaut/_misc.scss

@@ -0,0 +1,59 @@
+.umlaut-separator {
+  border-top: 1px solid $umlautBorderColor;
+  padding-top: 15px;
+}
+
+.text-small {
+  font: {
+    size: $fontSizeSmall
+  }
+}
+
+.alert {
+  font-size: 125%;
+  li {
+    margin-top: 1em;
+  }
+}
+
+.collapsible .collapse {
+  margin-top:  $baseLineHeight / 2; 
+}
+
+/* Google Scholar Link: 
+   Make the example look like it does on google scholar: */
+.gscholar_example {   
+   color: blue;
+   font-variant: small-caps;
+}
+
+// even smaller than bootstrap's input-mini, for volume/issue/start page
+.input-tiny      { width: 45px; }
+
+.umlaut-permalink {
+  text-align: right;
+  margin-left: $umlautIndent;
+}
+
+.umlaut-permalink-value {
+  @include text-overflow;
+}
+
+.umlaut-load-permalink i {
+  @include umlaut_icons;
+  @extend .umlaut_icons-famfamfam-link;
+  margin-top: 2px;
+}
+
+// Used to conveniently add a mini spinner to page with
+// JS, usually by adding an <i class='spinner'></i>
+.spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  @include ie7-restore-right-whitespace();
+  line-height: 16px;
+  vertical-align: top;
+  margin-top: 1px;  
+  background-image: image-url("spinner.gif");
+}

data/app/assets/stylesheets/umlaut/_mixins.scss

@@ -0,0 +1,65 @@
+@mixin umlaut-container {
+  // double left gutter/margin when big enough
+  padding-left: $umlautContainerPadding * 2;
+  padding-right: $umlautContainerPadding * 2;
+  
+  // get rid of double left margin at smaller
+  @media (max-width: 767px) {
+    padding: {
+      left: $umlautContainerPadding;
+      right: $umlautContainerPadding;
+    }
+  }
+
+  // IE8 and other browsers without media query, 
+  // we need to keep it from getting too small,
+  // cause it won't use the styles for small. 
+  // we use a media query as 'feature detection' in our CSS
+  min-width: 600px;
+  @media (min-width: 0) {
+    min-width: 0;
+  }
+}
+
+@mixin umlaut_icons {
+  background: {
+    image: image-url("umlaut_icons.png");
+    repeat: no-repeat;
+  }
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  @include ie7-restore-right-whitespace();
+  line-height: 16px;
+  vertical-align: top;
+  margin-top: 1px;
+}
+
+@mixin iconed-response {
+  .response_item  {
+    a {
+      font-weight: bold;
+    }
+    i {
+      @include umlaut_icons;
+    }
+  }
+}
+
+@mixin umlaut-well($backgroundColor, $borderColor) {
+  /* copied from bootstrap well, because we change parts, not worth
+     it to override, we change so much and well is so simple.  */
+  background-color: $backgroundColor;
+  min-height: 20px;
+
+  padding: 9px;
+  margin-left: -9px; /* so left edge of text still lines up */
+  margin-right: -9px;
+
+
+  border: 1px solid $borderColor;
+  @include border-radius($baseBorderRadius);
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+}
+
+

data/app/assets/stylesheets/umlaut/_modal.scss

@@ -0,0 +1,4 @@
+.modal ul {
+  margin-left: 0;
+  list-style: none;
+}

data/app/assets/stylesheets/umlaut/_resolve.scss

@@ -0,0 +1,308 @@
+.umlaut-main, .umlaut-sidebar {
+  ul {
+    margin-left: 0;
+    list-style: none;
+  }
+}
+
+// Main section styles
+.umlaut-main {  
+  padding-right: ($umlautContainerPadding * 2);
+}
+
+.response_list {
+  .response_item  {
+    margin-bottom: ($baseLineHeight / 2);
+    // Try to make line wrap respect space for icon/indent. 
+    padding-left: $umlautIndent;
+    text-indent: -$umlautIndent;
+  }
+}
+
+.umlaut-section {
+  margin: 0 0 ($baseLineHeight * 1.5) 0;  
+  .section_heading h3 {
+    /* semantically an h3, but make it sized an h4 */
+    @extend h4;
+    margin-top: 0;    
+  }
+  .section-subheading {
+    @extend .muted;
+  }
+
+
+
+  // Special looks for particular sections
+  &.fulltext {
+    @include iconed-response;
+    .response_item i {
+      @extend .umlaut_icons-famfamfam-page-text;
+    }
+  }
+
+  &.audio {
+    @include iconed-response;
+    .response_item i {
+      @extend .umlaut_icons-famfamfam-page-sound;
+    }
+  }
+
+  &.excerpts {
+    @include iconed-response;
+    .response_item i {
+      @extend .umlaut_icons-famfamfam-book-open;
+    }
+  }
+
+  &.coins {
+    border: none;
+  }
+
+  &.document_delivery {
+    @include iconed-response;
+    .response_item i {
+      @extend .umlaut_icons-famfamfam-book-go;
+    }
+  }
+
+  &.holding {
+    .response_item i {
+      @extend .umlaut_icons-famfamfam-book;
+    }
+    .umlaut-holdings {
+      .umlaut-holding {
+        margin-bottom: $umlautIndent;
+      }
+      .collection-str {
+        font-weight: bold;
+      }
+      .umlaut-holding-notes {
+        @extend .muted;
+      }
+      .umlaut-holding-match-reliability, .umlaut-holding-notes, .umlaut-holding-coverage {
+        margin: ($baseLineHeight / 3) 0 ($baseLineHeight / 3) $umlautIndent;        
+      }
+      .item_status_row {
+        min-height: 0;
+      }  
+      .collection_str, .call-number, .holding-status, .holding-actions {
+        min-height: 0;
+        margin-left: 0;
+      }
+      .call-number, .holding-status, .holding-actions {        
+        padding-left: $umlautIndent;        
+      }    
+    }
+
+
+
+  }
+
+  &.search_inside {
+    .input-append .add-on, .input-prepend .add-on {
+      // can't figure out if this is a bug in bootstrap or what
+      height: auto;    
+    }
+    select.id {
+      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
+  }
+}
+
+.umlaut-section-highlighted {
+  @include umlaut-well($umlautHighlightedSectionBackgroundColor, $umlautHighlightedSectionBorderColor);
+  @include border-radius($umlautBorderRadiusExtraLarge);
+}
+
+.section_prompt {
+  @extend .muted;
+}
+
+// extra block-level elements inside a response_item
+// need to turn off the text-indent that inherits, don't actually
+// need any indent. 
+%indented-subitem {
+  text-indent: 0;
+  margin: ($baseLineHeight / 6) 0;
+}
+
+.umlaut-content-indent {
+  @extend %indented-subitem;
+}
+
+.response_edition_warning, .response_source, .response_coverage_statement, .response_notes {
+  @extend %indented-subitem;
+  @extend .muted;
+}
+
+.response_notes {
+  @extend %indented-subitem;
+}
+
+.debug_info {
+  @extend %indented-subitem;
+  @include umlaut-well($umlautDebugInfoBackgroundColor, $umlautDebugInfoBorderColor);
+}
+
+.umlaut-sidebar {
+  margin-top: $umlautIndent;
+  padding: $umlautIndent;
+
+  border:  1px solid $umlautSidebarBorderColor;    
+  @include border-radius($umlautBorderRadiusExtraLarge);
+
+  background-color: $umlautSidebarBackgroundColor;
+
+  .help-text-icon {
+    height: 100%;
+
+    font-size: $baseLineHeight * 1.85;
+    font-weight: bold;
+    float: right;
+    clear: right;
+
+    margin-left: $umlautIndent;
+    padding: $baseLineHeight * 0.5;
+    
+
+    background-color: $umlautHighlightedSectionBackgroundColor;
+    border: 1px solid $umlautHighlightedSectionBorderColor;    
+
+    @include border-radius($baseLineHeight * 2);    
+  }
+  .umlaut-section.help {
+    @include clearfix();    
+  }
+}
+
+.umlaut-resource-info {
+  display: table;
+  width: 100%;
+  @include clearfix(); 
+  padding: $umlautIndent 0 0 0;
+  margin-bottom: $umlautIndent;
+
+
+  .resource_info_sections, .umlaut-section.cover_image {
+    display:        table-cell;
+    vertical-align: top;
+    margin: $baseLineHeight;
+    width: 100%;
+  }
+
+  .umlaut-section.cover_image .umlaut_section_content {
+    text-align: right;
+    img.cover_image {
+      border: 1px solid $umlautHighlightedSectionBorderColor;
+      margin-left: $umlautIndent;
+
+      // IE7 and below, hide cover image entirely, since
+      // we dont' have display:table to do it right. Use IE7 asterisk trick
+      *display: none;
+
+      // override to make cover smaller on smaller screens
+      @media (max-width: 550px) {
+        max-width:  100px !important;
+        max-height: 80px !important;
+      }
+      // and disappear on really small ones
+      @media (max-width: 340px) {
+        display: none;
+      }
+    }
+  }
+
+  /* citation render styles */
+
+
+
+  .resource-type {    
+    @extend .muted;
+    margin: 0;
+    font-weight: bold;
+  }
+  h2.title {  
+    margin-top: 0;
+    @extend h4;
+    line-height: $baseLineHeight * 1.1;
+    font-weight: normal;    
+  }
+  
+  .container-title {
+    font-style: italic;
+  }
+
+  dl.citation-info {
+    /* based on dl-horizontal, but tweaked.  */
+    @include clearfix();   
+    @extend .muted; // subsidiary stuff, mute it
+    margin-top: 10px;
+    margin-bottom: 10px;     
+    dt {      
+      float: left;
+      clear: left;
+      font-weight: normal;
+      @include text-overflow();        
+      width: ($umlautIndent * 5) - 20;
+      @media (max-width: 400px) {
+        float: none;
+        clear: none;
+        width: auto;
+        text-align: left;
+      }
+    }
+    dd {
+      margin-left: ($umlautIndent * 5);
+      @media (max-width: 400px) {
+        margin-left: 0;
+      }
+    }
+  }
+
+}
+
+.umlaut-available {
+  color: $umlautAvailableColor;
+  font-style: italic;
+  font-size: $baseFontSize;
+}
+
+.umlaut-unavailable {
+  color: $umlautUnavailableColor;
+  font-style: italic;
+  font-size: $baseFontSize;
+}
+
+// Resolve Errors
+#service_errors_content {
+  @include umlaut-well($umlautResolveErrorBackgroundColor, $umlautResolveErrorBorderColor);
+}
+
+a:not(:hover) .coverage_summary {
+  /* even though it's part of a hyperlink, we make it black for distinction */
+  color: black; 
+}
+
+@media (max-width: 767px) {
+  .umlaut-main {
+    padding: 0;
+  }
+  .umlaut-sidebar {    
+    padding: 0;
+
+    background-color: $umlautMainBackgroundColor;
+    border: none;
+    padding-top: 10px;
+
+    .umlaut-section {
+      margin-left: 0;
+      padding-left: 0;
+    }
+
+    .umlaut-help-list {
+      text-align: left;
+    }
+  }
+}
+
+