Merge pull request #2266 from samvera/styling-updates

Styling updates

Gemfile.lock

@@ -61,7 +61,7 @@ GIT
 
 GIT
   remote: https://github.com/samvera/hyrax.git
-  revision: b98d6f4f57b3d60cabc1c192e12053a11f93eb8c
+  revision: 26fdf09c32c5a559f69df8df12345028111be0e2
   branch: main
   specs:
     hyrax (5.0.1)

app/assets/javascripts/stat_slider.js

@@ -1,6 +1,6 @@
 // jQuery Slider
 $(document).on('turbolinks:load', function() {
-  $('.institutional-repository-carousel .item').each(function(){
+  $('.institutional-repository-carousel .carousel-item').each(function(){
     var itemToClone = $(this);
 
     for (var i = 1; i < 6; i++) {

app/assets/stylesheets/hyku.scss

@@ -496,9 +496,9 @@ body.public-facing {
   width: unset;
 }
 
-.featured-collection-section {
-  border: 1px solid #ccc;
-}
+// .featured-collection-section {
+//   border: 1px solid #ccc;
+// }
 
 .mb-30 {
   margin-bottom: 30px;
@@ -664,3 +664,11 @@ tr[data-feature="use-iiif-print"] {
   font-weight: normal;
   text-decoration: underline;
 }
+
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0L1.25 1.5 3.75 4 1.25 6.5 2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+}

app/assets/stylesheets/themes/cultural_repository.scss

@@ -1,5 +1,54 @@
 .cultural_repository {
   ////// Navbar //////
+  .navbar-expand-lg .navbar-collapse {
+    @media (min-width: 992px) {
+      display: flex !important;
+      flex-basis: auto;
+      flex-direction: column;
+    }
+  }
+
+  .cultural-repository.facets.sidenav {
+    padding: 16px 8px;
+  }
+
+  .card.facet-limit {
+    border-color: transparent !important;
+    background-color: #fff !important;
+    border-bottom: 1px solid transparent !important;
+    border-left: 1px solid transparent !important;
+    border-radius: 0 !important;
+    border-right: 1px solid transparent !important;
+    border-top: 1px solid #ddd !important;
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important;
+    margin-bottom: 0 !important;
+
+    .card-header {
+      border-bottom: 0 !important;
+      background-color: #ffffff !important;
+      border-color: #ddd !important;
+    }
+  }
+
+  .cultural-repository.recent-works-container {
+    .list-group {
+      flex-direction: row;
+    }
+  }
+
+  .navbar-toggler-icon, .facets-toggle.navbar-toggler {
+    display: none;
+  }
+
+  .search-items {
+    padding: 0;
+    margin: 8px -16px 8px 0px
+  }
+
+  .cultural-homepage > .container {
+    display: flex;
+  }
 
   .clear-right {
     clear: right !important;
@@ -20,7 +69,7 @@
 
   }
 
-  div.form-group > label.control-label.col-sm-4 {
+  div.form-group > label.col-sm-4.col-form-label {
     color: #dcdcdc;
     font-weight: 400 !important;
   }
@@ -80,14 +129,22 @@
     margin-top: 20px;
   }
 
-  .mt-40 {
+  .mt-4 {
     margin-top: 40px;
   }
 
-  .mb-40 {
+  .mb-4 {
     margin-bottom: 40px;
   }
 
+  .mt-6 {
+    margin-top: 60px;
+  }
+
+  .mb-6 {
+    margin-bottom: 60px;
+  }
+
   .pt-30 {
     padding-top: 30px;
   }
@@ -108,6 +165,10 @@
     margin-bottom: 40px;
   }
 
+  .image-masthead {
+    overflow: auto;
+  }
+
   .image-masthead .background-container {
     -webkit-filter: none;
     filter: none;
@@ -184,39 +245,6 @@
     }
   }
 
-  // Note: copied over to override * line 254, /usr/local/bundle/gems/bootstrap-sass-3.4.1/assets/stylesheets/bootstrap/_panels.scss */
-  .panel-default {
-    border-color: transparent !important;
-    // prevent cultural repository theme override to the workflow actions header background
-    .panel-workflow .panel-heading {
-      background-color: #e6ab5f !important;
-    }
-
-    .panel-heading {
-      background-color: #ffffff !important;
-      border-color: #ddd  !important;
-    }
-  }
-
-  // Note: copied over to override /* line 7, /usr/local/bundle/gems/bootstrap-sass-3.4.1/assets/stylesheets/bootstrap/_panels.scss */
-  .panel {
-    background-color: #fff !important;
-    border-bottom: 1px solid transparent !important;
-    border-left: 1px solid transparent !important;
-    border-radius: 0 !important;
-    border-right: 1px solid transparent !important;
-    border-top: 1px solid #ddd !important;
-    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0) !important;
-    margin-bottom: 0 !important;
-  }
-
-  // Note: copied over to override /* line 22, /usr/local/bundle/gems/bootstrap-sass-3.4.1/assets/stylesheets/bootstrap/_panels.scss */
-  .panel-heading {
-    border-bottom: 0 !important;
-    padding: 10px 15px !important;
-  }
-
   // Note: copied over to override /* line 238, /usr/local/bundle/gems/bootstrap-sass-3.4.1/assets/stylesheets/bootstrap/_panels.scss */
   .panel-group .panel-heading + .panel-collapse > .panel-body,
   .panel-group .panel-heading + .panel-collapse > .list-group {

app/assets/stylesheets/themes/cultural_show.scss

@@ -20,6 +20,7 @@
 
   .relationships-container {
     margin-bottom: 60px;
+    max-width: 33%;
 
     .relationships-box {
 

app/assets/stylesheets/themes/institutional_repository.scss

@@ -30,9 +30,16 @@
 
   ////// Navbar //////
 
+  .navbar-collapse {
+    justify-content: space-between;
+  }
+
   // styles the top nav menu application name that is centered
   .institutional-repository-application-name {
     text-align: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
 
     span {
       color: #fff;
@@ -137,7 +144,7 @@
   .stats-color-block {
     background-color: #f8f8f8;
     border-bottom: 1px solid #ddd;
-    margin-top: -25px;
+    margin-top: -20px;
   }
 
   .fa-chevron-right,
@@ -164,6 +171,13 @@
         margin-right: 0;
       }
     }
+
+    .carousel-item.active {
+      display: flex;
+      padding-top: 1em;
+      padding-left: 10em;
+      padding-right: 10em;
+    }
   }
 
   .carousel .item .col-xs-12 {

app/assets/stylesheets/themes/neutral_repository.scss

@@ -1,4 +1,13 @@
 .neutral_repository {
+  .theme-container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .carousel-item.active {
+    display: flex;
+    justify-content: center;
+  }
 
   ////// Basic Apperance Styles //////
 

app/assets/stylesheets/themes/scholarly_show.scss

@@ -15,6 +15,10 @@
       line-height: 1.5;
       padding: 0;
     }
+
+    .col-sm-6 {
+      display: flex
+    }
   }
 
   .mb-1 {

app/views/catalog/_index_header_list_collection.html.erb

@@ -1,8 +1,8 @@
 <%# OVERRIDE Hyrax v5.0.0rc2 %>
 
-<div class="search-results-title-row col-12 d-flex flex-row align-items-center pb-2">
+<div class="search-results-title-row col-12 d-flex flex-row align-items-center pb-2 mb-3">
   <%# OVERRIDE begin %>
-  <h3 class="search-result-title mb-0 pr-3"><%= link_to markdown(document.title_or_label), generate_work_url(document, request) %></h3>
+  <h3 class="search-result-title mb-n2"><%= link_to markdown(document.title_or_label), generate_work_url(document, request) %></h3>
   <%# OVERRIDE end %>
   <%= Hyrax::CollectionPresenter.new(document, current_ability).collection_type_badge %>
 </div>

app/views/hyrax/homepage/_featured_collection_section.html.erb

@@ -9,7 +9,7 @@
         <% end %>
       </ol>
     </div>
-    <%= f.submit("Save order", class: 'btn btn-secondary') %>
+    <%= f.submit("Save order", class: 'btn btn-primary') %>
   <% end %>
 <% else %>
   <table class="table table-striped collection-highlights">
@@ -26,6 +26,6 @@
   <li>
     <%= link_to t('hyrax.homepage.admin_sets.link'),
                 main_app.search_catalog_path(f: { generic_type_sim: ["Collection"]}),
-                class: 'btn btn-secondary' %>
+                class: 'btn btn-primary mt-1' %>
   </li>
 </ul>

app/views/themes/cultural_repository/_masthead.html.erb

@@ -15,7 +15,7 @@
           <%= render '/admin_util_links' %>
         <% else %>
           <%= render '/user_util_links' %>
-          <div class="clearfix d-md-flex justify-content-end col-12 col-md-6">
+          <div class="col-8 ml-auto search-items">
             <%= render partial: 'catalog/search_form' %>
           </div>
         <% end %>

app/views/themes/cultural_repository/catalog/_search_form.html.erb

@@ -5,11 +5,11 @@
   <%= hidden_field_tag :search_field, 'all_fields' %>
   <div class="form-group row">
 
-    <label class="col-sm-4 mb-0" for="search-field-header">
+    <label class="col-sm-4 col-form-label" for="search-field-header">
       <%= t("hyrax.search.form.q.label", application_name: application_name) %>
     </label>
 
-    <div class="input-group col-sm-9">
+    <div class="input-group col-sm-8">
       <%= text_field_tag :q, current_search_parameters , class: "q form-control", id: "search-field-header", placeholder: t("hyrax.search.form.q.placeholder") %>
 
       <div class="input-group-append">

app/views/themes/cultural_repository/hyrax/homepage/_marketing.html.erb

@@ -2,6 +2,6 @@
 
 <% if display_content_block? @marketing_text %>
   <div class="home_marketing_text row">
-    <%= displayable_content_block @marketing_text, class: 'col-md-12 mt-0 mb-0 home_marketing_text', role: 'complementary' %>
+    <%= displayable_content_block @marketing_text, class: 'col-md-12 mt-6 mb-6 home_marketing_text', role: 'complementary' %>
   </div>
 <% end %>

app/views/themes/cultural_repository/layouts/homepage.html.erb

@@ -5,7 +5,7 @@
     <div class="background-container" title="<%= block_for(name: 'banner_image_text') %>" style="background-image: url('<%= "#{banner_image}?#{Time.now.to_i}" %>')"></div>
     <div class="container">
       <% if controller_name == 'homepage' %>
-      <div class="col-md-3 facet-panel-background-color mt-3 mb-0">
+      <div class="col-md-3 facet-panel-background-color mt-4 mb-4">
         <%= render 'themes/cultural_repository/facets' %>
       </div>
       <% end %>

app/views/themes/institutional_repository/_masthead.html.erb

@@ -12,11 +12,11 @@
       <div class="collapse navbar-collapse" id="top-navbar-collapse">
         <div class="d-none d-lg-block d-md-block"><%= render '/logo' %></div>
 
-        <div class="col-lg-2 col-md-2">
+        <div class="institutional-repository-application-name col-lg-2 col-md-2">
           <span><%= application_name %></span>
         </div>
 
-        <div class="navbar-right col-lg-5 col-md-5">
+        <div class="navbar-right col-lg-6 col-md-5">
           <%= render partial: 'catalog/search_form' %>
         </div>
       </div>

app/views/themes/institutional_repository/catalog/_search_form.html.erb

@@ -3,13 +3,13 @@
 <%= form_tag search_form_action, method: :get, class: "institutional-repository form-horizontal search-form", id: "search-form-header", role: "search" do %>
   <%= render Blacklight::HiddenSearchStateComponent.new(params: search_state.params_for_search.except(:q, :search_field, :qt, :page, :utf8)) %>
   <%= hidden_field_tag :search_field, 'all_fields' %>
-  <div class="form-group">
+  <div class="form-group d-flex">
 
-    <label class="col-sm-6 mb-0" for="search-field-header">
+    <label class="control-label col-sm-6 mb-0" for="search-field-header">
       <%= t("hyrax.search.form.q.label", application_name: application_name) %>
     </label>
 
-    <div class="input-group col-sm-9">
+    <div class="input-group">
       <%= text_field_tag :q, current_search_parameters , class: "q form-control", id: "search-field-header", placeholder: t("hyrax.search.form.q.placeholder") %>
 
       <div class="input-group-append">

app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb

@@ -7,7 +7,7 @@
   <div class="carousel-inner">
     <% resource_types.each.with_index do |(k,v), i| %>
       <% next if v[0].zero? %>
-      <div class="carousel-item <%= 'active' if i.zero? %>">
+      <div class="carousel-item <%= 'active' if i == 1 %>">
         <div class="col-sm-3 col-md-2 text-center">
           <%= link_to "/catalog?f[resource_type_sim][]=#{k}", style: "color: inherit;" do %>
             <i class='<%= "#{v[1]}" %>' aria-hidden="true"></i>
@@ -18,12 +18,12 @@
       </div>
     <% end %>
   </div>
-<a class="carousel-control-prev" href="#carousel-tilenav" role="button" data-slide="prev">
-  <span class="fa fa-chevron-left carousel-control-prev-icon" aria-hidden="true"></span>
-  <span class="sr-only">Previous</span>
-</a>
-<a class="carousel-control-next" href="#carousel-tilenav" role="button" data-slide="next">
-  <span class="fa fa-chevron-right carousel-control-next-icon" aria-hidden="true"></span>
-  <span class="sr-only">Next</span>
-</a>
+  <a class="carousel-control-prev" href="#carousel-tilenav" role="button" data-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="carousel-control-next" href="#carousel-tilenav" role="button" data-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
 </div>