From 457f9ca083278117d73f4fccb5b7c8a410280cc4 Mon Sep 17 00:00:00 2001 From: Max Turer Date: Fri, 1 Mar 2024 15:52:20 +0000 Subject: [PATCH] homepage fully responsive, recent document templates fixed for usability --- .../scholarspace/components/_homepage.scss | 629 ++++++++---------- app/controllers/hyrax/homepage_controller.rb | 51 ++ .../hyrax/homepage/_home_collections.html.erb | 24 +- .../hyrax/homepage/_recent_document.html.erb | 21 +- .../homepage/_recently_uploaded.html.erb | 2 - 5 files changed, 367 insertions(+), 360 deletions(-) create mode 100644 app/controllers/hyrax/homepage_controller.rb diff --git a/app/assets/stylesheets/scholarspace/components/_homepage.scss b/app/assets/stylesheets/scholarspace/components/_homepage.scss index 070c9282..4edb0bc7 100644 --- a/app/assets/stylesheets/scholarspace/components/_homepage.scss +++ b/app/assets/stylesheets/scholarspace/components/_homepage.scss @@ -1,250 +1,347 @@ // Homepage styling .home-content { + display: flex; + flex-direction: column; + + .content-container { + display: flex; + flex-direction: row; + align-items: center; + margin: 0 1em; + } + + #home-block-1 { + margin-bottom: 1rem; display: flex; flex-direction: column; + align-items: center; .content-container { - display: flex; - flex-direction: row; - align-items: center; - margin: 0 1em; + margin: 0 8em; + + @media (max-width: 3000px) { + margin: 0; + } } - #home-block-1 { - margin-bottom: 1rem; - display: flex; - flex-direction: column; - align-items: center; + h1#home-header { + margin-top: 0; + margin-bottom: 0.5em; + color: $gw-light-blue; + font-size: 10.5vw; + font-weight: bold; + line-height: 0.8em; - .content-container { - margin: 0 8em; + @media (min-width: $mobile-breakpoint) { + margin-bottom: 0; + } - @media (max-width: 1150px) { - margin: 0; - } + @media (min-width: 1034px) { + margin-top: 0.8rem; } - h1#home-header { - margin-top: 0; - margin-bottom: 0.5em; - color: $gw-light-blue; - font-size: 10.5vw; - font-weight: bold; - line-height: 0.8em; + //fix for large screens + @media (min-width: 1650px) { + font-size: 9vw; + } + } + + .gw-logo { + height: 10em; + width: auto; + background-color: $gw-dark-blue; + margin: 0 0.5em; + padding: 1em; - @media (min-width: $mobile-breakpoint) { - margin-bottom: 0; + img { + width: auto; + height: 100%; } + } + + .intro { + margin: 0 0.5em; + padding: 1em; - @media (min-width: 1034px) { - margin-top: 0.8rem; + p { + margin: 0 0 1.4rem; } - //fix for large screens - @media (min-width: 1650px) { - font-size: 9vw; + .button-container > .btn-home:first-child { + margin-right: 1em; } } - .gw-logo { - height: 10em; - width: auto; - background-color: $gw-dark-blue; - margin: 0 0.5em; - padding: 1em; + @media (max-width: 1019px) { + margin: 1em 0 0; + } - img { - width: auto; - height: 100%; - } + .content-container { + @media (max-width: $mobile-max) { + flex-direction: column; + + .gw-logo { + margin: 0; + height: 5em; + width: 100%; + text-align: center; } .intro { - margin: 0 0.5em; + margin: 0em; padding: 1em; - p { - margin: 0 0 1.4rem; + h2 { + font-weight: 300; + font-size: 1.3em; } - .button-container > .btn-home:first-child { - margin-right: 1em; + p { + margin: 0 0 0.8rem; } } - @media (max-width: 1019px) { - margin: 1em 0 0; + .button-container > a { + width: 100%; + margin: 0.2em 0; } + } + } + } - .content-container { - @media (max-width: $mobile-max) { + #home-block-2 { + .content-container { + flex-direction: row; + align-items: flex-start; + + #browse-category, + #recently-uploaded { + width: 50%; + padding: 1.5em; + display: flex; flex-direction: column; - .gw-logo { - margin: 0; - height: 5em; - width: 100%; - text-align: center; + .content-container { + height: 21vw; + flex-direction: row; + align-items: center; + justify-content: center; + + #categories-container, + #categories-tooltip { + padding: 2em 0.5em 0.5em 0.5em; + } + + #categories-container { + width: 70%; + text-align: center; + display: flex; + flex-direction: column; + } + + #categories-tooltip { + display: flex; + flex-direction: row; + + #arrow-left { + width: 0; + height: 0; + border-top: 1.2em solid transparent; + border-bottom: 1.2em solid transparent; + border-right: 1.2em solid $gw-hover-buff; + } + + #tooltip-box { + width: 8.5vw; + height: 16em; + display: flex; + align-items: center; + padding: 3em 1.5em; + background-color: $gw-hover-buff; + text-align: center; + color: $gw-dark-blue; + + @media (max-width: 1590px) { + width: 8em; + } + } + } } - .intro { - margin: 0em; - padding: 1em; + @media (min-width: 2050px) { + height: 21vw; + } - h2 { - font-weight: 300; - font-size: 1.3em; + @media (max-width: 1280px) { + height: 27vw; + margin: 0; + + #categories-container { + padding: 0.5em 0.5em 0.5em 0; + + @media (max-width: 960px) { + padding-right: 0; + } } - p { - margin: 0 0 0.8rem; + #categories-tooltip { + padding: 0.5em 0.5em 0.5em 0; } } + - .button-container > a { - width: 100%; - margin: 0.2em 0; + @media (max-width: 3000px) { + .content-container { + padding: 0; + margin: 0; + height: 28vw; + + #categories-container { + padding: 2em 0 0.5em 0; + } + } } } - } - } - #home-block-2 { - .content-container { - flex-direction: row; - align-items: flex-start; + #recently-uploaded { + height: 100%; - #browse-category, - #recently-uploaded { - width: 50%; - padding: 1.5em; + #recent_docs { + height: 100%; display: flex; - flex-direction: column; - - .content-container { - flex-direction: row; + flex-direction: row; + justify-content: space-between; + align-items: center; + + .recent-work { + width: 12vw; + margin: 0.5em 0.5em; + display: flex; align-items: center; - justify-content: center; - #categories-container, - #categories-tooltip { - padding: 2em 0.5em 0.5em 0.5em; - } + .image-wrapper { + position: relative; - #categories-container { - width: 70%; - text-align: center; - display: flex; - flex-direction: column; - } - - #categories-tooltip { - display: flex; - flex-direction: row; - - #arrow-left { - width: 0; - height: 0; - border-top: 1.2em solid transparent; - border-bottom: 1.2em solid transparent; - border-right: 1.2em solid $gw-hover-buff; + img { + width: 100%; + height: auto; } - - #tooltip-box { - width: 8.5vw; - height: 16em; + + .recent-title { + width: 100%; + height: 40%; + position: absolute; + top: 50%; + transform: translateY(-50%); display: flex; align-items: center; - padding: 3em 1.5em; - background-color: $gw-hover-buff; - text-align: center; - color: $gw-dark-blue; + justify-content: center; + background-color: $gw-light-blue; + + h3 { + font-size: 1em; + color: $gw-white; + text-decoration: underline; - @media (max-width: 1590px) { - width: 8em; + &:hover { + color: $gw-hover-buff; } + } } } - @media (max-width: 1280px) { - margin: 0; - padding: 2em 0 1.5em 0; + @media (max-width: 1300px) { + width: 14vw; + } - #categories-container { - padding-left: 0; + @media (max-width: 940px) { + width: 26.5vw; + } + } - @media (max-width: 960) { - padding-right: 0; - } - } + @media (max-width: $mobile-max) { + flex-direction: column; - #categories-tooltip { - padding-left: 1em; - padding-right: 0; - } + .recent-work { + width: 100%; + margin: 2em 0; } } } - @media (max-width: 940px) { - flex-direction: column; + @media (max-width: 1280px) { + height: unset; + } + } - #browse-category, - #recently-uploaded { - width: 100%; - padding: 1.5em 0; + @media (max-width: 940px) { + flex-direction: column; - .content-container { - margin: 0; - flex-direction: row; + #browse-category, + #recently-uploaded { + width: 100%; + height: unset; + padding: 1.5em 0; - #tooltip-box { - width: 20vw; - } + .content-container { + height: unset; + margin: 0; + flex-direction: row; - @media (max-width:445px) { - #categories-container { - .btn-categories { - padding: 0.3rem 0.3rem; - } - } + #tooltip-box { + width: 20vw; + } - #categories-tooltip { - padding-left: 0; + @media (max-width:445px) { + #categories-container { + .btn-categories { + padding: 0.3rem 0.3rem; } } + + #categories-tooltip { + padding-left: 0; + } } } } } } + } - #home-block-3 { - .content-container { - margin: 0; + #home-block-3 { + .content-container { + margin: 0; - #collections-bg { - width: 100%; - height: 10rem; - position: absolute; - background-color: $gw-light-blue; + #collections-bg { + width: 100%; + height: 10rem; + position: absolute; + background-color: $gw-light-blue; + } + + #collections { + width: 100%; + padding: 1.5em; + margin: 0 1em; + z-index: 20; + + #featured-h2 { + width: 50%; } - - #collections { - width: 100%; - padding: 1.5em; - margin: 0 1em; - z-index: 20; - - #featured-h2 { - width: 50%; - } - - .content-container { - padding: 2em 0; + + .content-container { + flex-direction: row; + padding: 2em 0; + justify-content: space-around; + + .home-collections { + width: 70vw; + display: flex; + flex-direction: row; justify-content: space-around; - + .home-collection { display: flex; flex-direction: column; @@ -253,6 +350,7 @@ .circle { width: 11em; height: 11em; + margin: 1em; padding: 1.5em; display: flex; align-items: center; @@ -265,188 +363,41 @@ &:hover { background-color: $gw-hover-buff; + color: $gw-dark-blue; text-decoration: none; } } } + } + + .btn-coll { + width: 15rem; + margin-bottom: 2.5rem; + } + + @media (max-width: 1280px) { + flex-direction: column; - .btn-coll { - width: 15rem; - margin-bottom: 2.5rem; + #featured-h2 { + width: 100%; + } + + .home-collections { + margin-bottom: 1em; } } + + @media (max-width: 940px) { + .home-collections { + flex-direction: column; + } + } + } + + @media (max-width: 1280px) { + padding: 1.5em 0; } } } - } - - // Commenting out homepage tabs styles (will delete) - // .tabs-container { - // background-color: $gw-dark-blue; - // border-radius: 5px; - // padding: 0.5em; - - // li a { - // background-color: transparent; - // color: $gw-light-blue; - // text-decoration: underline; - - // &:hover { - // color: $gw-hover-orange; - // } - // } - - // #homeTabs { - // li { - // width: 50%; - // margin-left: 0; - - // a { - // color: $gw-white; - // background-color: $gw-light-blue; - // text-decoration: none; - // border-bottom-left-radius: 0; - // border-bottom-right-radius: 0; - // text-align: center; - - // &:hover, &:focus { - // background-color: $gw-light-blue; - // } - // } - - // @media (min-width: $mobile-breakpoint) { - // width: fit-content; - // } - // } - - // li.active a { - // color: $gw-dark-grey; - // background-color: $gw-white; - // } - // } - - // .tab-content { - // overflow: hidden; - // border-top-right-radius: 0; - // border-bottom-left-radius: 5px; - // border-bottom-right-radius: 5px; - // margin-bottom: 0 !important; - - // #featured_container, #recently_uploaded { - // background-color: $gw-white; - // padding: 0; - - // h3 { - // margin-bottom: 0; - // } - - // p { - // margin: 0; - // padding: 0.5em; - // } - - // #recent_docs, #featured_works { - // list-style-type: none; - // margin-bottom: 0; - - // .recent-item, .featured-item { - // border-top: none; - // padding: 1em; - - // .recent-label, .featured-label { - // font-weight: 400; - // } - // } - - // li:nth-child(even) { - // background-color: $gw-light-grey; - // } - // } - - // #featured_works .dd-item { - // padding: 0; - // } - - // .table { - // margin-bottom: 0; - // } - // } - - // @media (min-width: $mobile-breakpoint) { - // border-top-right-radius: 5px; - // } - // } - // } - - // .dd-placeholder { - // margin-top: 0; - // margin-bottom: 0.5rem; - // } - - // .dd-dragel li, .dd-item { - // display: flex; - // flex-direction: row; - // padding: 0; - // margin-bottom: 0.5rem; - - // .dd-handle { - // position: inherit; - // background: $gw-light-blue; - // border: none; - // border-radius: 0; - // height: auto; - // } - - // .panel { - // margin: 0; - // background: $gw-white; - // border: 1px solid $gw-dark-grey; - // border-left: none; - // border-radius: 0; - // height: auto; - // width: 100%; - // max-width: 100%; - // font-size: 1rem; - - // h3 { - // margin-bottom: 0; - // } - - // a { - // font-size: 1rem; - // text-decoration: underline; - // } - // } - // } - - // #new_featured_work_list .btn { - // width: 100%; - // max-width: 100%; - // border: none; - // border-radius: 0; - // background-color: $gw-light-blue; - // color: $gw-white; - - // &:hover { - // background-color: $gw-hover-buff; - // color: $gw-dark-blue; - // } - // } - - // #publication-content { - // h2 { - // display: flex; - // align-items: center; - // } - - // img.featured { - // margin: 0px 10px 10px 0px; - // } - // } - - // //misc bootstrap overwrite - // .nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus { - // color: $gw-dark-grey; - // background-color: $gw-white; - // } - \ No newline at end of file + } +} \ No newline at end of file diff --git a/app/controllers/hyrax/homepage_controller.rb b/app/controllers/hyrax/homepage_controller.rb new file mode 100644 index 00000000..d34cc20d --- /dev/null +++ b/app/controllers/hyrax/homepage_controller.rb @@ -0,0 +1,51 @@ +# frozen_string_literal: true +class Hyrax::HomepageController < ApplicationController + # Adds Hydra behaviors into the application controller + include Blacklight::SearchContext + include Blacklight::SearchHelper + include Blacklight::AccessControls::Catalog + + class_attribute :presenter_class + self.presenter_class = Hyrax::HomepagePresenter + layout 'homepage' + helper Hyrax::ContentBlockHelper + + def index + @presenter = presenter_class.new(current_ability, collections) + @featured_researcher = ContentBlock.for(:researcher) + @marketing_text = ContentBlock.for(:marketing) + @featured_work_list = FeaturedWorkList.new + @announcement_text = ContentBlock.for(:announcement) + recent + end + + private + + # Return 5 collections + def collections(rows: 5) + Hyrax::CollectionsService.new(self).search_results do |builder| + builder.rows(rows) + end + rescue Blacklight::Exceptions::ECONNREFUSED, Blacklight::Exceptions::InvalidRequest + [] + end + + def recent + # grab any recent documents + (_, @recent_documents) = search_service.search_results do |builder| + builder.rows(3) + builder.merge(sort: sort_field) + end + rescue Blacklight::Exceptions::ECONNREFUSED, Blacklight::Exceptions::InvalidRequest + @recent_documents = [] + end + + def search_service + Hyrax::SearchService.new(config: blacklight_config, user_params: { q: '' }, scope: self, search_builder_class: Hyrax::HomepageSearchBuilder) + end + + def sort_field + "date_uploaded_dtsi desc" + end + end + \ No newline at end of file diff --git a/app/views/hyrax/homepage/_home_collections.html.erb b/app/views/hyrax/homepage/_home_collections.html.erb index a5d4c8fb..4ddb8214 100644 --- a/app/views/hyrax/homepage/_home_collections.html.erb +++ b/app/views/hyrax/homepage/_home_collections.html.erb @@ -4,17 +4,19 @@
-
- The George Washington University Undergraduate Review - Browse this collection ⟶ -
-
- US Military bases in Okinawa: United States Government Documents - Browse this collection ⟶ -
-
- The Capitol Economics Journal - Browse this collection ⟶ +
+
+ The George Washington University Undergraduate Review + Browse this collection ⟶ +
+
+ US Military bases in Okinawa: United States Government Documents + Browse this collection ⟶ +
+
+ The Capitol Economics Journal + Browse this collection ⟶ +
Browse all collections ⟶
diff --git a/app/views/hyrax/homepage/_recent_document.html.erb b/app/views/hyrax/homepage/_recent_document.html.erb index bd487a6f..a3cff852 100644 --- a/app/views/hyrax/homepage/_recent_document.html.erb +++ b/app/views/hyrax/homepage/_recent_document.html.erb @@ -1,15 +1,20 @@ -
  • -
    -
    +
    +
    <%= t('hyrax.homepage.recently_uploaded.document.title_label') %> -

    +
    <%= link_to [main_app, recent_document] do %> - <%= render_thumbnail_tag(recent_document, {width: 90, alt:"Preview of #{recent_document.title[0]}"}, {suppress_link: true}) + recent_document.to_s %> +
    + <%= render_thumbnail_tag(recent_document, {alt: "#{recent_document} #{ t('hyrax.homepage.admin_sets.thumbnail')}" }, {suppress_link: true}) %> +
    +
    +

    + <%= recent_document %> +

    +
    <% end %> -

    +

    <%= t('hyrax.homepage.recently_uploaded.document.keyword_label') %>: <%= link_to_facet_list(recent_document.keyword, 'keyword', t('hyrax.homepage.recently_uploaded.document.keyword_missing')).html_safe %>

    -
    -
    • +
    diff --git a/app/views/hyrax/homepage/_recently_uploaded.html.erb b/app/views/hyrax/homepage/_recently_uploaded.html.erb index 8479e700..dfcb8723 100644 --- a/app/views/hyrax/homepage/_recently_uploaded.html.erb +++ b/app/views/hyrax/homepage/_recently_uploaded.html.erb @@ -3,8 +3,6 @@

    <%= t('.no_public') %>

    <% else %>
    - <%= render partial: "recent_document", collection: recent_documents %> -
    <% end %>