diff --git a/app/assets/stylesheets/_aleph.scss b/app/assets/stylesheets/_aleph.scss new file mode 100644 index 00000000..095f0c0b --- /dev/null +++ b/app/assets/stylesheets/_aleph.scss @@ -0,0 +1,11 @@ +// ------------------------------ +// #REAL-TIME STATUS (from Aleph) +// ------------------------------ + +.fa-check { + color: $success +} + +.fa-times { + color: $error +} diff --git a/app/assets/stylesheets/_bento.scss b/app/assets/stylesheets/_bento.scss new file mode 100644 index 00000000..182aaf6f --- /dev/null +++ b/app/assets/stylesheets/_bento.scss @@ -0,0 +1,119 @@ +/* Bento-specific styles */ + +// ---------------------------------------- +// #GENERAL PAGE LAYOUT AND SIMPLE ELEMENTS +// ---------------------------------------- + +.wrap-notices .title { + font-size: 1.2rem; + line-height: 1.4; +} + +.wrap-outer-header-local { + display: none; +} + +.wrap-content { + padding-top: 1rem; +} + +.nudge-feedback { + text-align: right; + font-size: $fs-small; + font-weight: $fw-bold; + + p { + margin-bottom: 0; + } + + a { + color: $orange; + } +} + +/* big boxes */ +.wrap-results { + margin-top: 2rem; + margin-bottom: 3rem; + background-color: $white-t; + box-shadow: 0 0 3px 1px $smoke; + padding: 15px; + border-top: 3px solid $green; + + .title { + margin-bottom: .1em; + } + + .results-desc { + font-size: $fs-smallish; + color: $gray; + } + + .wc-link { + display: block; + } +} + +.results-more { + margin-top: 1rem; + font-size: $fs-smallish; + + a { + display: block; + text-align: center; + } +} + +/* other bits */ +.wrap-help { + .title { + margin-bottom: .3em; + font-size: $fs-base; + font-weight: 600; + color: $gray-d1; + } + + .list-tools { + @extend .list-unbulleted; + font-size: $fs-small; + } +} + +.wrap-chat { + border: 1px solid $gray-l3; + background-color: $white-t; + padding: 1.5rem 3rem 1rem 3rem; + font-size: $fs-smallish; + color: $gray; + + .title { + font-size: $fs-large; + color: $gray-d1; + margin-bottom: .2em; + } +} + +.about-bento { + margin: 4rem 0; +} + +// content area adjustments +.wrap-content { + .title-area { + margin-bottom: 1rem; + } + + .title-page { + padding-top: 1.5rem; + } + + .title.has-subline { + margin-bottom: .1em; + padding-bottom: .1em; + } + + .subline { + font-size: $fs-xsmall; + } +} + diff --git a/app/assets/stylesheets/_feedback.scss b/app/assets/stylesheets/_feedback.scss new file mode 100644 index 00000000..54610c3d --- /dev/null +++ b/app/assets/stylesheets/_feedback.scss @@ -0,0 +1,21 @@ +// ------------------------------ +// #FORMS AND FEEDBACK +// ------------------------------ + +/* general bento feedback form */ +.bento-feedback { + + .field-text { + width: 80%; + } + + .bento-field-textarea { + width: 80%; + height: 10em; + } +} + +label.error { + color: $error; +} + diff --git a/app/assets/stylesheets/_results.scss b/app/assets/stylesheets/_results.scss new file mode 100644 index 00000000..e869f7c5 --- /dev/null +++ b/app/assets/stylesheets/_results.scss @@ -0,0 +1,163 @@ +// -------------------- +// #ITEM RESULTS +// -------------------- + +/* generic result pattern */ +.wrap-result { + transition: all .25s ease-in-out 0s; + border-bottom: 1px solid $gray-l3; + border-right: 1px solid $white-t; + border-left: 1px solid $white-t; + padding: 2rem 1rem 2rem 1rem; + + &:first-child { + border-top: 1px solid $gray-l3; + } + + &:hover, + &:focus { + border-right: 1px solid $gray-l3; + border-left: 1px solid $gray-l3; + background-color: $gray-l4; + } + + + .result-type { + margin-bottom: .5em; + font-size: $fs-xsmall; + color: $gray; + } + + .result-image { + float: right; + max-width: 150px; + margin-left: 3%; + border: 1px solid #ccc; + } + + .result-title { + margin-bottom: .2em; + + a { + + &:hover, + &:focus { + color: $brand-primary; + } + } + } + + .result-author:after { + content: ';'; + color: $gray-l1; + } + + .result-author:last-child:after { + content: ''; + } + + .result-blurb { + font-size: $fs-xsmall; + color: $gray; + } + + .result-pubinfo { + font-size: $fs-xsmall; + color: $gray; + } + + .result-year { + margin-bottom: .5em; + font-size: $fs-xsmall; + color: $gray; + + &:before { + content: " | "; + color: $gray-l2; + } + } + + .list-subjects { + @extend .list-unbulleted; + } + + .result-subjectheading { + margin: 0; + font-size: $fs-xsmall; + } + + + .list-local-locations { + @extend .list-unbulleted; + margin-bottom: 0; + } + + .result-local-location { + color: $gray; + font-size: $fs-smallish; + } + + .result-get { + clear: both; + padding-top: 5px; + text-align: right; + font-size: 1.4rem; + + .online { + float: left; + } + } + + .realtime_status { + font-size: $fs-xsmall; + } +} + + +/* specific format overrides */ +.articles_content { + + .wrap-result { + + .result-title { + font-size: $fs-large; + } + + .result-authors { + font-size: $fs-smallish; + } + } +} + +.website_content { + .wrap-result { + padding: 1rem .5rem .5rem .5rem; + + .result-title { + font-size: $fs-large; + } + + .result-authors { + font-size: $fs-smallish; + } + + .result-get { + display: none; + } + } +} + +// specific view changes +.view-more { + .wrap-result { + border-right: 1px solid $gray-l4; + border-left: 1px solid $gray-l4; + + &:hover, + &:focus { + border-right: 1px solid $gray-l3; + border-left: 1px solid $gray-l3; + background-color: $white-t; + } + } +} diff --git a/app/assets/stylesheets/_search.scss b/app/assets/stylesheets/_search.scss new file mode 100644 index 00000000..16e83218 --- /dev/null +++ b/app/assets/stylesheets/_search.scss @@ -0,0 +1,65 @@ +// ------------------------ +// #SEARCH BITS +// ------------------------ + +/* search bar */ +.b-search { + margin-bottom: .5rem; + + .field-label { + display: block; + margin-bottom: .5rem; + font-size: $fs-small; + font-weight: $fw-normal; + color: $gray; + } + + .b-search-input { + display: inline-block; + width: 80%; + border: 1px solid $gray-l2; + border-radius: 2px; + padding: 6px 12px; + } + + .b-search-submit { + display: inline-block; + width: 18%; + } +} + +/* search results summary bar */ +.results-summary { + font-size: $fs-small; + + .search-summary { + display: block; + margin-bottom: .3rem; + font-size: $fs-xsmall; + color: $gray; + } + + .title { + display: inline-block; + } + + .results-summary-item { + display: block; + margin: 0 1rem; + + @media (min-width: $bp-screen-sm) { + display: inline-block; + } + + .count { + } + + .count:before { + content: '('; + } + + .count:after { + content: ')'; + } + } +} diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss new file mode 100644 index 00000000..177334de --- /dev/null +++ b/app/assets/stylesheets/_variables.scss @@ -0,0 +1,113 @@ + +/* variables and helpers ported from mitlib style */ + +// ---------------------------- +// #GRID +// ---------------------------- + +// grid - breakpoints +$bp-screen-sm: 480px; +$bp-screen-md: 768px; +$bp-screen-lg: 1024px; +$bp-screen-xl: 1280px; + + +// ---------------------------- +// #COLORS +// ---------------------------- + +// colors - grayscale +$black: #111; +$black-t: #000; // true black +$white: #fafafa; +$white-warm: #ede8e2; +$white-t: #fff; // true white +$gray: #595959; +$gray-d1: #333; +$gray-d2: #222; +$gray-l1: #999; +$gray-l2: #ccc; +$gray-l3: #dedede; +$gray-l4: #f3f3f3; +$gray-warm: #c6b6a3; +$transparent: rgba(0, 0, 0, 0); +$shadow: rgba($black-t, .5); +$glare: rgba($white-t, .3); +$smoke: rgba($gray, .3); + +// moth colors - named +$magenta: #9c3273; +$yellow: #ffcc33; +$orange: #f58632; +$barf: #cca329; +$green: #43926a; +$blue: #338bc5; +$blue-bright: #0088D0; +$blue-muted: #21759B; + +// colors - brand +$brand-primary: $blue; +$brand-primary-accent: rgb(14, 166, 236); +$brand-secondary: $gray-d1; +$brand-secondary-accent: rgb(242, 108, 170); + +// colors - utilities +$success: $green; +$warning: mix($yellow,$orange,50%); +$error: #AC1D22; +$informational: mix($gray-warm,$black,55%); + + +// ---------------------------- +// #TYPOGRAPHY +// ---------------------------- + +$base-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$alt-fonts: 'Georgia', Cambria, 'Times New Roman', Times, serif; + +// font-sizes and line-heights +$fs-xxxsmall: .9rem; +$fs-xxsmall: 1rem; +$fs-xsmall: 1.2rem; +$fs-smallish: 1.3rem; +$fs-small: 1.4rem; +$fs-base: 1.6rem; +$fs-large: 1.8rem; +$fs-xlarge: 2rem; +$fs-xxlarge: 2.4rem; +$fs-xxxlarge: 3rem; +$fs-xxxxlarge: 3.2rem; + +$fw-bold: 600; +$fw-normal: 400; +$fw-light: 300; + +$lh-xtight: 1; +$lh-tight: 1.3; +$lh-base: 1.5; +$lh-loose: 1.7; +$lh-xloose: 2; + + +// ---------------------------- +// #DEPTH +// ---------------------------- + +$z-depth-way-back: -1000; +$z-depth-back: -100; +$z-depth-lil-back: -10; +$z-depth-base: 1; +$z-depth-lil-front: 10; +$z-depth-front: 100; +$z-depth-way-front: 1000; + + +// ---------------------------- +// #UTILITIES from mitlib style +// ---------------------------- + +.list-unbulleted { + list-style: none; + padding-left: 0; + text-indent: 0; +} diff --git a/app/assets/stylesheets/aleph.scss b/app/assets/stylesheets/aleph.scss deleted file mode 100644 index 9e874e81..00000000 --- a/app/assets/stylesheets/aleph.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Place all the styles related to the aleph controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -.fa-check { - color: $success -} - -.fa-times { - color: $error -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 6f831614..772743e8 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -3,7 +3,9 @@ */ @import "libraries-global.scss"; -@import "bento.scss"; -@import "aleph.scss"; -@import "feedback.scss"; -@import "results.scss"; +@import "_variables.scss"; +@import "_bento.scss"; +@import "_search.scss"; +@import "_results.scss"; +@import "_aleph.scss"; +@import "_feedback.scss"; diff --git a/app/assets/stylesheets/bento.scss b/app/assets/stylesheets/bento.scss deleted file mode 100644 index 1661ef4b..00000000 --- a/app/assets/stylesheets/bento.scss +++ /dev/null @@ -1,447 +0,0 @@ -/* Bento-specific styles */ - -/* variables from mitlib style */ - -// ---------------------------- -// #GRID -// ---------------------------- - -// grid - breakpoints -$bp-screen-sm: 480px; -$bp-screen-md: 768px; -$bp-screen-lg: 1024px; -$bp-screen-xl: 1280px; - - -// ---------------------------- -// #COLORS -// ---------------------------- - -// colors - grayscale -$black: #111; -$black-t: #000; // true black -$white: #fafafa; -$white-warm: #ede8e2; -$white-t: #fff; // true white -$gray: #595959; -$gray-d1: #333; -$gray-d2: #222; -$gray-l1: #999; -$gray-l2: #ccc; -$gray-l3: #dedede; -$gray-l4: #f3f3f3; -$gray-warm: #c6b6a3; -$transparent: rgba(0, 0, 0, 0); -$shadow: rgba($black-t, .5); -$glare: rgba($white-t, .3); -$smoke: rgba($gray, .3); - -// moth colors - named -$magenta: #9c3273; -$yellow: #ffcc33; -$orange: #f58632; -$barf: #cca329; -$green: #43926a; -$blue: #338bc5; -$blue-bright: #0088D0; -$blue-muted: #21759B; - -// colors - brand -$brand-primary: $blue; -$brand-primary-accent: rgb(14, 166, 236); -$brand-secondary: $gray-d1; -$brand-secondary-accent: rgb(242, 108, 170); - -// colors - utilities -$success: $green; -$warning: mix($yellow,$orange,50%); -$error: #AC1D22; -$informational: mix($gray-warm,$black,55%); - - -// ---------------------------- -// #TYPOGRAPHY -// ---------------------------- - -$base-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$alt-fonts: 'Georgia', Cambria, 'Times New Roman', Times, serif; - -// font-sizes and line-heights -$fs-xxxsmall: .9rem; -$fs-xxsmall: 1rem; -$fs-xsmall: 1.2rem; -$fs-smallish: 1.3rem; -$fs-small: 1.4rem; -$fs-base: 1.6rem; -$fs-large: 1.8rem; -$fs-xlarge: 2rem; -$fs-xxlarge: 2.4rem; -$fs-xxxlarge: 3rem; -$fs-xxxxlarge: 3.2rem; - -$fw-bold: 600; -$fw-normal: 400; -$fw-light: 300; - -$lh-xtight: 1; -$lh-tight: 1.3; -$lh-base: 1.5; -$lh-loose: 1.7; -$lh-xloose: 2; - - -// ---------------------------- -// #DEPTH -// ---------------------------- - -$z-depth-way-back: -1000; -$z-depth-back: -100; -$z-depth-lil-back: -10; -$z-depth-base: 1; -$z-depth-lil-front: 10; -$z-depth-front: 100; -$z-depth-way-front: 1000; - - -// ---------------------------- -// #UTILITIES from mitlib style -// ---------------------------- - -.list-unbulleted { - list-style: none; - padding-left: 0; - text-indent: 0; -} - -// ---------------------------- -// #BENTO-SPECIFIC - BEGIN -// ---------------------------- - -.wrap-notices .title { - font-size: 1.2rem; -} - -.wrap-outer-header-local { - display: none; -} - -.wrap-content { - padding-top: 1rem; -} - -.nudge-feedback { - text-align: right; - font-size: $fs-small; - font-weight: $fw-bold; - - p { - margin-bottom: 0; - } - - a { - color: $orange; - } -} - -/* search bar */ -.b-search { - margin-bottom: .5rem; - - .field-label { - display: block; - margin-bottom: .5rem; - font-size: $fs-small; - font-weight: $fw-normal; - color: $gray; - } - - .b-search-input { - display: inline-block; - width: 80%; - border: 1px solid $gray-l2; - border-radius: 2px; - padding: 6px 12px; - } - - .b-search-submit { - display: inline-block; - width: 18%; - } -} - -/* search summary bar */ -.results-summary { - font-size: $fs-small; - - .search-summary { - display: block; - margin-bottom: .3rem; - font-size: $fs-xsmall; - color: $gray; - } - - .title { - display: inline-block; - } - - .results-summary-item { - display: block; - margin: 0 1rem; - - @media (min-width: $bp-screen-sm) { - display: inline-block; - } - - .count { - } - - .count:before { - content: '('; - } - - .count:after { - content: ')'; - } - } -} - -/* big boxes */ -.wrap-results { - margin-top: 2rem; - margin-bottom: 3rem; - background-color: $white-t; - box-shadow: 0 0 3px 1px $smoke; - padding: 15px; - border-top: 3px solid $green; - - .title { - margin-bottom: .1em; - } - - .results-desc { - font-size: $fs-smallish; - color: $gray; - } - - .wc-link { - display: block; - } -} - -.results-more { - margin-top: 1rem; - font-size: $fs-smallish; - - a { - display: block; - text-align: center; - } -} - -/* generic result pattern */ -.wrap-result { - transition: all .25s ease-in-out 0s; - border-bottom: 1px solid $gray-l3; - border-right: 1px solid $white-t; - border-left: 1px solid $white-t; - padding: 2rem 1rem 2rem 1rem; - - &:first-child { - border-top: 1px solid $gray-l3; - } - - &:hover, - &:focus { - border-right: 1px solid $gray-l3; - border-left: 1px solid $gray-l3; - background-color: $gray-l4; - } - - - .result-type { - margin-bottom: .5em; - font-size: $fs-xsmall; - color: $gray; - } - - .result-image { - float: right; - max-width: 150px; - margin-left: 3%; - border: 1px solid #ccc; - } - - .result-title { - margin-bottom: .2em; - - a { - - &:hover, - &:focus { - color: $brand-primary; - } - } - } - - .result-author:after { - content: ';'; - color: $gray-l1; - } - - .result-author:last-child:after { - content: ''; - } - - .result-blurb { - font-size: $fs-xsmall; - color: $gray; - } - - .result-pubinfo { - font-size: $fs-xsmall; - color: $gray; - } - - .result-year { - margin-bottom: .5em; - font-size: $fs-xsmall; - color: $gray; - - &:before { - content: " | "; - color: $gray-l2; - } - } - - .list-subjects { - @extend .list-unbulleted; - } - - .result-subjectheading { - margin: 0; - font-size: $fs-xsmall; - } - - - .list-local-locations { - @extend .list-unbulleted; - margin-bottom: 0; - } - - .result-local-location { - color: $gray; - font-size: $fs-smallish; - } - - .result-get { - clear: both; - padding-top: 5px; - text-align: right; - font-size: 1.4rem; - } - - .realtime_status { - font-size: $fs-xsmall; - } -} - -/* specific format overrides */ -.articles_content { - - .wrap-result { - - .result-title { - font-size: $fs-large; - } - - .result-authors { - font-size: $fs-smallish; - } - } -} - -.website_content { - .wrap-result { - padding: 1rem .5rem .5rem .5rem; - - .result-title { - font-size: $fs-large; - } - - .result-authors { - font-size: $fs-smallish; - } - - .result-get { - display: none; - } - } -} - -/* other bits */ -.wrap-help { - .title { - margin-bottom: .3em; - font-size: $fs-base; - font-weight: 600; - color: $gray-d1; - } - - .list-tools { - @extend .list-unbulleted; - font-size: $fs-small; - } -} - -.wrap-chat { - border: 1px solid $gray-l3; - background-color: $white-t; - padding: 1.5rem 3rem 1rem 3rem; - font-size: $fs-smallish; - color: $gray; - - .title { - font-size: $fs-large; - color: $gray-d1; - margin-bottom: .2em; - } -} - -.about-bento { - margin: 4rem 0; -} - -// content area adjustments -.wrap-content { - .title-area { - margin-bottom: 1rem; - } - - .title-page { - padding-top: 1.5rem; - } - - .title.has-subline { - margin-bottom: .1em; - padding-bottom: .1em; - } - - .subline { - font-size: $fs-xsmall; - } -} - -// specific view changes -.view-more { - .wrap-result { - border-right: 1px solid $gray-l4; - border-left: 1px solid $gray-l4; - - &:hover, - &:focus { - border-right: 1px solid $gray-l3; - border-left: 1px solid $gray-l3; - background-color: $white-t; - } - } -} diff --git a/app/assets/stylesheets/feedback.scss b/app/assets/stylesheets/feedback.scss deleted file mode 100644 index 96d8d529..00000000 --- a/app/assets/stylesheets/feedback.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Place all the styles related to the feedback controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ - -.bento-field-email, .bento-field-text { - width: 80%; - padding: 6px 12px; -} - -.bento-field-textarea { - padding: 6px 12px; - width: 80%; - height: 10em; -} - -.bento-field-textarea.error, .bento-field-textarea.error:focus { - border: 1px solid red; -} - -label.error { - color: red; -} diff --git a/app/assets/stylesheets/libraries-global.scss b/app/assets/stylesheets/libraries-global.scss index cbfbcdf3..fa37d838 100644 --- a/app/assets/stylesheets/libraries-global.scss +++ b/app/assets/stylesheets/libraries-global.scss @@ -657,6 +657,9 @@ form .field-label { font-size: 1.4rem; font-weight: 600; } +form .field-label.error { + color: #AC1D22; +} form .field { display: block; margin-top: .2rem; @@ -669,6 +672,9 @@ form .field:focus, form .field:active { border-color: #338bc5; box-shadow: 0 0 5px rgba(14, 166, 236, 0.8); } +form .field.error { + border-color: #AC1D22; +} form .field-text { min-width: 25rem; padding: 6px 12px; @@ -680,12 +686,7 @@ form .tip { color: #756c61; margin-bottom: 0; } -form .field-error { - font-size: 1.4rem; - color: #AC1D22; -} -form .field-warning { - font-size: #faa933; +form .tip.error { color: #AC1D22; } form .field-textarea { @@ -965,7 +966,7 @@ form .disabled { } /* csslint ignore:start */ -.wrap-outer-header-local.reasons { +.wrap-outer-header.reasons { background: #f23074; /* Old browsers */ background: -moz-linear-gradient(45deg, #f23074 0%, #d6d628 36%, #207cca 66%, #544b8c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #f23074 0%,#d6d628 36%,#207cca 66%,#544b8c 100%); /* Chrome10-25,Safari5.1-6 */ diff --git a/app/assets/stylesheets/results.scss b/app/assets/stylesheets/results.scss deleted file mode 100644 index 3413b8e1..00000000 --- a/app/assets/stylesheets/results.scss +++ /dev/null @@ -1,3 +0,0 @@ -.result-get a.button.button-primary.green { - float: left; -} diff --git a/app/views/feedback/index.html.erb b/app/views/feedback/index.html.erb index 1d3aad16..f892bb93 100644 --- a/app/views/feedback/index.html.erb +++ b/app/views/feedback/index.html.erb @@ -10,12 +10,12 @@
<%= label_tag 'contact_name', 'Your name (optional)', class: 'field-label' %> - <%= text_field_tag 'contact_name', nil, class: 'field field-text bento-field-text' %> + <%= text_field_tag 'contact_name', nil, class: 'field field-text' %>
<%= label_tag 'contact_email', 'Contact Email (optional)', class: 'field-label' %> - <%= email_field_tag 'contact_email', nil, class: 'field field-email bento-field-email' %> + <%= email_field_tag 'contact_email', nil, class: 'field field-text' %>
diff --git a/app/views/layouts/_site_header.html.erb b/app/views/layouts/_site_header.html.erb index fa8a5b9a..6554fb36 100644 --- a/app/views/layouts/_site_header.html.erb +++ b/app/views/layouts/_site_header.html.erb @@ -1,4 +1,4 @@ -
+
-
+

Discovery Search at MIT Libraries

diff --git a/app/views/search/_result.html.erb b/app/views/search/_result.html.erb index 04439361..718102ea 100644 --- a/app/views/search/_result.html.erb +++ b/app/views/search/_result.html.erb @@ -92,10 +92,10 @@
<% if result.getit_url.present? %> - <%= link_to("Online", result.getit_url, class: 'button button-primary green', data: {type: "Get"}) %> + <%= link_to("Online", result.getit_url, class: 'online button button-primary green', data: {type: "Get"}) %> <% end %> - <%= link_to("Details and requests", result.url, class: 'button button-secondary', data: {type: "Detail"}) %> + <%= link_to("Details and requests", result.url, class: 'details button button-secondary', data: {type: "Detail"}) %>
<% if session[:debug] %>