edcommonwealth
/
sqm-dashboards
mirror of https://github.com/edcommonwealth/sqm-dashboards.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Display popover on harvey balls not in a zone

Browse Source 
This wraps bootstrap styles in `sqm_bootstrap` which can now selectively
import specific desired pieces of bootstrap styling
pull/1/head
Liam Morley 4 years ago
parent 00a0e5868c
commit 4fafe2cb50
12 changed files with 99 additions and 26 deletions
Show Stats Download Patch File Download Diff File

5
app/assets/stylesheets/bootstrap-overrides.scss vendored
Unescape View File

@ -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);

16
app/assets/stylesheets/dashboard.scss
Unescape View File

@ -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;
}

3
app/assets/stylesheets/sqm_application.scss
Unescape View File

@ -1,5 +1,4 @@
@import "bootstrap-overrides";
@import "bootstrap";
@import "sqm_bootstrap";
@import "clear-margin-padding";
@import "colors";
@import "fonts";

52
app/assets/stylesheets/sqm_bootstrap.scss
Unescape View File

@ -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);
}

5
app/javascript/application.js
Unescape View File

@ -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()
})

10
app/javascript/dashboard.js
Unescape View File

@ -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' })
})
}

2
app/presenters/category_presenter.rb
Unescape View File

@ -1,6 +1,4 @@
class CategoryPresenter
attr_reader :category
def initialize(category:)
@category = category
end

8
app/presenters/subcategory_card_presenter.rb
Unescape View File

@ -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

2
app/presenters/subcategory_presenter.rb
Unescape View File

@ -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

10
app/views/dashboard/_quality_framework_indicators.erb
Unescape View File

@ -5,7 +5,7 @@
</div>
<div class="text-center">
<h3 class="sub-header-3">
<%= 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 %>
</h3>
@ -14,12 +14,8 @@
<p class="body-small text-center"><%= category_presenter.description %></p>
<div>
<div class="subcategory-card border-radius-8">
<div class="subcategory-card__benchmark-list">
<% 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 %>
</div>
<div class="subcategory-card__benchmark-list">
<%= render partial: 'subcategory_card', collection: category_presenter.subcategories(academic_year: @academic_year, school: @school).map(&:subcategory_card_presenter) %>
</div>
</div>
<% end %>

6
app/views/dashboard/_subcategory_card.html.erb
Unescape View File

@ -1,7 +1,7 @@
<div class="subcategory-card__benchmark-item">
<svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<use class="harvey-ball harvey-ball--<%= presenter.color %>" xlink:href="#<%= presenter.harvey_ball_icon %>"></use>
<svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %> data-bs-content="This subcategory is not displayed due to low survey response rates.">
<use class="harvey-ball harvey-ball--<%= subcategory_card.color %>" xlink:href="#<%= subcategory_card.harvey_ball_icon %>"></use>
</svg>
<div class="subcategory-card__name"><%= subcategory.name %></div>
<div class="subcategory-card__name"><%= subcategory_card.name %></div>
</div>

6
spec/presenters/subcategory_card_presenter_spec.rb
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save