Merge pull request #991 - Bootstrap 4

Sprockets and Bootstrap 4 Rebase of #927
OSC · Mar 17, 2021 · 7cfc3f9 · 7cfc3f9
2 parents 297ca3b + 229be18
commit 7cfc3f9
Show file tree

Hide file tree

Showing 54 changed files with 575 additions and 371 deletions.
diff --git a/apps/dashboard/Gemfile b/apps/dashboard/Gemfile
@@ -49,17 +49,16 @@ gem 'thor', '0.19.1'
 
 # Extra third-party gems
 gem 'dotenv-rails', '~> 2.1'
-gem 'bootstrap-sass', '~> 3.4.1'
 gem 'font-awesome-sass', '5.12.0'
 gem 'redcarpet', '~> 3.3'
 gem 'browser', '~> 2.2'
 gem 'addressable', '~> 2.4'
-gem 'bootstrap_form', '~> 2.4'
+gem 'bootstrap_form', '~> 4.0'
 gem 'jquery-datatables-rails', '~> 3.4'
 gem 'data-confirm-modal', '~> 1.2'
 gem 'rails_12factor', group: :production
 gem 'mocha', '~> 1.1', group: :test
-gem 'autoprefixer-rails', '~> 8.4'
+gem 'autoprefixer-rails', '~> 9.1'
 gem 'dotiw'
 gem 'local_time', '~> 1.0.3'
 gem 'turbolinks', '~> 5.2.0'

diff --git a/apps/dashboard/Gemfile.lock b/apps/dashboard/Gemfile.lock
@@ -45,12 +45,11 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     arel (9.0.0)
-    autoprefixer-rails (8.6.5)
+    autoprefixer-rails (9.8.6.5)
       execjs
-    bootstrap-sass (3.4.1)
-      autoprefixer-rails (>= 5.2.1)
-      sassc (>= 2.0.0)
-    bootstrap_form (2.7.0)
+    bootstrap_form (4.5.0)
+      actionpack (>= 5.2)
+      activemodel (>= 5.2)
     browser (2.7.1)
     builder (3.2.4)
     byebug (11.1.3)
@@ -239,9 +238,8 @@ PLATFORMS
 
 DEPENDENCIES
   addressable (~> 2.4)
-  autoprefixer-rails (~> 8.4)
-  bootstrap-sass (~> 3.4.1)
-  bootstrap_form (~> 2.4)
+  autoprefixer-rails (~> 9.1)
+  bootstrap_form (~> 4.0)
   browser (~> 2.2)
   byebug
   climate_control (~> 0.2)

diff --git a/apps/dashboard/app/assets/javascripts/products.coffee b/apps/dashboard/app/assets/javascripts/products.coffee
@@ -15,7 +15,7 @@ jQuery ->
       target =$(@).data('target')
       header = "$ <code><strong>#{cmd}</strong></code>\n"
       $("#{id} .modal-title").html """
-        <i class="fa fa-spinner fa-spin pull-right" aria-hidden="true" id="#{id.substring(1)}Spinner"></i>
+        <i class="fa fa-spinner fa-spin float-right" aria-hidden="true" id="#{id.substring(1)}Spinner"></i>
         #{title}
       """
       $("#{id} .product-cli-body").html header
@@ -26,7 +26,7 @@ jQuery ->
           $("#{id} .product-cli-body").scrollTop $("#{id} .product-cli-body")[0].scrollHeight
       xhr.onloadend = ->
         $("#{id}Spinner").replaceWith """
-          <button class="close pull-right" data-dismiss="modal">&times;</button>
+          <button class="close float-right" data-dismiss="modal">&times;</button>
         """
         if @status != 200
           $("#{id} .product-cli-body").html "#{header}A fatal error has occurred"

diff --git a/apps/dashboard/app/assets/stylesheets/_breadcrumb.scss b/apps/dashboard/app/assets/stylesheets/_breadcrumb.scss
@@ -0,0 +1,10 @@
+
+.breadcrumb-item + .breadcrumb-item::before {
+  display: inline-block;
+  margin: 0.25em 1em 0 0;
+  transform: rotate(25deg);
+  border-right: 0.1em solid currentColor;
+  padding-right: 0.5em;
+  height: 0.8em;
+}
+
diff --git a/apps/dashboard/app/assets/stylesheets/_custom.scss.erb b/apps/dashboard/app/assets/stylesheets/_custom.scss.erb
@@ -0,0 +1,27 @@
+// Bootstrap custom CSS
+
+table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:before {
+  right: 1.25em !important;
+}
+
+.card {
+  a {
+    text-decoration: none !important;
+  }
+}
+
+.card-header h3 {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+// Shim for buttons that still use old Bootstrap 3 default button class.
+.btn-default {
+  color: #393939;
+  background-color: #f8f8f8;
+  border-color: #cbcbcb;
+}
+
+.btn-default:hover {
+  background-color: darken(#f8f8f8, 10%);
+}
diff --git a/apps/dashboard/app/assets/stylesheets/_variables.scss.erb b/apps/dashboard/app/assets/stylesheets/_variables.scss.erb
@@ -0,0 +1,47 @@
+// Place all Bootstrap 4 variable overrides in this file.
+// Bootstrap 4 SASS variables list: https://github.com/twbs/bootstrap/blob/v4.6.0/scss/_variables.scss
+
+// Miscellaneous
+$enable-responsive-font-sizes: "true";
+$enable-shadows: "true";
+
+// Colors
+$green: #639e0f;
+
+$body-color: #111827;
+
+$primary: #337ab7;
+$danger: #d9534f;
+$info: #5bc0de;
+
+$navbar-light-color: rgb(119, 119, 119);
+$navbar-light-disabled-color: rgb(119, 119, 119);
+$navbar-dark-brand-color: rgb(119, 119, 119);
+
+$navbar-dark-color: #fff;
+$navbar-dark-active-color: rgba(#fff, .75);
+$navbar-dark-brand-color: #fff;
+$navbar-dark-disabled-color: rgba(#fff, .75);
+
+// Grid layout
+$container-max-widths: (
+  xs: 0,
+  sm: 768px,
+  md: 920px,
+  lg: 1140px,
+  xl: 1260px,
+);
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 676px,
+  md: 850px,
+  lg: 1460px,
+  xl: 1500px
+);
+
+// Navigation bar link gutter spacing x-axis.
+$navbar-nav-link-padding-x: 0.75rem;
+
+// breadcrumbs are purely visual for accessibility
+$breadcrumb-divider: '';
diff --git a/apps/dashboard/app/assets/stylesheets/app_kit/_markdown.scss b/apps/dashboard/app/assets/stylesheets/app_kit/_markdown.scss
@@ -0,0 +1,81 @@
+.ood-appkit.markdown {
+  font-size: 16px;
+  line-height: 1.6;
+
+  h1 {
+    margin-right: 150px;
+    font-size: 30px;
+    font-weight: normal;
+    line-height: 1.1;
+  }
+
+  h2 {
+    padding-bottom: 0.3em;
+    margin-top: 1em;
+    margin-bottom: 16px;
+    font-size: 1.75em;
+    font-weight: bold;
+    line-height: 1.225;
+  }
+
+  h3 {
+    margin-top: 1em;
+    margin-bottom: 16px;
+    font-size: 1.5em;
+    font-weight: bold;
+    line-height: 1.43;
+  }
+
+  h4 {
+    margin-top: 1em;
+    margin-bottom: 16px;
+    font-size: 1.25em;
+    font-weight: bold;
+    line-height: 1.4;
+  }
+
+  img {
+    border: 0;
+    max-width: 100%;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  li>p {
+    margin-top: 16px;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: keep-all;
+
+    // .markdown p, .markdown table, ...
+    margin-top: 0;
+    margin-bottom: 16px;
+
+    tr {
+      border-top: 1px solid #ccc;
+    }
+
+    tr:nth-child(2n) td {
+      background-color: #f8f8f8;
+    }
+
+    th,
+    td {
+      padding: 6px 13px;
+      border: 1px solid #ddd;
+    }
+  }
+
+  pre {
+    code {
+      white-space: pre;
+    }
+  }
+}
diff --git a/apps/dashboard/app/assets/stylesheets/application.scss b/apps/dashboard/app/assets/stylesheets/application.scss
@@ -1,9 +1,17 @@
 // Load bootstrap/font-awesome sprockets first
-@import "bootstrap-sprockets";
+
+@import "variables";
+
+@import "bootstrap/scss/bootstrap";
+
+@import "custom";
+
 @import "font-awesome-sprockets";
-//@import "awesim";
 
-@import "ood_appkit/bootstrap-overrides";
+// Import Markdown styling
+@import "app_kit/markdown";
+
+//@import "awesim";
 
 //TODO:
 // overrides for navbar-default to get the same look and feel
@@ -23,17 +31,22 @@
 // $navbar-height: 20px;
 
 // styles to make a logo fill the navbar height if using a logo for the navbar title
-.navbar-brand.navbar-brand-logo{
+.navbar-brand.navbar-brand-logo {
   padding: 0px;
 }
-.navbar-brand.navbar-brand-logo img{
+
+a.navbar-brand.navbar-brand-logo {
+  height: 2em;
+}
+
+.navbar-brand.navbar-brand-logo img {
   height: 100%;
 }
 
 // for inverse, lets make the text slightliy darker so its
 // different than the links
-.navbar.navbar-inverse .navbar-text{
-     color: #ddd;
+.navbar.navbar-inverse .navbar-text {
+  color: #ddd;
 }
 
 // Add colors
@@ -47,26 +60,27 @@ $ood-blue: rgb(0, 95, 133);
 
 
 // Load up bootstrap/font-awesome style sheet
-@import "bootstrap";
 @import "font-awesome";
 
-@import "ood_appkit";
-
 // Load up dataTables bootstrap specific styles
-@import "dataTables/bootstrap/3/jquery.dataTables.bootstrap";
+@import "datatables.net-bs4/css/dataTables.bootstrap4";
 
 // Use sticky footer in body of layout
 // See: https://css-tricks.com/couple-takes-sticky-footer/
-html, body {
+
+html,
+body {
   height: 100%;
 }
+
 body {
   display: flex;
   flex-direction: column;
 
   div.content {
     flex: 1 0 auto;
   }
+
   .footer {
     flex-shrink: 0;
   }
@@ -86,9 +100,12 @@ pre.motd-monospaced {
 }
 
 // Add branded panels
+
+/**
 .panel-ood-blue {
   @include panel-variant($ood-blue, $ood-white, $ood-blue, $ood-blue);
 }
+
 .panel-ood-burgundy {
   @include panel-variant($ood-burgundy, $ood-white, $ood-burgundy, $ood-burgundy);
 }
@@ -100,8 +117,10 @@ pre.motd-monospaced {
 @media (min-width: $screen-md-min) and (max-width: $screen-md-max + 135) {
   @include responsive-invisibility('.hidden-md-nav');
 }
+**/
 
 // Your custom css styles below (must be manually added)
+
 @import "dashboard";
 @import "navbar";
 @import "apps";
@@ -112,3 +131,4 @@ pre.motd-monospaced {
 @import "insufficient_balance";
 @import "fa_shims";
 @import "fontawesome-iconpicker";
+@import "breadcrumb";
diff --git a/apps/dashboard/app/assets/stylesheets/apps.scss b/apps/dashboard/app/assets/stylesheets/apps.scss
@@ -67,13 +67,20 @@ tr.app {
   background-color: rgb(86, 44, 135);
 }
 
+.app-card {
+  @extend .card;
+  @extend .rounded;
+  @extend .p-2;
+  @extend .mb-3;
 
-a.thumbnail.app {
   color: black;
-  text-decoration: none;
 
-  &:hover {
+  // HACK: this happens to make the icons mostly fill space below & line up
+  height: 95%;
+
+  &:hover, &:focus {
     color: rgb(0, 95, 133);
+    border-color: rgb(0, 95, 133);
     text-decoration: none;
   }
 }
diff --git a/apps/dashboard/app/helpers/batch_connect/session_contexts_helper.rb b/apps/dashboard/app/helpers/batch_connect/session_contexts_helper.rb
@@ -27,7 +27,7 @@ def resolution_field(form, id, opts = {})
       concat form.label(id, opts[:label])
       concat form.hidden_field(id, id: "#{id}_field")
       concat(
-        content_tag(:div, class: "row") do
+        content_tag(:div, class: "container card-body row") do
           concat (
             content_tag(:div, class: "col-sm-6") do
               concat (