Merge abc0baa into 3479ecb

Gemfile

@@ -13,6 +13,8 @@ gem 'sqlite3', '~> 1.3.6' # development and testing
 # Use Puma as the app server
 gem 'puma', '~> 3.11'
 # Use SCSS for stylesheets
+# Gem integrates the C implementation of Sass, LibSass, into the asset pipeline
+# https://github.com/sass/sassc-rails
 gem 'sassc-rails'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'

app/assets/javascripts/application.js

@@ -24,8 +24,18 @@
 //= require select2
 //= require clipboard
 
+// With Turbolinks, jQuery $(document).ready events fire only in response
+// to the initial page load, not after any subsequent page changes
+// https://github.com/turbolinks/turbolinks#observing-navigation-events
 document.addEventListener("turbolinks:load", function() {
+  // Initialize 'Select2', jQuery based replacement for select boxes
+  // https://github.com/argerim/select2-rails#usage
   $('.selecttwo').select2();
+
+  // Initialize Boostrap tooltips for all elements having data-toggle
+  // attribute set to 'tooltip'. Uses the title attr as tooltip.
+  // https://getbootstrap.com/docs/4.0/components/tooltips
+  $('[data-toggle="tooltip"]').tooltip();
 });
 
 $(document).ready(function(){

app/assets/stylesheets/application.scss

@@ -14,8 +14,97 @@
  *= require_self
  *= require_tree .
  */
-@import "application/filter-box";
-@import "application/table";
+
+$primary: #0C415F;
+$danger: #a80833;
+$primary-active: #1f6993;
+$primary-hover: #1a5b82;
+
+@import "bootstrap";
+
+th {
+  @extend .text-white;
+  @extend .bg-primary;
+}
+
+html, body {
+  height: 100%;
+  min-width: 1000px;
+  width: 100%;
+}
+
+.page-container {
+  margin: 50px 0 0 50px;
+  width: calc(100% - 100px);
+}
+
+h1 {
+  color: $primary;
+  margin-bottom: .5em;
+}
+
+.dashboard-header-link {
+  text-decoration: none !important;
+}
+
+h3:hover {
+  text-decoration: none;
+  color: $primary-hover;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+#content {
+  flex: 1 0 auto;
+}
+
+#footer {
+  flex-shrink: 0;
+
+  a {
+    color: white;
+  }
+
+  .footer-element {
+    padding-top: 20px;
+
+    &__left {
+      @extend .footer-element;
+      padding-left: 50px;
+    }
+  }
+}
+
+.dropdown-menu {
+  padding: 10px;
+  width: auto;
+}
+
+.empty-table-label {
+  text-align: center;
+  padding-top: 1.2em;
+}
+
+.table-bar {
+  width: auto;
+  border: 0;
+  margin: 1.5em 0 1em;
+
+  td {
+    padding-right: 20px;
+  }
+}
+
+.table-flex-width {
+  width: auto;
+}
+
+.unread {
+  background-color: #e6f3ff;
+}
 
 .bulletless {
   list-style-type: none;

app/assets/stylesheets/vms.scss

@@ -1,7 +1,6 @@
 // Place all the styles related to the vm controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-@import "layout";
 
 .half-screen-box {
     width: 49%;
@@ -27,14 +26,6 @@
   padding-bottom: 1.5em;
 }
 
-.filter_icon {
-  font-size: 2em;
-}
-
-h2{
-  margin-top: 40px;
-}
-
 .round {
   height: 1rem;
   width: 1rem;
@@ -44,16 +35,6 @@ h2{
   display: inline-block;
 }
 
-.boot-time {
-  height: 1rem;
-  font-size: 0.75rem;
-  background-color: rgba($success, 0.3);
-  border-radius: 0.5rem;
-  width: 11rem;
-  vertical-align: middle;
-  float: left;
-}
-
 .arrow-up::before {
   content: "\2191";
 }
@@ -80,18 +61,4 @@ h2{
 
 .script-doc::before {
   content: "\1F4CE";
-}
-
-.btn-manage {
-  font-size: 1.25rem;
-  margin-left: 0.5rem;
-  font-weight: bold;
-  text-decoration: none;
-  color: black;
-}
-
-.btn-manage:hover {
-  text-decoration: none;
-  color: black;
-  filter: drop-shadow(2px 2px 1px $secondary);
-}
+}

app/views/hosts/index.html.erb

@@ -1,8 +1,6 @@
-<h1>
-  Hosts
-</h1>
+<h1 class="float-left">Hosts</h1>
 
-<input class="mb-3 bg-secondary border-0 rounded text-white filter-box" type="text" id="filter" onkeyup="filterTable('filter', 'hosts')" placeholder="Search">
+<input class="filter-box float-left ml-3 mt-2" type="text" id="filter" onkeyup="filterTable('filter', 'hosts')" placeholder="Search hosts">
 
 <table data-toggle="table" class="table" id="hosts">
   <thead>
@@ -16,8 +14,9 @@
   <tbody>
   <% @hosts.each do |host| %>
     <tr>
-      <td class="table-active"><%= link_to host.name, {controller: :hosts, action: 'show', id: host.name},
-                      method: :get, class: "btn btn-link" %></td>
+      <td class="table-active">
+        <%= link_to host.name, {controller: :hosts, action: 'show', id: host.name}, method: :get %>
+      </td>
       <td class="table-active"><%= host.vendor %></td>
       <td class="table-active"><%= host.model %></td>
       <td class="table-active align-middle">

app/views/projects/index.html.erb

@@ -1,19 +1,16 @@
-<h1>Projects</h1>
+<h1 class="float-left">Projects</h1>
 
-<table class="table-bar">
-  <tbody>
-    <tr>
-      <% if current_user.employee_or_admin? %>
-      <td>
-        <%=link_to(fa_icon('plus'),
-        {controller: :projects, action: 'new'},
-        method: :get, class: 'btn btn-primary', id: 'createNewProjectButton') %>
-      </td>
-      <% end %>
-    </tr></tbody></table>
+<div>
+  <% if current_user.employee_or_admin? %>
+    <%= link_to(fa_icon('plus'), new_project_path,
+      title: 'Create new project',
+      :data => { toggle: 'tooltip', placement: 'left' },
+      class: 'btn btn-primary float-right', id: 'createNewProjectButton') %>
+  <% end %>
+</div>
 
 <%= render 'list', projects: @projects %>
 
 <% if @projects.length == 0 %>
-<p class="empty-table-label">No projects created yet</p>
+  <p class="empty-table-label">No projects created yet</p>
 <% end %>