From 4fafe2cb500c09f63a655d4984390e6e02b5fda5 Mon Sep 17 00:00:00 2001 From: Liam Morley Date: Wed, 27 Oct 2021 15:16:41 -0400 Subject: [PATCH] Display popover on harvey balls not in a zone This wraps bootstrap styles in `sqm_bootstrap` which can now selectively import specific desired pieces of bootstrap styling --- .../stylesheets/bootstrap-overrides.scss | 5 ++ app/assets/stylesheets/dashboard.scss | 16 +++--- app/assets/stylesheets/sqm_application.scss | 3 +- app/assets/stylesheets/sqm_bootstrap.scss | 52 +++++++++++++++++++ app/javascript/application.js | 5 +- app/javascript/dashboard.js | 10 ++++ app/presenters/category_presenter.rb | 2 - app/presenters/subcategory_card_presenter.rb | 8 ++- app/presenters/subcategory_presenter.rb | 2 +- .../_quality_framework_indicators.erb | 10 ++-- .../dashboard/_subcategory_card.html.erb | 6 +-- .../subcategory_card_presenter_spec.rb | 6 ++- 12 files changed, 99 insertions(+), 26 deletions(-) create mode 100644 app/assets/stylesheets/sqm_bootstrap.scss diff --git a/app/assets/stylesheets/bootstrap-overrides.scss b/app/assets/stylesheets/bootstrap-overrides.scss index 94c7f07c..08a6761a 100644 --- a/app/assets/stylesheets/bootstrap-overrides.scss +++ b/app/assets/stylesheets/bootstrap-overrides.scss @@ -33,3 +33,8 @@ $input-btn-focus-color-opacity: 0.35; $accordion-border-radius: 8px; $accordion-button-active-bg: $gray-3; + +$popover-border-color: transparent; +$popover-border-radius: 4px; +$popover-body-padding-x: map-get($spacers, 4); +$popover-body-padding-y: map-get($spacers, 4); diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index eb249ca9..dfd1500b 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -31,10 +31,6 @@ font-size: 14px; } -.subcategory-card__benchmark-icon { - fill: Red; -} - .subcategory-card__benchmark-item { display: flex; align-items: center; @@ -45,12 +41,12 @@ .subcategory-card__circle { min-width: 24px; min-height: 24px; - margin-right: 4px; - height: 26px; - width: 26px; + height: 24px; + width: 24px; display: flex; justify-content: center; align-items: center; + @extend .me-3; } .subcategory-card__benchmark-label { @@ -70,6 +66,12 @@ @extend .sub-header-4; } +.subcategory-card__circle:focus { + outline: none; + border-radius: 50%; + box-shadow: 0 0 0 4px rgba($blue, 0.35); +} + .harvey-ball { stroke: $black; } diff --git a/app/assets/stylesheets/sqm_application.scss b/app/assets/stylesheets/sqm_application.scss index 5674170e..55fbb1d4 100644 --- a/app/assets/stylesheets/sqm_application.scss +++ b/app/assets/stylesheets/sqm_application.scss @@ -1,5 +1,4 @@ -@import "bootstrap-overrides"; -@import "bootstrap"; +@import "sqm_bootstrap"; @import "clear-margin-padding"; @import "colors"; @import "fonts"; diff --git a/app/assets/stylesheets/sqm_bootstrap.scss b/app/assets/stylesheets/sqm_bootstrap.scss new file mode 100644 index 00000000..148c3f41 --- /dev/null +++ b/app/assets/stylesheets/sqm_bootstrap.scss @@ -0,0 +1,52 @@ +@import "colors"; +@import "bootstrap-overrides"; + +// Configuration +@import "bootstrap/functions"; +@import "bootstrap/variables"; +@import "bootstrap/mixins"; +@import "bootstrap/utilities"; + +// Layout & components +@import "bootstrap/root"; +@import "bootstrap/reboot"; +@import "bootstrap/type"; +@import "bootstrap/images"; +@import "bootstrap/containers"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; +@import "bootstrap/transitions"; +@import "bootstrap/dropdown"; +@import "bootstrap/button-group"; +@import "bootstrap/nav"; +@import "bootstrap/navbar"; +@import "bootstrap/card"; +@import "bootstrap/accordion"; +@import "bootstrap/breadcrumb"; +@import "bootstrap/pagination"; +@import "bootstrap/badge"; +@import "bootstrap/alert"; +@import "bootstrap/progress"; +@import "bootstrap/list-group"; +@import "bootstrap/close"; +@import "bootstrap/toasts"; +@import "bootstrap/modal"; +@import "bootstrap/tooltip"; +@import "bootstrap/popover"; +@import "bootstrap/carousel"; +@import "bootstrap/spinners"; +@import "bootstrap/offcanvas"; +@import "bootstrap/placeholders"; + +// Helpers +@import "bootstrap/helpers"; + +// Utilities +@import "bootstrap/utilities/api"; + + +.popover { + box-shadow: 0 0 8px rgba($black, 0.25); +} diff --git a/app/javascript/application.js b/app/javascript/application.js index 21243cb1..75d32dc6 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -7,10 +7,11 @@ import * as ActiveStorage from "@rails/activestorage" Rails.start() Turbolinks.start() ActiveStorage.start() -import { initializeListenersForNavDropdowns } from "./dashboard.js" -import { initializeListenersForHomeDropdowns } from "./home.js" +import { initializeListenersForNavDropdowns, initializePopovers } from "./dashboard" +import { initializeListenersForHomeDropdowns } from "./home" document.addEventListener("turbolinks:load", () => { initializeListenersForNavDropdowns() initializeListenersForHomeDropdowns() + initializePopovers() }) diff --git a/app/javascript/dashboard.js b/app/javascript/dashboard.js index 1b0275af..70cbad5d 100644 --- a/app/javascript/dashboard.js +++ b/app/javascript/dashboard.js @@ -1,3 +1,5 @@ +import { Popover } from "bootstrap"; + export function initializeListenersForNavDropdowns() { const schoolDropdown = document.querySelector("#select-school"); if (schoolDropdown) { @@ -14,3 +16,11 @@ export function initializeListenersForNavDropdowns() { }); } } + +export function initializePopovers() { + document + .querySelectorAll('[data-bs-toggle="popover"]') + .forEach(popoverElement => { + new Popover(popoverElement, { trigger: 'hover focus' }) + }) +} diff --git a/app/presenters/category_presenter.rb b/app/presenters/category_presenter.rb index 199ef410..1dab39ca 100644 --- a/app/presenters/category_presenter.rb +++ b/app/presenters/category_presenter.rb @@ -1,6 +1,4 @@ class CategoryPresenter - attr_reader :category - def initialize(category:) @category = category end diff --git a/app/presenters/subcategory_card_presenter.rb b/app/presenters/subcategory_card_presenter.rb index 9082e5cd..a3a7924e 100644 --- a/app/presenters/subcategory_card_presenter.rb +++ b/app/presenters/subcategory_card_presenter.rb @@ -1,6 +1,8 @@ class SubcategoryCardPresenter + attr_reader :name - def initialize(scale:, score:) + def initialize(name:, scale:, score:) + @name = name @scale = scale @score = score end @@ -21,6 +23,10 @@ class SubcategoryCardPresenter zone.type.to_s end + def insufficient_data? + zone.type == :no_zone + end + private def zone diff --git a/app/presenters/subcategory_presenter.rb b/app/presenters/subcategory_presenter.rb index d09e0225..2f4a6e81 100644 --- a/app/presenters/subcategory_presenter.rb +++ b/app/presenters/subcategory_presenter.rb @@ -18,7 +18,7 @@ class SubcategoryPresenter end def subcategory_card_presenter - SubcategoryCardPresenter.new(scale: scale, score: average_score) + SubcategoryCardPresenter.new(name: @subcategory.name, scale: scale, score: average_score) end def average_score diff --git a/app/views/dashboard/_quality_framework_indicators.erb b/app/views/dashboard/_quality_framework_indicators.erb index 06add49c..9994d518 100644 --- a/app/views/dashboard/_quality_framework_indicators.erb +++ b/app/views/dashboard/_quality_framework_indicators.erb @@ -5,7 +5,7 @@

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

@@ -14,12 +14,8 @@

<%= category_presenter.description %>

-
-
- <% category_presenter.subcategories(academic_year: @academic_year, school: @school).each do |subcategory| %> - <%= render partial: 'subcategory_card', locals: { presenter: subcategory.subcategory_card_presenter, subcategory: subcategory } %> - <% end %> -
+
+ <%= render partial: 'subcategory_card', collection: category_presenter.subcategories(academic_year: @academic_year, school: @school).map(&:subcategory_card_presenter) %>
<% end %> diff --git a/app/views/dashboard/_subcategory_card.html.erb b/app/views/dashboard/_subcategory_card.html.erb index bcae2940..28314d66 100644 --- a/app/views/dashboard/_subcategory_card.html.erb +++ b/app/views/dashboard/_subcategory_card.html.erb @@ -1,7 +1,7 @@
- - + data-bs-content="This subcategory is not displayed due to low survey response rates."> + -
<%= subcategory.name %>
+
<%= subcategory_card.name %>
diff --git a/spec/presenters/subcategory_card_presenter_spec.rb b/spec/presenters/subcategory_card_presenter_spec.rb index f7dcb93d..98867e95 100644 --- a/spec/presenters/subcategory_card_presenter_spec.rb +++ b/spec/presenters/subcategory_card_presenter_spec.rb @@ -10,7 +10,7 @@ describe SubcategoryCardPresenter do ) end - let(:subcategory_card_presenter) { SubcategoryCardPresenter.new(scale: scale, score: score)} + let(:subcategory_card_presenter) { SubcategoryCardPresenter.new(name: 'Card name', scale: scale, score: score) } context 'when the given score is in the Warning zone for the given scale' do let(:score) { 1 } @@ -78,5 +78,9 @@ describe SubcategoryCardPresenter do it 'returns the icon that represents the zone' do expect(subcategory_card_presenter.harvey_ball_icon).to eq "full-circle" end + + it 'reports that there is insufficient data' do + expect(subcategory_card_presenter.insufficient_data?).to be true + end end end