From 31a9f3f0a4ed53e6eb0ab067ea610d587071e5d2 Mon Sep 17 00:00:00 2001 From: Liam Morley Date: Thu, 21 Oct 2021 11:34:24 -0400 Subject: [PATCH] Adjust dashboard layout as per dev/design story --- app/assets/stylesheets/dashboard.scss | 35 +---- app/assets/stylesheets/sqm_application.scss | 4 +- app/presenters/category_presenter.rb | 4 - .../_quality_framework_indicators.erb | 58 +++---- .../dashboard/_subcategory_card.html.erb | 9 ++ app/views/dashboard/index.html.erb | 2 +- .../features/school_dashboard_feature_spec.rb | 145 +++++++++--------- spec/presenters/category_presenter_spec.rb | 9 -- 8 files changed, 113 insertions(+), 153 deletions(-) create mode 100644 app/views/dashboard/_subcategory_card.html.erb diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index dde4a82e..c052d888 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/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 { diff --git a/app/assets/stylesheets/sqm_application.scss b/app/assets/stylesheets/sqm_application.scss index ac8d9e3e..22bbedc5 100644 --- a/app/assets/stylesheets/sqm_application.scss +++ b/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; } diff --git a/app/presenters/category_presenter.rb b/app/presenters/category_presenter.rb index 03621049..f285a69f 100644 --- a/app/presenters/category_presenter.rb +++ b/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' diff --git a/app/views/dashboard/_quality_framework_indicators.erb b/app/views/dashboard/_quality_framework_indicators.erb index 080998dc..e3077426 100644 --- a/app/views/dashboard/_quality_framework_indicators.erb +++ b/app/views/dashboard/_quality_framework_indicators.erb @@ -1,40 +1,26 @@ -
+
+ <% category_presenters.each do |category_presenter| %> +
+ +
+
+

+ <%= link_to [@district, @school, category_presenter.category, { year: @academic_year.range }] do %> + <%= category_presenter.name %> + <% end %> +

+
-
- <% category_presenters.each do |category_presenter| %> -
+

<%= category_presenter.description %>

-
- +
+
+
+ <% category_presenter.subcategories.each do |subcategory| %> + <%= render partial: 'subcategory_card', locals: { presenter: subcategory.subcategory_card_presenter, subcategory: subcategory } %> + <% end %>
-

<%= category_presenter.name %>

- -

<%= category_presenter.description %>

- -
-
-
- <% category_presenter.subcategories.each do |subcategory | %> - <% presenter = subcategory.subcategory_card_presenter %> -
- - <% if presenter.display_icon? %> - - <% end %> - - -
<%= subcategory.name %>
-
- <% end %> -
-
-
- -
- <%= link_to [@district, @school, category_presenter.category, { year: @academic_year.range }], id: category_presenter.id, class: ["view-details", "mt-3"] do %>View Details<% end %> -
-
- <% end %> - -
+
+
+ <% end %> diff --git a/app/views/dashboard/_subcategory_card.html.erb b/app/views/dashboard/_subcategory_card.html.erb new file mode 100644 index 00000000..e11bd6c7 --- /dev/null +++ b/app/views/dashboard/_subcategory_card.html.erb @@ -0,0 +1,9 @@ +
+ + <% if presenter.display_icon? %> + + <% end %> + + +
<%= subcategory.name %>
+
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb index 694b4437..be99d50f 100644 --- a/app/views/dashboard/index.html.erb +++ b/app/views/dashboard/index.html.erb @@ -74,7 +74,7 @@
-

Distance from benchmark

+

Distance From Benchmark

<%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
diff --git a/spec/features/school_dashboard_feature_spec.rb b/spec/features/school_dashboard_feature_spec.rb index 96baa2ea..c382bdb3 100644 --- a/spec/features/school_dashboard_feature_spec.rb +++ b/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 diff --git a/spec/presenters/category_presenter_spec.rb b/spec/presenters/category_presenter_spec.rb index c470262c..5757f005 100644 --- a/spec/presenters/category_presenter_spec.rb +++ b/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