diff --git a/app/assets/stylesheets/partials/_buttons.scss b/app/assets/stylesheets/partials/_buttons.scss index 709481d6..a3181f55 100644 --- a/app/assets/stylesheets/partials/_buttons.scss +++ b/app/assets/stylesheets/partials/_buttons.scss @@ -1,5 +1,7 @@ @mixin buttonSecondary { border: 1px solid $color-blue-500; + background-color: $color-white; + color: $color-text-primary; border-radius: 0; display: inline-block; padding: 6px 12px; diff --git a/app/assets/stylesheets/partials/_results.scss b/app/assets/stylesheets/partials/_results.scss index c0bc8c31..73b54700 100644 --- a/app/assets/stylesheets/partials/_results.scss +++ b/app/assets/stylesheets/partials/_results.scss @@ -1,3 +1,7 @@ +// ---------------------------- +// Results List +// ---------------------------- + .top-space { margin-top: 1.2rem; @media (min-width: $bp-screen-md) { @@ -37,9 +41,18 @@ margin-left: 3rem; } } - } + } +} + +.results-list.use { + list-style-type: none; + padding: 0; } +// -------------------------------------- +// Individual Results for GeoData & USE +// -------------------------------------- + .result { padding: 2rem; border-top: 1px solid $brand-primary; @@ -120,8 +133,119 @@ } } -/* USE Specific Overrides */ -/* Layout of results and sidebar columns */ +// -------------------------------------- +// Individual Results overrides for USE +// -------------------------------------- + +.result.use, .result.primo { + margin-bottom: 48px; + padding: 0; + border-top: none; + + &:hover, + &:focus { + background-color: transparent; + } + + .eyebrow { + color: $color-text-secondary; + font-size: 1.3rem; + font-weight: $fw-medium; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + .record-title { + font-size: 2.4rem; + line-height: 1.3; + margin-bottom: 8px; + + a { + @include underlinedLinks; + font-weight: $fw-semibold; + } + } + + .pub-info { + font-size: $fs-base; + color: $color-text-secondary; + span:first-child:after { + content: " • "; + color: $color-text-disabled; + } + margin-bottom: 1em; + margin-top: 0; + } + + .result-highlights.use { + margin-top: 0; + + ul { + list-style: disc outside; + padding-left: 16px; + + li { + margin-left: 0.6rem; + font-size: 1.6rem; + } + } + } + + .highlight { + background-color: $color-highlight; + } + + &.use, &.primo { + .result-metadata { + margin-bottom: 16px; + } + + .pub-info { + margin-bottom: 4px; + } + + ul.contributors { + li { + font-weight: $fw-normal; + + a { + color: $color-text-secondary; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + } + + .inner-heading { + font-size: 1.6rem; + font-family: $base-font; // Since we're using 16px, override to use body font + } + + // Make result buttons present as underlined links + a.button { + @include underlinedLinks; + font-weight: $fw-medium; + font-size: 1.6rem; + margin-right: 16px; + } + + // Except the first button, which should present as a secondary button + a.button:first-child { + @include buttonSecondary; + } + + .truncate-list li:last-child {margin-bottom: 0;} + + } +} + +// ----------------------------- +// Result list and Sidebar - USE +// ----------------------------- + #content-wrapper { padding-top: 12px; padding-bottom: 44px; @@ -167,6 +291,7 @@ a { @include underlinedLinks; + font-weight: $fw-medium; } } @@ -205,7 +330,10 @@ } -/* Callouts below results */ +// ---------------------------- +// Result callout boxes +// ---------------------------- + #callout-wrapper { display: flex; gap: 12px; diff --git a/app/assets/stylesheets/partials/_typography.scss b/app/assets/stylesheets/partials/_typography.scss index 03d4a7dc..e77e39d2 100644 --- a/app/assets/stylesheets/partials/_typography.scss +++ b/app/assets/stylesheets/partials/_typography.scss @@ -1,7 +1,7 @@ // Mixing for underlined links @mixin underlinedLinks { color: inherit; - font-weight: $fw-medium; + font-weight: inherit; text-decoration: underline; text-decoration-color: $color-blue-500; text-underline-offset: 0.5rem; diff --git a/app/assets/stylesheets/partials/_variables.scss b/app/assets/stylesheets/partials/_variables.scss index 74b9b844..1871f7f8 100644 --- a/app/assets/stylesheets/partials/_variables.scss +++ b/app/assets/stylesheets/partials/_variables.scss @@ -21,6 +21,9 @@ $color-red-400: #FF3333; $color-red-500: #ff0000; $color-red-600: #e50000; +// YELLOW +$color-yellow-500: #FFD700; + // CYAN $color-cyan-500: #00C8FF; $color-cyan-700: #00A0CC; @@ -57,6 +60,9 @@ $color-focus-dark: $color-cyan-500; $color-suggestion-border: $color-purple-700; $color-suggestion-accent-text: $color-purple-700; +// HIGHLIGHT +$color-highlight: $color-yellow-500; + // ---------------------------- // #TYPOGRAPHY // ---------------------------- diff --git a/app/views/search/_result.html.erb b/app/views/search/_result.html.erb index ec8a59fd..a4579670 100644 --- a/app/views/search/_result.html.erb +++ b/app/views/search/_result.html.erb @@ -1,25 +1,31 @@ -
  • +
  • +

    Eyebrow Text

    Title: <%= link_to_result(result) %>

    -

    - <%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %> - - <% result[:dates]&.each do |date| %> - <%= date['value'] if date['kind'] == 'Publication date' %> - <% end %> - -

    +
    - Contributors: -
      - <%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %> -
    +

    + <%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %> + + <% result[:dates]&.each do |date| %> + <%= date['value'] if date['kind'] == 'Publication date' %> + <% end %> + +

    -
    + <% if result[:contributors].present? %> + Contributors: +
      + <%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %> +
    + <% end %> +
    + +
    <%= render partial: 'search/highlights', locals: { result: result } %>
    diff --git a/app/views/search/_result_primo.html.erb b/app/views/search/_result_primo.html.erb index 89a9cbb7..ce3da213 100644 --- a/app/views/search/_result_primo.html.erb +++ b/app/views/search/_result_primo.html.erb @@ -1,5 +1,6 @@ -
  • +
  • +

    Eyebrow Text

    Title: <% if result[:links]&.find { |link| link['kind'] == 'full record' } %> @@ -9,30 +10,34 @@ <% end %>

    -

    - <%= result[:format] %> - <%= result[:year] %> -

    +
    - <% if result[:creators].present? %> - Contributors: -
      - <% result[:creators].each do |creator| %> -
    • - <% if creator[:link] %> - <%= link_to creator[:value], creator[:link] %> - <% else %> - <%= creator[:value] %> - <% end %> -
      • - <% end %> -
    - <% end %> +

    + <%= result[:format] %> + <%= result[:year] %> +

    + + <% if result[:creators].present? %> + Contributors: +
      + <% result[:creators].each do |creator| %> +
    • + <% if creator[:link] %> + <%= link_to creator[:value], creator[:link] %> + <% else %> + <%= creator[:value] %> + <% end %> +
      • + <% end %> +
    + <% end %> + +
    <% if result[:links].present? %> <% result[:links].each do |link| %> - <%= link_to link['kind'].titleize, link['url'], class: 'link-button' %> + <%= link_to link['kind'].titleize, link['url'], class: 'button' %> <% end %> <% end %>
    diff --git a/app/views/search/results.html.erb b/app/views/search/results.html.erb index d259cd73..9d3a2a65 100644 --- a/app/views/search/results.html.erb +++ b/app/views/search/results.html.erb @@ -22,7 +22,7 @@

    From all MIT Libraries sources

    -
      +
        <% @results.each do |result| %> <% if result[:api] == 'primo' %> <%= render(partial: 'search/result_primo', locals: { result: result }) %>