Move dropdowns into header view

app/assets/stylesheets/colors.scss

@@ -25,11 +25,19 @@ $ideal: #C0FF73;
   color: $black;
 }
 
-.bg-beige {
+.color-white {
+  color: $white;
+}
+
+.bg-color-beige {
   background-color: $beige;
 }
 
-.bg-white {
+.bg-color-blue {
+  background-color: $blue;
+}
+
+.bg-color-white {
   background-color: $white;
 }
 

app/controllers/browse_controller.rb

@@ -1,6 +1,4 @@
-class BrowseController < ApplicationController
+class BrowseController < SqmApplicationController
-  layout "sqm/application"
-  before_action :authenticate_district
 
   def show
     @category = CategoryPresenter.new(
@@ -10,29 +8,4 @@ class BrowseController < ApplicationController
     )
   end
 
-  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
-
-  def academic_year
-    @academic_year ||= AcademicYear.find_by_range params[:year]
-  end
 end

app/controllers/dashboard_controller.rb

@@ -1,11 +1,7 @@
-class DashboardController < ApplicationController
+class DashboardController < SqmApplicationController
-  layout "sqm/application"
-  before_action :authenticate_district
 
   def index
-    schools
+    @presenters = measure_ids
-    districts
-    @measure_graph_row_presenters = measure_ids
                     .map { |measure_id| Measure.find_by_measure_id measure_id }
                     .map(&method(:presenter_for_measure))
                     .sort
@@ -14,10 +10,6 @@ class DashboardController < ApplicationController
 
   private
 
-  def authenticate_district
-    authenticate(district.name.downcase, "#{district.name.downcase}!")
-  end
-
   def measure_ids
     Measure.all.map(&:measure_id)
   end
@@ -33,33 +25,4 @@ class DashboardController < ApplicationController
     )
   end
 
-  def school
-    @school = schools.first if params[:school_id] == "first"
-    @school ||= School.find_by_slug school_slug
-  end
-
-  def schools
-    @schools = School.where(district: district).sort_by(&:name)
-  end
-
-  def district
-    @district ||= District.find_by_slug district_slug
-  end
-
-  def districts
-    @districts = District.all.sort_by(&:name)
-  end
-
-  def district_slug
-    params[:district_id]
-  end
-
-  def school_slug
-    params[:school_id]
-  end
-
-  def academic_year
-    @academic_year ||= AcademicYear.find_by_range params[:year]
-  end
-
 end

app/controllers/sqm_application_controller.rb

@@ -0,0 +1,44 @@
+class SqmApplicationController < ActionController::Base
+  protect_from_forgery with: :exception, prepend: true
+  layout "sqm/application"
+  before_action :authenticate_district
+  before_action :set_schools_and_districts
+
+  private
+
+  attr_reader :academic_year
+
+  def authenticate_district
+    authenticate(district.name.downcase, "#{district.name.downcase}!")
+  end
+
+  def set_schools_and_districts
+    @schools = School.where(district: district).sort_by(&:name)
+    @districts = District.all.sort_by(&:name)
+    @academic_year ||= AcademicYear.find_by_range params[:year]
+  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
+
+  def authenticate(username, password)
+    return true if username == "boston"
+    authenticate_or_request_with_http_basic do |u, p|
+      u == username && p == password
+    end
+  end
+
+end

app/views/dashboard/_variance_graph.erb

@@ -1,4 +1,4 @@
-<div class="bg-white p-4 border-radius-8">
+<div class="bg-color-white p-4 border-radius-8">
 
   <svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
 

app/views/dashboard/index.html.erb

@@ -1,35 +1,14 @@
-<div class="fdr fjb fac">
+<% content_for :navigation do %>
-  <h2 class="h1">Areas Of Interest</h2>
+  <h2 class="h1 color-white">Areas Of Interest</h2>
-  <div class="fdr">
-    <select class="ml-3 custom-select-lg" name="academic-year">
-      <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
-    </select>
-
-    <select id="select-district" class="ml-3 custom-select-lg" name="district">
-      <% @districts.each do |district| %>
-        <option  class="district-options" value="<%= district.slug %>" <%= @district.slug == district.slug ? "selected" : nil %>>
-          <%= district.name %>
-        </option>
-      <% end %>
-    </select>
-
-    <select id="select-school" class="ml-3 custom-select-lg" name="school">
-      <% @schools.each do |school| %>
-        <option class="school-options" value="<%= school.slug %>" <%= @school.slug == school.slug ? "selected" : nil %> >
-          <%= school.name %>
-        </option>
 <% end %>
-    </select>
-  </div>
-</div>
 
-<div class="bg-beige mt-4 p-5">
+<div class="bg-color-beige mt-4 p-5">
 
   <div>
     <h2 class="h1 color-red">Distance from benchmark</h2>
     <p class="body-large">This graph shows how much a score is above or below the benchmark of any given scale.</p>
   </div>
 
-  <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters } %>
+  <%= render partial: "variance_graph", locals: { presenters: @presenters } %>
 
 </div>

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

@@ -1,7 +1,47 @@
-<header class="row py-4 align-items-center">
+<header>
+  <div class="container">
+    <div class="row py-4 justify-content-between align-items-center">
+      <div class="col d-flex justify-content-start align-items-center">
+        <p class="me-6"><%= link_to image_tag('logo.png', class: 'height-56'), root_path %></p>
+        <p class="me-4"><a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/dashboard?year=2020-21">Dashboard</a></p>
+        <p><a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/browse/teachers-and-leadership?year=2020-21">Browse</a></p>
+      </div>
+
+      <div class="col d-flex justify-content-end">
+        <select id="select-district" class="form-select" name="district">
+          <% @districts.each do |district| %>
+            <option class="district-options" value="<%= district.slug %>" <%= @district.slug == district.slug ? "selected" : nil %>>
+              <%= district.name %>
+            </option>
+          <% end %>
+        </select>
+
+        <select id="select-school" class="ms-3 form-select" name="school">
+          <% @schools.each do |school| %>
+            <option class="school-options" value="<%= school.slug %>" <%= @school.slug == school.slug ? "selected" : nil %> >
+              <%= school.name %>
+            </option>
+          <% end %>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-color-blue">
+    <div class="container">
+      <div class="row py-4 justify-content-between align-items-center">
         <div class="col">
-      <%= link_to image_tag('logo.png', class: 'height-56'), root_path %>
+          <% if content_for?(:navigation) %>
-      <a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/dashboard?year=2020-21">Dashboard</a>
+            <%= yield(:navigation) %>
-      <a class="h3" href="/districts/<%= @district.slug %>/schools/<%= @school.slug %>/browse/teachers-and-leadership?year=2020-21">Browse</a>
+          <% end %>
+        </div>
+
+        <div class="col-2">
+          <select class="form-select" name="academic-year">
+            <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
+          </select>
+        </div>
+      </div>
+    </div>
   </div>
 </header>

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

@@ -27,15 +27,12 @@
 <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">
-
       <%= yield %>
     </div>
   </div>