Cleaning up styles, fontawesome, etc.

omxhealth · Jan 3, 2017 · d714c46 · d714c46
1 parent e1dfbbc
commit d714c46
Show file tree

Hide file tree

Showing 30 changed files with 672 additions and 1,117 deletions.
diff --git a/Gemfile b/Gemfile
@@ -12,7 +12,6 @@ gem 'jquery-rails'
 gem 'jquery-ui-rails'
 gem 'jquery-ui-themes'
 gem 'jbuilder', '~> 2.0'
-gem 'sass-rails', '~> 5.0'
 gem 'highcharts-rails'
 gem 'jquery-tablesorter'
 gem 'yui-rails'
@@ -26,9 +25,11 @@ gem 'rabl'
 gem 'simple_form'
 gem 'cocoon'
 gem 'slim-rails'
-gem 'bootstrap-sass'
+gem 'font-awesome-sass'
+gem 'bootstrap'
 
 source 'https://rails-assets.org' do
+  gem 'rails-assets-tether', '>= 1.1.0'
   gem 'rails-assets-jstree'
 end
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -52,9 +52,9 @@ GEM
     bcrypt (3.1.11)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootstrap-sass (3.3.7)
-      autoprefixer-rails (>= 5.2.1)
-      sass (>= 3.3.4)
+    bootstrap (4.0.0.alpha5)
+      autoprefixer-rails (>= 6.0.3)
+      sass (>= 3.4.19)
     builder (3.2.2)
     byebug (9.0.6)
     capistrano (3.7.1)
@@ -93,6 +93,8 @@ GEM
       warden (~> 1.2.3)
     erubis (2.7.0)
     execjs (2.7.0)
+    font-awesome-sass (4.7.0)
+      sass (>= 3.2)
     globalid (0.3.7)
       activesupport (>= 4.1.0)
     highcharts-rails (4.2.5)
@@ -170,6 +172,7 @@ GEM
     rails-assets-jquery (3.1.1)
     rails-assets-jstree (3.3.3)
       rails-assets-jquery (>= 1.9.1)
+    rails-assets-tether (1.4.0)
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
     rails-dom-testing (1.0.8)
@@ -254,7 +257,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  bootstrap-sass
+  bootstrap
   bundler (>= 1.8.4)
   byebug
   capistrano
@@ -265,6 +268,7 @@ DEPENDENCIES
   country-select
   devise
   execjs
+  font-awesome-sass
   highcharts-rails
   jbuilder (~> 2.0)
   jquery-cookie-rails
@@ -280,6 +284,7 @@ DEPENDENCIES
   rabl
   rails (~> 4.2.0)
   rails-assets-jstree!
+  rails-assets-tether (>= 1.1.0)!
   ransack
   sass-rails (~> 5.0)
   shoulda

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -9,6 +9,7 @@
 //= require jquery_ujs
 //= require jquery-ui
 //= require jstree
+//= require tether
 //= require bootstrap
 //= require yui-min
 //= require_tree .
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,13 +1,11 @@
 @import 'jquery-ui';
 @import 'jquery-ui/cupertino';
 @import 'jstree';
-@import 'bootstrap-sprockets';
 @import 'bootstrap';
 @import 'shared/constants';
 @import 'shared/mixins';
 @import 'shared/layout';
 @import 'shared/flash';
 @import 'shared/pagination';
-@import 'shared/table';
 @import 'shared/form';
 @import 'shared/login';
diff --git a/app/assets/stylesheets/lims.scss b/app/assets/stylesheets/lims.scss
@@ -1,14 +1,15 @@
 @import 'jquery-ui';
 @import 'jquery-ui/cupertino';
 @import 'jstree';
-@import 'bootstrap-sprockets';
-@import 'bootstrap';
+@import 'font-awesome-sprockets';
+@import 'font-awesome';
 @import 'shared/constants';
+@import 'bootstrap-flex';
+
 @import 'shared/mixins';
 @import 'shared/layout';
 @import 'shared/flash';
 @import 'shared/pagination';
-@import 'shared/table';
 @import 'shared/form';
 @import 'shared/login';
 

diff --git a/app/assets/stylesheets/lims/layout.scss b/app/assets/stylesheets/lims/layout.scss
@@ -3,134 +3,74 @@ main {
   margin-top: 61px; // accommodate the navbar
 }
 
-.error_notification {
-  @extend .alert;
-  @extend .alert-danger;
-}
-
-body {
-  @extend .container-fluid;
-  position: relative;
-
-  & > header {
-    @extend .navbar;
-    @extend .navbar-fixed-top;
+#main-content {
+  margin-top: .5rem;
+  &.with-sidebar {
+    @extend .col-md-9;
+  }
+  &.without-sidebar {
+    @extend .col-md-12;
   }
 }
 
-// Table for displaying object data
-table#object-data {
-  text-align: left;
-  width: 100%;
-  margin: 1em auto;
-  border-collapse: collapse;
-}
-
-table#object-data td, table#object-data th {
-  border: 1px solid #636363;
-  padding: 0.4em;
-}
-
-table#object-data th {
-  background: #3399ff;
-  color: white;
-  width: 18%;
-}
-
-table#object-data th.spanheader {
-  background: #E0EEEE;
-  width: 100%;
-  color: gray;
-}
-
-table#object-data td {
-  background: #F7F7F7;
-  color: black;
-}
-
-table#object-data img.structure {
-  border: none;
-  padding: 0px;
-  margin: 0px;
-}
-
-table#object-data pre {
-  margin: 0px;
-  padding: 0px;
-  font-size: 14px;
-  font-family: courier;
-}
-
-table#object-data div.citations {
-  background: red !important;
-}
-
-table#object-data div.inner {
-  border: 1px solid silver;
-  margin: 0.5em 0;
-  padding: 0.3em;
-  background: white;
-}
-
-/* Metadata section for entities */
-div.metadata {
-  background: #FFFFCC;
-  padding: 0.5em;
-}
-
-/* Box used on show pages to group associated information */
-.box {
-  padding:6px;
-  margin-bottom: 10px;
-  background-color:#f6f6f6;
-  color:#505050;
-  line-height:1.5em;
-  border: 1px solid #e4e4e4;
-}
-
-h3.box-header {
-  background: #E0E0E0;
-}
-
-/* Pharmacological actions */
-div.action-legend {
-  float: right;
-  font-weight: bold;
+#sidebar-content {
+  @extend .col-md-3;
+  #sidebar {
+    overflow: hidden;
+    white-space: nowrap;
+    background: #FCFFF0;
+    min-height: 800px;
+
+    h2 {
+      @extend .rounded;
+      text-shadow: 0px 0px 0.05px white;
+      border: 2px solid #CDCDC1;
+      background: white;
+      font-weight: normal;
+      font-size: 15px;
+      margin: .5rem;
+      margin-bottom: 1rem;
+      padding: 0.5em 0.4em;
+    }
+  }
 }
 
-.action-yes {
-  background-color: #9AFF9A;
-}
+dl.standard {
+  @extend .row;
+  dt {
+    @extend .col-md-3;
+    @extend .col-sm-6;
+    @extend .col-xs-6;
+  }
+  dd {
+    @extend .col-md-9;
+    @extend .col-sm-7;
+    @extend .col-xs-6;
+  }
 
-.action-no {
-  background-color: #EEB4B4;
 }
 
-/* Inner tables in show views */
-table#object-data table.inner {
-  background: #E0DFDB;
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-  padding: 0;
-  margin: 0;
-  border: none;
+.error_notification {
+  @extend .alert;
+  @extend .alert-danger;
 }
 
-table#object-data table.inner th {
-  text-align: left;
-  border-collapse: collapse;
-  font-size: smaller;
-  color: #474747;
-  background: silver;
-  border: none;
-  border-bottom: 1px solid grey;
-  padding: 0.2em;
+table.list {
+  @extend .table;
+  @extend .table-striped;
+  @extend .table-sm;
+
+  tr.table-search {
+    @extend .table-info;
+    th {
+      input, select {
+        @extend .form-control;
+        @extend .form-control-sm;
+      }
+    }
+    .table-search-actions.btn-group {
+      float: right;
+    }
+  }
 }
 
-table#object-data table.inner td {
-  padding: 0 1em 0 0;
-  border: none;
-  border-top: 1px solid grey;
-  padding: 0.2em;
-}
diff --git a/app/assets/stylesheets/lims/studies.css.scss b/app/assets/stylesheets/lims/studies.css.scss
@@ -51,7 +51,8 @@
   margin: 0.5em 0;
 }
 
-img.info-logo {
+.info-logo {
   float: left;
-  margin-right: 1.5em;
-}
+  margin-right: 1rem;
+  color: $app-dark-grey;
+}
diff --git a/app/assets/stylesheets/shared/constants.scss b/app/assets/stylesheets/shared/constants.scss
@@ -4,13 +4,13 @@ $app-dark-grey: #515151;
 $app-grey: #F9F9F9;
 $app-green: #12d678;
 $app-purple: #DD5DEB;
-
-$app-pink: #FF4390;
-$app-light-pink: #FF8EBC;
-$app-dark-pink: #B21D5A;
-$app-yellow: #FFF05D;
 $app-light-yellow: #FFF69E;
-$app-blue: #22AFCC;
-$app-light-blue: #7ACFE0;
-$app-very-light-blue: #BDE7F0;
-$app-dark-blue: #269AB2;
+
+// Override bootstrap variables:
+$font-size-h1: 1.75rem;
+$font-size-h2: 1.5rem;
+$font-size-h3: 1.25rem;
+$font-size-h4: 1rem;
+$font-size-h5: .75rem;
+$font-size-h6: .5rem;
+