Merge pull request #10 from bumi/forms-index-page

Implement the card design

app/assets/stylesheets/application.css.scss

@@ -15,9 +15,12 @@
  */
 @import "bulma/sass/utilities/initial-variables";
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
+@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
 
-$family-sans-serif: 'Roboto', sans-serif;
+$family-sans-serif: 'Roboto',
-$family-secondary: 'Comfortaa', cursive;
+sans-serif;
+$family-secondary: 'Comfortaa',
+cursive;
 // // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
 // $blue: #083d77;
 // $red: #dd1c1a;
@@ -33,6 +36,7 @@ $primary: $blue;
 
 $text: $grey-dark;
 $body-background-color: #FAFCFE;
+$light: #fff;
 
 @import 'bulma/bulma';
 
@@ -40,6 +44,10 @@ $body-background-color: #FAFCFE;
   font-family: 'Lobster', cursive;
 }
 
+.card {
+  height: 100%;
+}
+
 body {
   min-height: 100vh;
 }

app/models/form.rb

@@ -11,6 +11,15 @@ class Form < ApplicationRecord
 
   validates_presence_of :title
 
+  # TODO: use counter_cache option on association
+  def submissions_count
+    submissions.count
+  end
+
+  def last_submission_date
+    submissions.order(created_at: :desc).first&.created_at
+  end
+
   def deactivate!(reason = nil)
     self.user.deactivate!(reason)
   end

app/views/forms/index.html.erb

@@ -1,5 +1,61 @@
-<%= link_to "new form", new_form_url %>
+<div class="section">
-<hr>
+  <div class="container">
-<% @forms.each do |form| %>
+    <div class="columns is-centered is-multiline">
-  <%= link_to form.title, form_url(form) %>
+      <div class="column is-3">
-<% end %>
+        <div class="card">
+          <div class="card-content is-half">
+            <h5 class="is-size-1 has-text-centered">
+              <%= link_to  new_form_url do %>
+              <i class="fas fa-plus"></i>
+              <% end %>
+            </h5>
+          </div>
+        </div>
+      </div>
+
+      <% @forms.each do |form| %>
+      <div class="column is-3">
+        <div class="card">
+          <div class="card-content">
+            <div class="media">
+              <div class="media-content">
+
+                <p class="title is-4 "><%= link_to form.title, form_url(form) %></p>
+
+              </div>
+              <div class="media-right has-text-right is-size-4">
+                <figure class="image is-48x48 ">
+                  <%= link_to form.google_spreadsheet_url, {class: "has-text-success", target: "__blank"} do %>
+                  <i class="far fa-file-excel"></i>
+                  <% end %>
+                </figure>
+              </div>
+
+            </div>
+          </div>
+          <footer class="card-footer">
+            <p class="card-footer-item">
+              <span>Submissions:
+                <span class="has-text-weight-medium">
+                  <%= form.submissions_count %>
+                </span>
+              </span>
+            </p>
+            <p class="card-footer-item">
+              <span>Last:
+                <span class="has-text-weight-medium">
+                  <% if form.last_submission_date -%>
+                  <%= form.last_submission_date.to_formatted_s(:short) %>
+                  <% else -%>
+                  none
+                  <% end -%>
+                </span>
+              </span>
+            </p>
+          </footer>
+        </div>
+      </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -16,7 +16,7 @@
   <div id="wrapper" class="has-text-centered-mobile">
 
     <!-- Hero -->
-    <section class="hero is-medium">
+    <section class="hero is-medium is-light">
       <div class="hero-head">
         <div class="container">
           <nav class="navbar" role="navigation" aria-label="main navigation">
@@ -56,4 +56,4 @@
   </div>
 </body>
 
-</html>
+</html>