Adding grid with gutters (#1004)

* WIP grid with gutters

* modifying the grid system to have a max viewport width of 1440px and min gutters of 120px

* first pass at patching errors

* rubocop 🚨

* more bug fixing

* fixing flash alert bug

* updating viewport and gutter width

---------

Co-authored-by: HyppoliteJ <jh6441@princeton.edu>
Co-authored-by: Jaymee Hyppolite <54775395+JaymeeH@users.noreply.github.com>

app/assets/stylesheets/_header.scss

@@ -18,4 +18,22 @@
         padding-left: 10px;
         margin-left: 10px;
     }
-}
+}
+.container-fluid {
+    max-width: 1200px;
+    margin: 0 auto;
+    // border: 1px solid #FF0000;
+  }
+
+  .row {
+    margin-bottom: 4px;
+  }
+
+  .col {
+    width: 82px;
+  }
+
+  .gutter {
+    width: 20px;
+    // border: 1px solid #00FF00;
+  }

app/views/layouts/application.html.erb

@@ -27,7 +27,7 @@
 
     <% if Rails.env.development? || Rails.env.staging? %>
       <%= render 'shared/plausible_dev_staging' %>
-    <% elsif Rails.env.production? %> 
+    <% elsif Rails.env.production? %>
       <%= render 'shared/plausible' %>
     <% end %>
 
@@ -38,18 +38,18 @@
     <%= render partial: 'shared/banner' %>
     <%= render partial: 'shared/header' %>
     <%= render partial: 'shared/emulator' %>
-    <div class="container">
-      <% if flash[:alert] %>
-        <div class="row">
-          <div class="col">
-            <div class="alert alert-warning" role="alert" ><%= flash[:alert] %></div>
-          </div>
-        </div>
-      <% end %>
-      <% if flash[:notice] %>
+
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-1 gutter"></div>
+
+    <div class="col-10 center-column">
+      <% if flash[:notice] or flash[:alert] %>
         <div class="row">
           <div class="col">
             <div class="alert alert-primary" role="alert" ><%= flash[:notice] %></div>
+            <div class="alert alert-warning" role="alert"><%= flash[:alert] %></div>
           </div>
         </div>
       <% end %>
@@ -59,6 +59,11 @@
         </div>
       </div>
     </div>
+
+    <div class="col-1 gutter"></div>
+  </div>
+</div>
+
     <%= render partial: 'shared/footer' %>
   </body>
 </html>

docs/mediaflux_manual_installation.md

@@ -2,7 +2,7 @@
 Notes from first attempt at manual mediaflux installation by Francis Kayiwa, Robert-Anthony Lee-Faison, and Bess Sadler
 
 ### 1. Add the box to active directory
-Ask Francis or Alicia how to do this. 
+Ask Francis or Alicia how to do this.
 We had to re-name the machines to mflux-staging and mflux-ci to make the names short enough to fit into active directory (string length limit)
 
 Note that our systems occasionally lose their bind to AD, and this is a known issue. Francis is working on a solution. The workaround right now is to go to AD, delete the object, re-add it, and re-run the ansible playbook.
@@ -15,25 +15,25 @@ Note that when we re-build these boxes we need to keep the mac address the same,
 
 Steps to install on mflux-staging
 
-`dnf search java | grep 1.8` 
+`dnf search java | grep 1.8`
 `sudo dnf install java-1.8.0-openjdk`
 
 ### 3. Francis registered a lib-mflux service acccount
-This will be used to bind Mediaflux servers to active directory. 
+This will be used to bind Mediaflux servers to active directory.
 
 Server names:
 * mflux-staging
 * mflux-ci
 
 ### 4. Install Java
-Per notes from Robert Knight, Mediaflux production is running Java 1.8.0.412.b08, release 2.el8.  
+Per notes from Robert Knight, Mediaflux production is running Java 1.8.0.412.b08, release 2.el8.
 
 `sudo dnf install java-1.8.0-openjdk`
 
 ### 4. get the installer
 ```unix
 $ sudo dnf install wget
-$ wget https://www.arcitecta.com/software/mf/4.16.047/mflux-dev_4.16.047_jvm_1.8.jar
+$ wget https://www.arcitecta.com/software/mf/4.16.071/mflux-dev_4.16.071_jvm_1.8.jar
 $ sudo java -jar mflux-dev_jvm_1.8.jar nogui
 -> accept
 -> /opt/mediaflux
@@ -51,7 +51,7 @@ We used default config for the  database.
 
 We copied Robert K's systemd file to /etc/systemd/system/mediaflux.service
 
-Francis added a user and a group called mediaflux  
+Francis added a user and a group called mediaflux
 
 ```
 $ sudo useradd -r mediaflux
@@ -65,5 +65,5 @@ sudo systemctl enable mediaflux
 sudo systemctl start mediaflux
 ```
 
-Next: open port 80 
+Next: open port 80
 Seems to be running, but can't reach it.

spec/controllers/mediaflux_info_controller_spec.rb

@@ -5,6 +5,7 @@
   let(:user) { FactoryBot.create :user }
   let(:docker_response) { "{\"vendor\":\"Arcitecta Pty. Ltd.\",\"version\":\"4.16.071\"}" }
   let(:ansible_response) { "{\"vendor\":\"Arcitecta Pty. Ltd.\",\"version\":\"4.16.047\"}" }
+
   before do
     sign_in user
   end