Merge pull request #578 from psu-stewardship/collection-show2

Collection Show Page

app/assets/stylesheets/collections.css.scss

@@ -0,0 +1,31 @@
+.collection_description {
+  color: #333;
+  font-family: 'Lato', Verdana, Arail, Helvetica, sans-serif;
+  font-size: 1.15em;
+  font-weight: 300;
+  line-height: 1.25em;
+  letter-spacing: .10em;
+}
+
+.metadata-collections dt {
+  float: left;
+  margin-right: 1em;
+}
+
+.collection-icon {
+  font-size: 20vw;
+  color: #fab801;
+  padding: 15px 0 0 10px;
+}
+
+.actions-controls-collections {
+  display: block;
+  margin: 1em 0 0 1em;
+}
+
+.actions-controls-collections a:link,
+.actions-controls-collections a:visited,
+.actions-controls-collections a:hover {
+  color: #FFF;
+  text-align: center;
+}

app/assets/stylesheets/sufia.css.scss

@@ -21,6 +21,7 @@
 @import 'header';
 @import 'styles';
 @import 'file-listing';
+@import 'collections';
 
 #browse-everything {
   top:10%;

app/views/collections/_media_display.html.erb

@@ -1 +1 @@
-<a href="<%= collections.collection_path %>" target="_new"><img src="/assets/folder.png" alt="No preview available" width="100%" /></a>
+<a href="<%= collections.collection_path %>" target="_new"><span class="glyphicon glyphicon-th collection-icon"></span></a>

app/views/collections/_show_actions.html.erb

@@ -1,7 +1,7 @@
-<h2 class="non lower">Actions</h2>
-<p>
+<h2 class="sr-only">Actions</h2>
+<div class="actions-controls-collections">
   <% if can? :edit, @collection %>
-      <%= link_to "Edit", collections.edit_collection_path %> &nbsp;&nbsp;
-      <%= link_to "Add files from your dashboard",  sufia.dashboard_files_path %>
+      <span class="label label-default"><%= link_to "Edit", collections.edit_collection_path %></span> &nbsp;&nbsp;
+      <span class="label label-default"><%= link_to "Add files",  sufia.dashboard_files_path %></span>
   <%end %>
-</p>
+</div>

app/views/collections/_show_descriptions.html.erb

@@ -1,21 +1,13 @@
-<h2 class="non lower">Descriptions</h2>
-<table class="table table-striped"><!-- class="verticalheadings"> -->
-  <tbody>
-    <tr>
-      <th><%= get_label("total_items") %></th>
-      <td><%= @collection.members.count %></td>
-    </tr>
-    <tr>
-      <th><%= get_label("size") %></th>
-      <td><%= number_to_human_size(@collection.bytes) %></td>
-    </tr>
-    <% (@collection.terms_for_display).each do |term| %>
+<h2 class="sr-only">Descriptions</h2>
+<dl class="metadata-collections">
+  <dt><%= get_label("total_items") %></dt>
+  <dd><%= @collection.members.count %></dd>
+  <dt><%= get_label("size") %></dt>
+  <dd><%= number_to_human_size(@collection.bytes) %></dd>
+  <% (@collection.terms_for_display).each do |term| %>
       <% if @collection.send(term).present? %>
-        <tr>
-          <th><%= get_label(term) %></th>
-          <td><%= render_show_field_partial_with_action("records", term, {record: @collection}) %> </td>
-        </tr>
+      <dt><%= get_label(term) %></dt>
+      <dd><%= render_show_field_partial_with_action("records", term, {record: @collection}) %></dd>
       <% end %>
-    <% end %>
-  </tbody>
-</table> <!-- /verticalheadings -->
+  <% end %>
+</dl>

app/views/collections/show.html.erb

@@ -3,21 +3,23 @@
 <%= render partial: 'generic_files/breadcrumbs', locals: {
   include_file: false, generic_file: GenericFile.new(title: @collection.title) } %>
 
-<h1 class="lower"><%= @collection.title %></h1>
-
-<h3><%=@collection.description%> </h3>
-
-<% unless has_collection_search_parameters? %>
   <div itemscope itemtype="http://schema.org/CollectionPage" class="row">
-    <div class="col-sm-4">
-      <%= render partial: 'collections/media_display', locals: { generic_file: @collection } %>
+    <div class="col-sm-9 pull-right">
+      <header>
+        <h1><%= @collection.title %></h1>
+        <p class="collection_description"><%=@collection.description%></p>
+      </header>
+      <% unless has_collection_search_parameters? %>
+      <%= render partial: 'collections/show_descriptions', locals: { generic_file: @collection } %>
+      <% end %>
     </div>
-    <div class="col-sm-8"><!-- class="column second"> -->
+    <div class="col-sm-3">
+      <%= render partial: 'collections/media_display', locals: { generic_file: @collection } %>
+      <% unless has_collection_search_parameters? %>
       <%= render partial: 'collections/show_actions' %>
-      <%= render partial: 'collections/show_descriptions', locals: { generic_file: @collection } %>
-    </div><!-- /columns second -->
-  </div> <!-- /columns two-b -->
-<% end %>
+      <% end %>
+    </div>
+  </div>
 
 <%= render 'sort_and_per_page' %>
 
@@ -35,5 +37,3 @@
 
 <%= render_document_index @member_docs %>
 <%= render partial: 'paginate' %>
-
-