LAE Style Cards.

pulibrary · Sep 25, 2019 · 602a9a8 · 602a9a8
1 parent 80b5811
commit 602a9a8
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 9 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -336,3 +336,119 @@ a.morelink {
     }
   }
 }
+
+
+$base-font-color: black;
+$base-background-color: white;
+$base-accent-color: #eee;
+// $base-border-radius: 4px;
+$base-spacing: 1.4em;
+$gutter: 2em;
+$card-background-color: white;
+
+.cards {
+  margin: 0.5em 0;
+  padding: 0;
+  -moz-column-gap: 0.5em;
+  -webkit-column-gap: 0.5em;
+  column-gap: 0.5em;
+}
+
+.cards .card {
+  display: inline-block;
+  padding: 1em;
+  margin: 0 0 0.5em;
+  width: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  .thumbnail {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+}
+
+.cards .card img {
+  width: 100%;
+}
+
+@media only screen and (min-width: $tab) {
+  .cards {
+    -moz-column-count: 2;
+    -webkit-column-count: 2;
+    column-count: 2;
+  }
+}
+
+@media only screen and (min-width: $tab-desk) {
+  .cards {
+    -moz-column-count: 3;
+    -webkit-column-count: 3;
+    column-count: 3;
+  }
+}
+
+@media only screen and (min-width: $desk) {
+  .cards {
+    -moz-column-count: 4;
+    -webkit-column-count: 4;
+    column-count: 4;
+  }
+}
+
+.cards {
+  @include clearfix;
+}
+
+.card {
+  $card-border-color: #ddd;
+  $card-border: none;//1px solid $card-border-color;
+  $card-background: lighten($card-background-color,2);
+  $card-header-background: $card-background;
+  $card-hover-background: lighten($card-background, 5);
+  $card-image-background: #DBD199;
+  $card-image-hover-background: lighten($card-image-background, 5);
+
+  @include transition (all 0.2s ease-in-out);
+  background-color: $card-background;
+  border: $card-border;
+  margin-bottom: $base-spacing*1.5;
+  padding: 0 1em;
+  cursor: pointer;
+  position: relative;
+
+  a {
+    text-decoration: none;
+  }
+
+  img {
+    width: 100%;
+    @include transition (all 0.2s ease-in-out);
+    background: $card-image-background;
+  }
+
+  .card-header {
+    padding-top: 0.7em;
+  }
+
+  &:hover {
+    background-color: $card-hover-background;
+
+    .card-image img {
+      background: $card-image-hover-background;
+    }
+
+    .card-header {
+      background-color: $card-hover-background;
+    }
+  }
+
+  &:active {
+    background-color: $card-background;
+
+    .card-header {
+      background-color: $card-background;
+    }
+  }
+}
diff --git a/app/views/catalog/_document_recent_items.html.erb b/app/views/catalog/_document_recent_items.html.erb
@@ -1,4 +1,4 @@
 <% # container for all documents in index view -%>
-<div id="documents" class="row recent-items">
+<div class="cards">
   <%= render collection: documents, as: :document, partial: 'index_recent_items', locals: {count: documents.count} %>
 </div>
diff --git a/app/views/spotlight/sir_trevor/blocks/_recent_item.html.erb b/app/views/spotlight/sir_trevor/blocks/_recent_item.html.erb
@@ -1,10 +1,8 @@
-<div class="document col-xs-6 col-md-3">
+<div class="card">
   <div class="thumbnail">
-    <%= render_thumbnail_tag(document, {}, :counter => document_counter_with_offset(document_counter)) %>
-    <div class="caption">
-      <h3>
-        <%= render_index_document document %> 
-      </h3>
+    <%= link_to_document document, image_tag(thumbnail_url(document).to_s.gsub(/full\/.*\/0/,"full/!400,400/0")) %>
+    <div class="card-header">
+      <%= render_index_document document %> 
     </div>
   </div>
 </div>
diff --git a/spec/views/spotlight/sir_trevor/blocks/_recent_items_block.html.erb_spec.rb b/spec/views/spotlight/sir_trevor/blocks/_recent_items_block.html.erb_spec.rb
@@ -42,8 +42,8 @@
   it 'renders a set of recent items' do
     render partial: p, locals: { recent_items_block: block }
 
-    expect(rendered).to have_selector ".document", count: 2
+    expect(rendered).to have_selector ".card", count: 2
     # Assert first document is the newest indexed one.
-    expect(rendered).to have_selector ".document:nth-child(1)", text: "L''ordine dorico ossia il tempio d''Ercole nella città di Cori umiliato alla santita di nostro signore Papa Pio Sesto"
+    expect(rendered).to have_selector ".card:nth-child(1)", text: "L''ordine dorico ossia il tempio d''Ercole nella città di Cori umiliato alla santita di nostro signore Papa Pio Sesto"
   end
 end