Adjust dashboard layout as per dev/design story

app/assets/stylesheets/dashboard.scss

@@ -1,4 +1,5 @@
 @import 'bootstrap';
+@import 'bootstrap-overrides';
 @import 'colors';
 @import 'fonts';
 @import 'borders';
@@ -21,33 +22,6 @@
   @extend .border-radius-8;
 }
 
-.category-card {
-  flex-basis: 20%;
-  height: 600px;
-}
-
-.category-card__title {
-  height: 9%;
-}
-
-.category-card__description {
-  height: 44%;
-  @extend .font-cabin;
-  @extend .weight-400;
-}
-
-.category-card__button {
-  height: 10%;
-}
-
-.category-card__icon {
-  height: 7%;
-}
-
-.category-card__subcategory {
-  height: 30%;
-}
-
 .subcategory-card {
   border: 1px solid #CECECE;
   background-color: $gray-3;
@@ -85,7 +59,12 @@
 }
 
 .school-quality-frameworks {
-  background-color: $white;
+  display: grid;
+  row-gap: map-get($spacers, 4);
+  column-gap: map-get($spacers, 5);
+  grid-auto-flow: column;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows:  repeat(4, max-content);
 }
 
 .zone-header {

app/assets/stylesheets/sqm_application.scss

@@ -17,7 +17,7 @@
 .card {
   @extend .bg-color-white;
   @extend .mb-5;
-  @extend .p-5;
+  @extend .p-7;
   border-radius: 8px;
   box-shadow: 0 0 6px rgba($black, 0.25);
 }
@@ -40,7 +40,7 @@
 }
 
 .gauge-title {
-  margin-top: -1.5em; 
+  margin-top: -1.5em;
   margin-bottom: 0;
 }
 

app/presenters/category_presenter.rb

@@ -15,10 +15,6 @@ class CategoryPresenter
     @category.description
   end
 
-  def id
-    @category.slug
-  end
-
   def icon
     case name
     when 'Teachers & Leadership'

app/views/dashboard/_quality_framework_indicators.erb

@@ -1,40 +1,26 @@
-<div class="school-quality-frameworks">
+<div class="mt-5 school-quality-frameworks">
+  <% category_presenters.each do |category_presenter| %>
+    <div class="text-center">
+      <i class="fa fa-<%= category_presenter.icon %> fa-2x color-gray-2"></i>
+    </div>
+    <div class="text-center">
+      <h3 class="sub-header-3">
+        <%= link_to [@district, @school, category_presenter.category, { year: @academic_year.range }] do %>
+          <%= category_presenter.name %>
+        <% end %>
+      </h3>
+    </div>
 
-  <div class="row mt-5">
-    <% category_presenters.each do |category_presenter| %>
-      <section id="<%= category_presenter.id %>" class="category-card column d-flex flex-column justify-space-between align-items-center">
+    <p class="body-small text-center"><%= category_presenter.description %></p>
 
-        <div class="category-card__icon">
-          <i class="fa fa-<%= category_presenter.icon %> fa-2x color-gray-2"></i>
+    <div>
+      <div class="subcategory-card border-radius-8">
+        <div class="subcategory-card__benchmark-list">
+          <% category_presenter.subcategories.each do |subcategory| %>
+            <%= render partial: 'subcategory_card', locals: { presenter: subcategory.subcategory_card_presenter, subcategory: subcategory } %>
+          <% end %>
         </div>
-        <div class="category-card__title text-center"><h3 class="sub-header-3"><%= category_presenter.name %></h3></div>
-
-        <p class="category-card__description text-center"><%= category_presenter.description %></p>
-
-        <div class="category-card__subcategory">
-          <div class="subcategory-card border-radius-8">
-            <div class="subcategory-card__benchmark-list">
-              <% category_presenter.subcategories.each do |subcategory | %>
-                <% presenter = subcategory.subcategory_card_presenter %>
-                <div class="subcategory-card__benchmark-item">
-                  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-                    <% if presenter.display_icon? %>
-                      <use class="fill-<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
-                    <% end %>
-                  </svg>
-
-                  <div class="subcategory-card__name"><%= subcategory.name %></div>
-                </div>
-              <% end %>
-            </div>
-          </div>
-        </div>
-
-        <div class="category-card__button text-center">
-          <%= link_to [@district, @school, category_presenter.category, { year: @academic_year.range }], id: category_presenter.id, class: ["view-details", "mt-3"] do %>View Details<% end %>
-        </div>
-      </section>
-    <% end %>
-
-  </div>
+      </div>
+    </div>
+  <% end %>
 </div>

app/views/dashboard/_subcategory_card.html.erb

@@ -0,0 +1,9 @@
+<div class="subcategory-card__benchmark-item">
+  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+    <% if presenter.display_icon? %>
+      <use class="fill-<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
+    <% end %>
+  </svg>
+
+  <div class="subcategory-card__name"><%= subcategory.name %></div>
+</div>

app/views/dashboard/index.html.erb

@@ -74,7 +74,7 @@
 </div>
 
 <div class="card">
-  <h2 class="sub-header-2">Distance from benchmark</h2>
+  <h2 class="sub-header-2">Distance From Benchmark</h2>
 
   <%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
 </div>

spec/features/school_dashboard_feature_spec.rb

@@ -1,76 +1,4 @@
 require 'rails_helper'
-# include Rails.application.routes.url_helpers
-
-def district_admin_sees_professional_qualifications
-  expect(page).to have_text('Professional Qualifications')
-  expect(page).to have_css("[data-for-measure-id='1A-i'][width='8.26%'][x='60%']")
-end
-
-def district_admin_sees_student_physical_safety
-  expect(page).to have_text('Student Physical Safety')
-  expect(page).to have_css("[data-for-measure-id='2A-i'][width='40.0%'][x='60%']")
-end
-
-def district_admin_sees_problem_solving_emphasis
-  expect(page).to have_text('Problem Solving Emphasis')
-  expect(page).to have_css("[data-for-measure-id='4C-i'][width='60.0%'][x='0.0%']")
-end
-
-def go_to_school_dashboard_from_welcome_page(district, school)
-  select district.name, from: 'district-dropdown'
-  select school.name, from: 'school-dropdown'
-  click_on 'Go'
-end
-
-def go_to_different_school_in_same_district(school)
-  select school.name, from: 'select-school'
-end
-
-def go_to_different_district(district)
-  select district.name, from: 'select-district'
-end
-
-def district_admin_sees_schools_change
-  expected_path = "/districts/#{school_in_same_district.district.slug}/schools/#{school_in_same_district.slug}/dashboard?year=2020-21"
-  expect(page).to have_current_path(expected_path)
-end
-
-def district_admin_sees_district_change
-  expected_path = "/districts/#{different_district.slug}/schools/#{different_district.schools.alphabetic.first.slug}/dashboard?year=2020-21"
-  expect(page).to have_current_path(expected_path)
-end
-
-def district_admin_sees_measures_in_correct_order
-  def index_of_row_for(measure_id:)
-    expect(page).to have_css("[data-for-measure-id='#{measure_id}']")
-    page.all('rect.measure-row-bar').find_index { |item| item['data-for-measure-id'] == "#{measure_id}" }
-  end
-
-  expect(index_of_row_for(measure_id: '2A-i')).to be < index_of_row_for(measure_id: '1A-i')
-  expect(index_of_row_for(measure_id: '1A-i')).to be < index_of_row_for(measure_id: '4C-i')
-end
-
-def district_admin_sees_dashboard_content
-  expect(page).to have_select('academic-year', selected: '2020 – 2021')
-  expect(page).to have_select('district', selected: 'Winchester')
-  expect(page).to have_select('school', selected: 'Winchester High School')
-  expect(page).to have_text(school.name)
-
-  district_admin_sees_professional_qualifications
-  district_admin_sees_student_physical_safety
-  district_admin_sees_problem_solving_emphasis
-
-  expect(page).to have_css("[data-for-measure-id='3A-i'][width='0.0%']")
-
-  page.assert_selector('.measure-row-bar', count: Measure.count)
-
-  district_admin_sees_measures_in_correct_order
-end
-
-def district_admin_sees_browse_content
-  expect(page).to have_text('Teachers & Leadership')
-  expect(page).to have_text('Approval')
-end
 
 feature 'School dashboard', type: feature do
   let(:district) { District.find_by_slug 'winchester' }
@@ -152,7 +80,7 @@ feature 'School dashboard', type: feature do
 
     district_admin_sees_dashboard_content
 
-    click_on 'View Details', match: :first
+    click_on 'Teachers & Leadership'
     district_admin_sees_browse_content
 
     click_on 'Dashboard'
@@ -231,3 +159,74 @@ feature 'School dashboard', type: feature do
     end
   end
 end
+
+def district_admin_sees_professional_qualifications
+  expect(page).to have_text('Professional Qualifications')
+  expect(page).to have_css("[data-for-measure-id='1A-i'][width='8.26%'][x='60%']")
+end
+
+def district_admin_sees_student_physical_safety
+  expect(page).to have_text('Student Physical Safety')
+  expect(page).to have_css("[data-for-measure-id='2A-i'][width='40.0%'][x='60%']")
+end
+
+def district_admin_sees_problem_solving_emphasis
+  expect(page).to have_text('Problem Solving Emphasis')
+  expect(page).to have_css("[data-for-measure-id='4C-i'][width='60.0%'][x='0.0%']")
+end
+
+def go_to_school_dashboard_from_welcome_page(district, school)
+  select district.name, from: 'district-dropdown'
+  select school.name, from: 'school-dropdown'
+  click_on 'Go'
+end
+
+def go_to_different_school_in_same_district(school)
+  select school.name, from: 'select-school'
+end
+
+def go_to_different_district(district)
+  select district.name, from: 'select-district'
+end
+
+def district_admin_sees_schools_change
+  expected_path = "/districts/#{school_in_same_district.district.slug}/schools/#{school_in_same_district.slug}/dashboard?year=2020-21"
+  expect(page).to have_current_path(expected_path)
+end
+
+def district_admin_sees_district_change
+  expected_path = "/districts/#{different_district.slug}/schools/#{different_district.schools.alphabetic.first.slug}/dashboard?year=2020-21"
+  expect(page).to have_current_path(expected_path)
+end
+
+def district_admin_sees_measures_in_correct_order
+  def index_of_row_for(measure_id:)
+    expect(page).to have_css("[data-for-measure-id='#{measure_id}']")
+    page.all('rect.measure-row-bar').find_index { |item| item['data-for-measure-id'] == "#{measure_id}" }
+  end
+
+  expect(index_of_row_for(measure_id: '2A-i')).to be < index_of_row_for(measure_id: '1A-i')
+  expect(index_of_row_for(measure_id: '1A-i')).to be < index_of_row_for(measure_id: '4C-i')
+end
+
+def district_admin_sees_dashboard_content
+  expect(page).to have_select('academic-year', selected: '2020 – 2021')
+  expect(page).to have_select('district', selected: 'Winchester')
+  expect(page).to have_select('school', selected: 'Winchester High School')
+  expect(page).to have_text(school.name)
+
+  district_admin_sees_professional_qualifications
+  district_admin_sees_student_physical_safety
+  district_admin_sees_problem_solving_emphasis
+
+  expect(page).to have_css("[data-for-measure-id='3A-i'][width='0.0%']")
+
+  page.assert_selector('.measure-row-bar', count: Measure.count)
+
+  district_admin_sees_measures_in_correct_order
+end
+
+def district_admin_sees_browse_content
+  expect(page).to have_text('Teachers & Leadership')
+  expect(page).to have_text('Approval')
+end

spec/presenters/category_presenter_spec.rb

@@ -50,13 +50,4 @@ describe CategoryPresenter do
     expect(academic_learning_presenter.icon).to eq 'graduation-cap'
     expect(community_and_wellbeing_presenter.icon).to eq 'heart'
   end
-
-  it 'returns the correct id for the given category' do
-    expect(teachers_and_leadership_presenter.id).to eq 'teachers-and-leadership'
-    expect(school_culture_presenter.id).to eq 'school-culture'
-    expect(resources_presenter.id).to eq 'resources'
-    expect(academic_learning_presenter.id).to eq 'academic-learning'
-    expect(community_and_wellbeing_presenter.id).to eq 'community-and-wellbeing'
-  end
-
 end