Materialize css

web/assets/custom.css

@@ -1,20 +1,9 @@
-.container {
-  background-color: #CFD8DC;
-}
-
 body {
-  background-color: #455A64;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 }
 
-.page-header {
-  border-bottom: 1px solid #B6B6B6;
-}
-
-#job_list td,#job_list th {
-  border-top: 1px solid #B6B6B6;
-  color: #212121;
-}
-
-.breadcrumb {
-  background-color: #FFFFFF;
+main {
+  flex: 1 0 auto;
 }

web/views/dashboard.haml

@@ -1,8 +1,5 @@
-%ol.breadcrumb
-  %li.active Home
-
 %h3 Running Jobs
-%table.table#job_list
+%table.bordered#job_list
   %tr
     %th Job
     %th Last performed at

web/views/job.haml

@@ -1,7 +1,4 @@
-%ol.breadcrumb
-  %li
-    %a{ href: url('/') } Home
-  %li.active= @job.job_id
+%a{ href: url('/') } << Back to Home
 
 %h2
   "#{@job.job_id}" Log:

web/views/layout.haml

@@ -3,23 +3,29 @@
   %head
     %meta{ charset: 'utf-8' }
     %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
-    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
 
     %title Crono Dashboard
 
-    %link{ href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css', rel: 'stylesheet' }
-    %link{ href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css', rel: 'stylesheet' }
+    %link{ href: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css', rel: 'stylesheet', media: 'screen,projection' }
     %link{ href: "#{env['SCRIPT_NAME']}/custom.css", rel: 'stylesheet' }
 
-  %body
-    %br
-    %br
-    .container
-      .page-header
-        %h1
+  %body.blue-grey.darken-2
+    %header
+      .container.blue-grey.white-text
+        %h1 Crono Dashboard
+
+    %main
+      .container.blue-grey.lighten-4.grey-text.text-darken-4
+        = yield
+
+    %footer.page-footer.blue-grey.darken-2
+      .footer-copyright.blue-grey.darken-2
+        .container.blue-grey.lighten-4.grey-text.text-darken-4
           Crono #{Crono::VERSION}
-          %small Dashboard
-      = yield
+
+          %a.right{ href: 'https://github.com/plashchynski/crono', target: '_blank' } Documentation
+
 
     %script{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' }
-    %script{ src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js' }
+    %script{ src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js' }