Revamped the home page a bit

assets/styles/kraken.scss

@@ -8,6 +8,13 @@ body{
   padding-left: $nav-width;
 }
 
+.card{
+  padding: 20px 30px;
+  background: white;
+  border-radius: 5px;
+  box-shadow: $box-shadow-2;
+}
+
 #main-nav{
   position: fixed;
   top: 0;
@@ -53,13 +60,31 @@ body{
   }
 }
 
+#main-actions{
+  width: 100%;
+  max-width: 100%;
+  margin-top: 0;
+  margin-bottom: 25px;
+
+  form,
+  input{
+    margin: 0;
+  }
+}
+
 #main-wrapper{
   max-width: 1200px;
   margin-top: 25px;
-  padding: 20px 30px;
+}
-  background: white;
+
-  border-radius: 5px;
+#main-wrapper.container.fluid{
-  box-shadow: $box-shadow-2;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+#site-header{
+  margin-bottom: 0;
 }
 
 #item-header,

lib/routes/index.rb

@@ -2,9 +2,11 @@ namespace '/' do
 
   get '' do
     items = Item.reverse(:updated_at).limit(10).all()
+    licenses = License.reverse(:updated_at).limit(10).all()
     erb :index, :locals => {
       :title => 'Dashboard',
-      :items => items
+      :items => items,
+      :licenses => licenses
     }
   end
 

views/index.erb

@@ -1,11 +1,57 @@
-<p>This is a test.</p>
+<div class="row">
+  <div class="twelve columns">
+    <h1 id="site-header">Welcome to Raven</h1>
+  </div>
+</div>
 
-<% if items.length > 0 %>
+<hr>
-  <ul>
+
-  <% items.each do |item| %>
+<div class="row">
-    <li><%= item.name %></li>
+  <div class="six columns">
-  <% end %>
+    <h3>Recent inventory updates</h3>
-  </ul>
+    <% if items.length > 0 %>
-<% else %>
+      <table class="u-full-width">
-  <p>There are no items to display.</p>
+        <thead>
-<% end %>
+          <tr>
+            <th>Item name</th>
+            <th>Updated at</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% items.each do |item| %>
+            <tr>
+              <td><%= item.name %></td>
+              <td><%= date_format(item.updated_at) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p>There are no items to display.</p>
+    <% end %>
+  </div>
+
+  <div class="six columns">
+    <h3>Recent license updates</h3>
+    <% if licenses.length > 0 %>
+      <table class="u-full-width">
+        <thead>
+          <tr>
+            <th>License name</th>
+            <th>Updated at</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% licenses.each do |license| %>
+            <tr>
+              <td><%= license.name %></td>
+              <td><%= date_format(license.updated_at) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      <p>There are no licenses to display.</p>
+    <% end %>
+  </div>
+</div>

views/layout.erb

@@ -13,7 +13,10 @@
   <!-- Main navigation -->
   <%= erb :'layout/navbar' %>
 
-  <div id="main-wrapper" class="container">
+  <!-- Inventory search/actions bar -->
+  <%= erb :'layout/actions' %>
+
+  <div id="main-wrapper" class="container fluid card">
     <%= yield %>
   </div>
 </body>

views/layout/actions.erb

@@ -0,0 +1,9 @@
+<div id="main-actions" class="container fluid card">
+  <div class="row">
+    <div class="six columns">
+      <form action="/search" class="u-full-width">
+        <input id="search-field" class="u-full-width" type="text" placeholder="Search your inventory..." name="Search field">
+      </form>
+    </div>
+  </div>
+</div>