Updated dataset page heading and listed datasets UI

app/assets/stylesheets/layouts/dataset_index.scss

@@ -1,4 +1,30 @@
 .dataset_page {
+  .dataset_list {
+    h2 {
+      letter-spacing: 0.025rem;
+    }
+
+    .dataset {
+      font-size: 1.1rem;
+
+      h3 {
+        color: var(--primary);
+      }
+
+      .region {
+        font-size: 0.9rem;
+      }
+
+      .link_container a {
+        color: var(--primary);
+      }
+    }
+
+    hr {
+      border-top: 1px solid #a0a0a0;
+    }
+  }
+
   .dataportals {
     padding-top: 0;
     display: flex;
@@ -24,7 +50,9 @@
         align-items: stretch;
       }
 
-      h3, h4, p {
+      h3,
+      h4,
+      p {
         color: #fff;
       }
 
@@ -37,82 +65,44 @@
         transition: all 0.4s ease;
       }
 
-      &:nth-of-type(3n+1) div {
+      &:nth-of-type(3n + 1) div {
         background-color: rgba(202, 30, 86, 0.5);
         border-bottom: 1em solid var(--primary);
         overflow: hidden;
       }
 
-      &:nth-of-type(3n+2) div {
+      &:nth-of-type(3n + 2) div {
         background-color: rgba(76, 154, 210, 0.5);
         border-bottom: 1em solid var(--secondary);
         overflow: hidden;
       }
 
-      &:nth-of-type(3n+0) div {
+      &:nth-of-type(3n + 0) div {
         background-color: rgba(113, 113, 113, 0.5);
         border-bottom: 1em solid #717171;
         overflow: hidden;
       }
 
-      &:nth-of-type(3n+1) div:hover {
+      &:nth-of-type(3n + 1) div:hover {
         background-color: rgba(253, 37, 107, 0.5);
         border-bottom: 1em solid var(--primary);
         overflow: hidden;
       }
 
-      &:nth-of-type(3n+2) div:hover {
+      &:nth-of-type(3n + 2) div:hover {
         background-color: rgba(94, 191, 261, 0.5);
         border-bottom: 1em solid var(--secondary);
         overflow: hidden;
       }
 
-      &:nth-of-type(3n+0) div:hover {
+      &:nth-of-type(3n + 0) div:hover {
         background-color: rgba(161, 161, 161, 0.5);
         border-bottom: 1em solid #a0a0a0;
         overflow: hidden;
       }
     }
   }
 
-  table {
-    box-sizing: border-box;
-    margin-top: 2em;
-    border-collapse: collapse;
-
-    .dataseturl {
-      font-size: small;
-    }
-
-    border: 1px solid var(--primary);
-    box-sizing: border-box;
-  }
-
-  th, td {
-    border: 1px solid var(--primary);
-    padding: 0.25em 1em;
-    box-sizing: border-box;
-  }
-
-  tr td {
-    &:nth-of-type(1), &:nth-of-type(3) {
-      width: 25%;
-    }
-
-    &:nth-of-type(2) {
-      width: 40%;
-    }
-
-    &:nth-of-type(4) {
-      width: 10%;
-    }
-  }
-
-  th {
-    background-color: var(--primary);
-    color: #fff;
-  }
-
   form {
     box-sizing: border-box;
     padding: 2em 2em;
@@ -132,7 +122,8 @@
             font-size: 1.15em;
           }
 
-          input, textarea {
+          input,
+          textarea {
             box-sizing: border-box;
             width: 50%;
             padding-left: 1em;

app/views/data_sets/index.erb

@@ -1,42 +1,33 @@
-<% content_for :title, "Datasets for #{@competition.name}" %>
+<% content_for :title, "GovHack Datasets" %>
 <main class="dataset_page">
-  <h1>
-    <%= yield :title %>
-  </h1>
-  <% if @data_sets.present? %>
-    <%= link_to 'Download CSV', data_sets_path(format: 'csv'), class: 'download-csv' %>
-    <table class="projects-table" data-turbolinks="false" id="dataset_table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Description</th>
-          <th>Dataset URL</th>
-          <th>Jurisdiction</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% @data_sets.each do |data_set| %>
-          <tr>
-            <td>
-              <%= link_to data_set.name, data_set_path(data_set) %>
-            </td>
-            <td>
-              <%= markdown truncate(data_set.description, length: 100, omission: '... ') %>
-            </td>
-            <td>
-              <%= link_to data_set.url, visits_path(visit: {visitable_type: 'DataSet', visitable_id: data_set.id}), class: 'dataseturl' %>
-            </td>
-            <td>
-              <%= data_set.region.name %>
-            </td>
-          </tr>
-        <% end %>
-      </tbody>
-    </table>
-  <% else %>
-    <p>
-      <strong>No Data Set Highlights saved for <%= @competition.name %> at this time.</strong>
-    </p>
-  <% end %>
+  <section>
+    <h1 class="mx-3">
+      <%= yield :title %>
+    </h1>
+  </section>
+  <section class="dataset_list">
+    <% if @data_sets.present? %>
+      <h2 class="mx-3 mb-5 fw-bold"><%= @data_sets.length %> Datasets available</h2>
+      <% @data_sets.each do |data_set| %>
+        <section class="dataset d-flex justify-content-between align-items-center mx-3 my-5">
+          <div>
+            <h3 class="mb-3"><%= data_set.name %></h3>
+            <p class="mb-2"><%= data_set.description %></p>
+            <p class="region"><%= data_set.region.name %></p>
+          </div>  
+          <div class="link_container">
+            <%= link_to "Go to Dataset", data_set_path(data_set) %>
+          </div>  
+        </section> 
+        <% unless data_set == @data_sets.last %> 
+          <hr/>
+        <% end %>    
+      <% end %>
+    <% else %>
+      <p>
+        <strong>No matching datasets at this time.</strong>
+      </p>
+    <% end %>
+  </section>  
+  <%= link_to 'Back to Resources', resources_path %>
 </main>
-<%= link_to 'Back to Resources', resources_path %>