Update to Bootstrap 5, basic styling

Gemfile

@@ -37,7 +37,7 @@ gem 'jbuilder', '~> 2.5'
 
 gem 'haml'
 
-gem 'bootstrap', '~> 4.0.0.alpha6'
+gem 'bootstrap'
 
 gem 'jquery-ui-rails'
 gem 'friendly_id', '~> 5.1.0'

Gemfile.lock

@@ -47,10 +47,10 @@ GEM
       execjs (~> 2)
     bcrypt (3.1.16)
     bindex (0.8.1)
-    bootstrap (4.0.0)
+    bootstrap (5.1.0)
-      autoprefixer-rails (>= 6.0.3)
+      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 1.12.9, < 2)
+      popper_js (>= 2.9.3, < 3)
-      sass (>= 3.5.2)
+      sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.3)
     capybara (3.35.3)
@@ -134,7 +134,7 @@ GEM
       rack-protection
     orm_adapter (0.5.0)
     pg (1.2.3)
-    popper_js (1.16.0)
+    popper_js (2.9.3)
     public_suffix (4.0.6)
     puma (3.12.6)
     racc (1.5.2)
@@ -195,11 +195,6 @@ GEM
       rspec-mocks (~> 3.10)
       rspec-support (~> 3.10)
     rspec-support (3.10.2)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -258,7 +253,7 @@ PLATFORMS
 
 DEPENDENCIES
   activerecord-import
-  bootstrap (~> 4.0.0.alpha6)
+  bootstrap
   byebug
   capybara
   database_cleaner

app/assets/stylesheets/sqm_application.scss

@@ -1,4 +1,4 @@
-$spacer: 8px;
+$spacer: 0.5rem;
 $spacers: (
         0: 0,
         1: ($spacer * .25),
@@ -16,3 +16,8 @@ $spacers: (
 @import "borders";
 @import "flex";
 @import "dashboard";
+
+
+.height-56 {
+  height: 56px;
+}

app/controllers/browse_controller.rb

@@ -1,5 +1,6 @@
 class BrowseController < ApplicationController
   layout "sqm/application"
+  before_action :authenticate_district
 
   def show
     @category = CategoryPresenter.new(
@@ -11,10 +12,22 @@ class BrowseController < ApplicationController
 
   private
 
+  def authenticate_district
+    authenticate(district.name.downcase, "#{district.name.downcase}!")
+  end
+
+  def district
+    @district ||= District.find_by_slug district_slug
+  end
+
   def school
     @school ||= School.find_by_slug school_slug
   end
 
+  def district_slug
+    params[:district_id]
+  end
+
   def school_slug
     params[:school_id]
   end

app/controllers/dashboard_controller.rb

@@ -1,10 +1,10 @@
 class DashboardController < ApplicationController
   layout "sqm/application"
+  before_action :authenticate_district
 
   def index
     schools
     districts
-    authenticate(district.name.downcase, "#{district.name.downcase}!")
     @measure_graph_row_presenters = measure_ids
                                       .map { |measure_id| Measure.find_by_measure_id measure_id }
                                       .map(&method(:presenter_for_measure))
@@ -14,6 +14,10 @@ class DashboardController < ApplicationController
 
   private
 
+  def authenticate_district
+    authenticate(district.name.downcase, "#{district.name.downcase}!")
+  end
+
   def measure_ids
     Measure.all.map(&:measure_id)
   end

app/presenters/measure_graph_row_presenter.rb

@@ -24,9 +24,9 @@ class MeasureGraphRowPresenter
   def x_offset
     case zone.type
     when :ideal, :approval
-      "50%"
+      "60%"
     else
-      "#{((0.5 - bar_width_percentage) * 100).abs.round(2)}%"
+      "#{((0.6 - bar_width_percentage) * 100).abs.round(2)}%"
     end
   end
 
@@ -47,11 +47,11 @@ class MeasureGraphRowPresenter
 
   private
 
-  IDEAL_ZONE_WIDTH_PERCENTAGE = 0.5 / 2
+  IDEAL_ZONE_WIDTH_PERCENTAGE = 0.2
-  APPROVAL_ZONE_WIDTH_PERCENTAGE = 0.5 / 2
+  APPROVAL_ZONE_WIDTH_PERCENTAGE = 0.2
-  GROWTH_ZONE_WIDTH_PERCENTAGE = 0.5 / 3
+  GROWTH_ZONE_WIDTH_PERCENTAGE = 0.2
-  WATCH_ZONE_WIDTH_PERCENTAGE = 0.5 / 3
+  WATCH_ZONE_WIDTH_PERCENTAGE = 0.2
-  WARNING_ZONE_WIDTH_PERCENTAGE = 0.5 / 3
+  WARNING_ZONE_WIDTH_PERCENTAGE = 0.2
 
   def bar_width_percentage
     case zone.type

app/views/dashboard/_measure_bar_graph.erb

@@ -27,28 +27,26 @@
 
     <svg id="graph-background" x="25%" y="0" width="75%" height=<%= graph_background_height %>>
       <g id="scale-headings">
-        <text class="graph-header" x="8.335%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
+        <text class="graph-header" x="10%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Warning</text>
-        <text class="graph-header" x="25%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
+        <text class="graph-header" x="30%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Watch</text>
-        <text class="graph-header" x="41.665%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth</text>
+        <text class="graph-header" x="50%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Growth</text>
-        <text class="graph-header" x="62.5%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval</text>
+        <text class="graph-header" x="70%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Approval</text>
-        <text class="graph-header" x="87.5%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
+        <text class="graph-header" x="90%" y=<%= heading_gutter / 2 %> text-anchor="middle" dominant-baseline="middle">Ideal</text>
       </g>
 
       <g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
-        <rect id="warning-zone" class="fill-warning" x="0" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="warning-zone" class="fill-warning" x="0%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="watch-zone" class="fill-watch" x="16.67%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="watch-zone" class="fill-watch" x="20%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="growth-zone" class="fill-growth" x="33.33%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="growth-zone" class="fill-growth" x="40%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="approval-zone" class="fill-approval" x="50%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="approval-zone" class="fill-approval" x="60%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-        <rect id="ideal-zone" class="fill-ideal" x="75%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
+        <rect id="ideal-zone" class="fill-ideal" x="80%" y="0" width="20%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
-
-        <rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black"/>
       </g>
     </svg>
 
     <g id="measure-rows">
       <svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
         <%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
-          <text class="font-cabin weight-600" x="25%" dx=<%= -1 * label_padding_right %> y=<%= index * measure_row_height + measure_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.measure_name %></text>
+          <text class="font-cabin" x="25%" dx=<%= -1 * label_padding_right %> y=<%= index * measure_row_height + measure_row_height / 2 %> text-anchor="end" dominant-baseline="middle"><%= presenter.measure_name %></text>
         <% end %>
       </svg>
 
@@ -59,8 +57,16 @@
       </svg>
     </g>
 
+    <svg id="key-benchmark" x="25%" y="0" width="75%" height="<%= graph_background_height %>">
+      <g transform="translate(0, <%= heading_gutter %>)">
+        <rect id="key-benchmark" x="60%" transform="translate(-1, 0)" y="0" width="4" height="100%" fill="black"/>
+      </g>
+    </svg>
+
+    <svg id="key-benchmark" x="25%" y="0" width="75%">
       <g id="legend">
-      <text class="graph-footer" x="58.33%" y="<%= graph_background_height + (footer_gutter / 2) %>">Benchmark</text>
+        <text class="graph-footer" x="60%" y="<%= graph_background_height + (footer_gutter / 2) %>" text-anchor="middle">Benchmark</text>
       </g>
     </svg>
+  </svg>
 </div>

app/views/dashboard/index.html.erb

@@ -1,7 +1,3 @@
-<a href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/browse/teachers-and-leadership?year=2020-21">Browse</a>
-
-<h1><%= @school.name %></h1>
-
 <div class="fdr fjb fac">
   <h2 class="h1">Areas Of Interest</h2>
   <div class="fdr">

app/views/layouts/sqm/_header.html.erb

@@ -1,10 +1,7 @@
-<header class="row">
+<header class="row py-4 align-items-center">
-  <div class="title col-12">
+  <div class="col">
-    <div class="float-right">
+      <%= link_to image_tag('logo.png', class: 'height-56'), root_path %>
-      <%= link_to("Frequently Asked Questions", "/MCIEA-Data-Dashboard-FAQ.pdf", class: 'faq', target: '_blank') %>
+      <a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/dashboard?year=2020-21">Dashboard</a>
-    </div>
+      <a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/browse/teachers-and-leadership?year=2020-21">Browse</a>
-    <h2 style="clear: right; text-align: center; margin-bottom: 30px;">
-      <%= link_to(image_tag('logo.png'), root_path) %>
-    </h2>
   </div>
 </header>

app/views/layouts/sqm/application.html.erb

@@ -25,10 +25,16 @@
 </head>
 
 <body>
+
+<div class="container-fluid">
+  <div class="container">
+    <%= render partial: 'layouts/sqm/header' %>
+  </div>
+</div>
+
   <div class="container">
   <div class="row">
     <div class="col-12">
-      <%= render partial: 'layouts/sqm/header' %>
 
       <%= yield %>
     </div>

spec/features/school_dashboard_feature_spec.rb

@@ -68,17 +68,17 @@ feature 'School dashboard', type: feature do
 
     expect(page).to have_text('Professional Qualifications')
     professional_qualifications_row = measure_row_bars.find { |item| item['data-for-measure-id'] == '1A-i' }
-    expect(professional_qualifications_row['width']).to eq '10.33%'
+    expect(professional_qualifications_row['width']).to eq '8.26%'
-    expect(professional_qualifications_row['x']).to eq '50%'
+    expect(professional_qualifications_row['x']).to eq '60%'
 
     expect(page).to have_text('Student Physical Safety')
     student_physical_safety_row = measure_row_bars.find { |item| item['data-for-measure-id'] == '2A-i' }
-    expect(student_physical_safety_row['width']).to eq '50.0%'
+    expect(student_physical_safety_row['width']).to eq '40.0%'
-    expect(student_physical_safety_row['x']).to eq '50%'
+    expect(student_physical_safety_row['x']).to eq '60%'
 
     expect(page).to have_text('Problem Solving Emphasis')
     problem_solving_emphasis_row = measure_row_bars.find { |item| item['data-for-measure-id'] == '4C-i' }
-    expect(problem_solving_emphasis_row['width']).to eq '50.0%'
+    expect(problem_solving_emphasis_row['width']).to eq '60.0%'
     expect(problem_solving_emphasis_row['x']).to eq '0.0%'
 
     measure_row_bar_with_no_responses = measure_row_bars.find { |item| item['data-for-measure-id'] == '3A-i' }
@@ -115,8 +115,6 @@ feature 'School dashboard', type: feature do
     page.driver.browser.basic_authorize(username, password)
     visit "/districts/#{district.slug}/schools/#{school.slug}/dashboard?year=#{ay_2020_21.range}"
 
-    assert_selector "h1", text: school.name
-
     expected_num_of_schools = district.schools.count
     expect(page.all('.school-options').count).to eq expected_num_of_schools
     expect(page.all('.school-options[selected]').count).to eq 1

spec/presenters/measure_graph_row_presenter_spec.rb

@@ -37,11 +37,11 @@ RSpec.describe MeasureGraphRowPresenter do
     end
 
     it 'returns a bar width equal to the approval zone width plus the proportionate ideal zone width' do
-      expect(presenter.bar_width).to eq "37.5%"
+      expect(presenter.bar_width).to eq "30.0%"
     end
 
-    it 'returns an x-offset of 0' do
+    it 'returns an x-offset of 60%' do
-      expect(presenter.x_offset).to eq "50%"
+      expect(presenter.x_offset).to eq "60%"
     end
   end
 
@@ -55,11 +55,11 @@ RSpec.describe MeasureGraphRowPresenter do
     end
 
     it 'returns a bar width equal to the proportionate approval zone width' do
-      expect(presenter.bar_width).to eq "12.5%"
+      expect(presenter.bar_width).to eq "10.0%"
     end
 
-    it 'returns an x-offset of 0' do
+    it 'returns an x-offset of 60%' do
-      expect(presenter.x_offset).to eq "50%"
+      expect(presenter.x_offset).to eq "60%"
     end
   end
 
@@ -73,12 +73,12 @@ RSpec.describe MeasureGraphRowPresenter do
     end
 
     it 'returns a bar width equal to the proportionate growth zone width' do
-      expect(presenter.bar_width).to eq "13.33%"
+      expect(presenter.bar_width).to eq "16.0%"
     end
 
     context 'in order to achieve the visual effect' do
-      it 'returns an x-offset equal to 50% minus the bar width' do
+      it 'returns an x-offset equal to 60% minus the bar width' do
-        expect(presenter.x_offset).to eq "36.67%"
+        expect(presenter.x_offset).to eq "44.0%"
       end
     end
   end
@@ -93,12 +93,12 @@ RSpec.describe MeasureGraphRowPresenter do
     end
 
     it 'returns a bar width equal to the proportionate watch zone width plus the growth zone width' do
-      expect(presenter.bar_width).to eq "33.33%"
+      expect(presenter.bar_width).to eq "40.0%"
     end
 
     context 'in order to achieve the visual effect' do
-      it 'returns an x-offset equal to 50% minus the bar width' do
+      it 'returns an x-offset equal to 60% minus the bar width' do
-        expect(presenter.x_offset).to eq "16.67%"
+        expect(presenter.x_offset).to eq "20.0%"
       end
     end
   end
@@ -113,11 +113,11 @@ RSpec.describe MeasureGraphRowPresenter do
     end
 
     it 'returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths' do
-      expect(presenter.bar_width).to eq "50.0%"
+      expect(presenter.bar_width).to eq "60.0%"
     end
 
     context 'in order to achieve the visual effect' do
-      it 'returns an x-offset equal to 50% minus the bar width' do
+      it 'returns an x-offset equal to 60% minus the bar width' do
         expect(presenter.x_offset).to eq "0.0%"
       end
     end