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

Finish styling quality framework indicators

Browse Source
pull/1/head
rebuilt 4 years ago
parent 291dd6d422
commit 9e047f9aea
8 changed files with 162 additions and 48 deletions
Show Stats Download Patch File Download Diff File

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

@ -54,6 +54,22 @@ $ideal: #C0FF73;
background-color: $gray-4;
}
.bg-warning {
background-color: $warning;
}
.bg-watch {
background-color: $watch;
}
.bg-growth {
background-color: $growth;
}
.bg-approval {
background-color: $approval;
}
.bg-ideal {
background-color: $ideal;
}
.fill-warning {
fill: $warning;
}

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

@ -1,4 +1,6 @@
@import 'fonts';
@import 'bootstrap';
@import 'fonts';
.graph-header {
@extend .font-bitter;
@ -9,26 +11,42 @@
font-family: 'Cabin', sans-serif;
}
.icon-heart {
width: 28px;
height: 32px;
}
.category-card {
flex-basis: 20%;
align-items: center;
justify-content: space-between;
height: 600px;
height: 750px;
}
.category-card__title {
flex-basis: 20%;
height: 13%;
}
.category-card__description {
flex-basis: 20%;
height: 40%;
@extend .font-cabin;
@extend .weight-400;
}
.category-card__button {
height: 10%;
}
.category-card__icon {
height: 7%;
}
.category-card__subcategory {
height: 30%;
}
.subcategory-card {
flex-basis: 20%;
border: 1px solid #CECECE;
background-color: $gray-4;
width: 90%;
min-width: 95%;
margin: auto;
padding: 8px;
border: 1px solid #CECECE;
@ -40,12 +58,22 @@
}
.subcategory-card__benchmark-item {
display: flex;
align-items: center;
justify-content: flex-start;
@extend .my-3;
}
.subcategory-card__circle-container {
flex: 0 0 50px;
padding: 0;
.subcategory-card__circle {
min-width: 26px;
min-height: 26px;
margin-right: 4px;
border-radius: 50%;
height: 26px;
width: 26px;
text-align: center;
@extend .font-cabin;
@extend .weight-400;
}
.subcategory-card__benchmark-label {

17
app/presenters/category_presenter.rb
Unescape View File

@ -13,12 +13,27 @@ class CategoryPresenter
@category.description
end
def icon
case name
when 'Teachers & Leadership'
'icon-apple'
when 'School Culture'
'icon-school'
when 'Resources'
'icon-people'
when 'Academic Learning'
'icon-mortar-board'
else 'Citizenship & Wellbeing'
'icon-heart'
end
end
def subcategories
@category.subcategories.map do |subcategory|
SubcategoryPresenter.new(
subcategory: subcategory,
academic_year: @academic_year,
school: @school,
school: @school
)
end
end

11
app/presenters/subcategory_card_presenter.rb
Unescape View File

@ -10,17 +10,8 @@ class SubcategoryCardPresenter
abbreviations[zone.type]
end
def svg
end
def offset
return 40 unless abbreviation.length > 1
27
end
def color
"fill-#{zone.type}"
"bg-#{zone.type}"
end
private

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

@ -1,28 +1,57 @@
<div class="school-quality-frameworks mt-5 p-4 border-radius-8">
<h2 class="sub-header">School Quality Framework Indicators</h2>
<svg style="display: none;">
<symbol id="icon-heart" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2656 1.94531C23.2578 -0.625 18.8281 -0.132812 16.0391 2.71094L15 3.80469L13.9062 2.71094C11.1719 -0.132812 6.6875 -0.625 3.67969 1.94531C0.234375 4.89844 0.0703125 10.1484 3.13281 13.3203L13.7422 24.2578C14.3984 24.9688 15.5469 24.9688 16.2031 24.2578L26.8125 13.3203C29.875 10.1484 29.7109 4.89844 26.2656 1.94531Z" fill="#CECECE"/>
</symbol>
<div class="row">
<symbol id="icon-mortar-board" viewBox="0 0 36 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.0156 4.92188L19.7578 0.21875C18.9375 -0.0546875 18.0078 -0.0546875 17.1875 0.21875L1.92969 4.92188C0.671875 5.30469 0.671875 7 1.92969 7.38281L4.60938 8.20312C4.00781 8.91406 3.67969 9.84375 3.625 10.7734C3.07812 11.1016 2.75 11.6484 2.75 12.25C2.75 12.8516 3.02344 13.3438 3.46094 13.6719L2.09375 19.9609C1.98438 20.5078 2.36719 21 2.91406 21H6.03125C6.57812 21 6.96094 20.5078 6.85156 19.9609L5.48438 13.6719C5.92188 13.3438 6.25 12.8516 6.25 12.25C6.25 11.6484 5.86719 11.1016 5.375 10.8281C5.42969 10.0078 5.8125 9.24219 6.52344 8.80469L17.1875 12.0859C17.6797 12.25 18.6641 12.4141 19.7578 12.0859L35.0156 7.38281C36.2734 7 36.2734 5.30469 35.0156 4.92188ZM20.25 13.7812C18.7188 14.2188 17.3516 14 16.6953 13.7812L8.76562 11.3203L8 17.5C8 19.4688 12.6484 21 18.5 21C24.2969 21 29 19.4688 29 17.5L28.1797 11.3203L20.25 13.7812Z" fill="#CECECE"/>
</symbol>
<symbol id="icon-people" viewBox="0 0 35 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.3594 17.2031C33.5234 16.4375 33.5234 15.6172 33.3594 14.8516L34.7812 14.0312C34.9453 13.9766 35 13.7578 34.9453 13.5938C34.5625 12.3906 33.9609 11.3516 33.1406 10.4219C33.0312 10.3125 32.8125 10.2578 32.6484 10.3672L31.2266 11.1875C30.625 10.6953 29.9688 10.2578 29.2031 10.0391V8.39844C29.2031 8.17969 29.0938 8.01562 28.9297 8.01562C27.6719 7.74219 26.4688 7.74219 25.2656 8.01562C25.1016 8.01562 24.9922 8.17969 24.9922 8.39844V10.0391C24.2266 10.2578 23.5703 10.6953 22.9688 11.1875L21.5469 10.3672C21.3828 10.2578 21.1641 10.3125 21.0547 10.4219C20.2344 11.3516 19.5781 12.3906 19.25 13.5938C19.1953 13.7578 19.25 13.9766 19.4141 14.0312L20.8359 14.8516C20.6719 15.6172 20.6719 16.4375 20.8359 17.2031L19.4141 18.0234C19.25 18.0781 19.1953 18.2969 19.25 18.4609C19.5781 19.6641 20.2344 20.7031 21.0547 21.6328C21.1641 21.7422 21.3828 21.7969 21.5469 21.6875L22.9688 20.8672C23.5703 21.3594 24.2266 21.7969 24.9922 22.0156V23.6562C24.9922 23.875 25.1016 24.0391 25.2656 24.0391C26.5234 24.3125 27.7266 24.3125 28.9297 24.0391C29.0938 24.0391 29.2031 23.875 29.2031 23.6562V22.0156C29.9688 21.7969 30.625 21.3594 31.2266 20.8672L32.6484 21.6875C32.8125 21.7969 33.0312 21.7422 33.1406 21.6328C33.9609 20.7031 34.5625 19.6641 34.9453 18.4609C35 18.2969 34.9453 18.0781 34.7812 18.0234L33.3594 17.2031ZM27.125 18.6797C25.6484 18.6797 24.4453 17.4766 24.4453 16C24.4453 14.5781 25.6484 13.375 27.125 13.375C28.5469 13.375 29.75 14.5781 29.75 16C29.75 17.4766 28.5469 18.6797 27.125 18.6797ZM5.25 10.75C7.16406 10.75 8.75 9.21875 8.75 7.25C8.75 5.33594 7.16406 3.75 5.25 3.75C3.28125 3.75 1.75 5.33594 1.75 7.25C1.75 9.21875 3.28125 10.75 5.25 10.75ZM17.5 12.5C17.5547 12.5 17.6641 12.5 17.7734 12.5C18.2109 11.2969 18.9219 10.2031 19.7422 9.27344C20.1797 8.83594 20.7266 8.5625 21.3281 8.5625C21.7109 8.5625 22.0938 8.67188 22.4219 8.83594L22.8594 9.10938C22.9141 9.05469 22.9141 9.05469 22.9688 9.05469C23.3516 8.23438 23.5703 7.35938 23.5703 6.42969C23.5703 3.03906 20.8359 0.304688 17.4453 0.304688C14.1094 0.304688 11.375 3.03906 11.375 6.375C11.375 9.76562 14.1094 12.5 17.5 12.5ZM23.2422 23.1641C23.0781 23.1094 22.9688 23 22.8594 22.9453C22.4219 23.2188 22.0391 23.4922 21.3281 23.4922C20.7812 23.4922 20.1797 23.2188 19.7969 22.7812C18.7578 21.6875 17.9922 20.375 17.5547 19.0078C17.0078 17.0938 18.9219 16.2734 18.9766 16.2188C18.9766 16.1094 18.9766 15.9453 18.9766 15.8359L18.5391 15.5625C18.3203 15.4531 18.1562 15.2891 17.9922 15.125C17.8281 15.125 17.6641 15.125 17.5 15.125C16.1328 15.125 14.875 14.7969 13.7266 14.25H13.2891C9.78906 14.25 7 17.0938 7 20.5938V22.125C7 23.6016 8.14844 24.75 9.625 24.75H23.5703C23.3516 24.4219 23.2422 24.0938 23.2422 23.6562V23.1641ZM9.46094 13.5391C8.80469 12.9375 7.92969 12.5 7 12.5H3.5C1.53125 12.5 0 14.0859 0 16V17.75C0 18.7344 0.765625 19.5 1.75 19.5H5.30469C5.6875 16.9297 7.21875 14.7422 9.46094 13.5391Z" fill="#CECECE"/>
</symbol>
<symbol id="icon-school" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 12.75V27.625C0 28.1172 0.382812 28.5 0.875 28.5H5.25V11H1.75C0.765625 11 0 11.8203 0 12.75ZM19.6875 10.125H18.375V7.9375C18.375 7.71875 18.1562 7.5 17.9375 7.5H17.0625C16.7891 7.5 16.625 7.71875 16.625 7.9375V11.4375C16.625 11.7109 16.7891 11.875 17.0625 11.875H19.6875C19.9062 11.875 20.125 11.7109 20.125 11.4375V10.5625C20.125 10.3438 19.9062 10.125 19.6875 10.125ZM27.1797 6.67969L18.4297 0.828125C18.2109 0.664062 17.7734 0.5 17.5 0.5C17.1719 0.5 16.7344 0.664062 16.5156 0.828125L7.76562 6.67969C7.32812 6.95312 7 7.60938 7 8.10156V28.5H14V20.625C14 20.1875 14.3828 19.75 14.875 19.75H20.125C20.5625 19.75 21 20.1875 21 20.625V28.5H28V8.10156C28 7.5 27.6719 6.95312 27.1797 6.67969ZM17.5 14.5C15.0391 14.5 13.125 12.5859 13.125 10.125C13.125 7.71875 15.0391 5.75 17.5 5.75C19.9062 5.75 21.875 7.71875 21.875 10.125C21.875 12.5859 19.9062 14.5 17.5 14.5ZM33.25 11H29.75V28.5H34.125C34.5625 28.5 35 28.1172 35 27.625V12.75C35 11.8203 34.1797 11 33.25 11Z" fill="#CECECE"/>
</symbol>
<symbol id="icon-apple" viewBox="0 0 25 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.3906 7.55469C18.5156 7.44531 17.3125 7.55469 15.7812 7.9375C14.4688 8.32031 13.375 8.75781 12.4453 9.25C11.5703 8.75781 10.4766 8.32031 9.16406 7.9375C7.63281 7.55469 6.42969 7.44531 5.55469 7.55469C4.13281 7.82812 2.92969 8.59375 2.05469 9.85156C1.23438 11 0.6875 12.4219 0.414062 14.1172C0.140625 15.7031 0.140625 17.2891 0.46875 18.8203C0.90625 21.4453 1.78125 23.5781 3.09375 25.3281C4.625 27.4609 6.59375 28.5 9 28.5C9.54688 28.5 10.2031 28.3359 10.9141 27.9531C11.3516 27.6797 11.8984 27.5156 12.4453 27.5156C13.0469 27.5156 13.5938 27.6797 14.0312 27.9531C14.7422 28.3359 15.3984 28.5 15.9453 28.5C18.3516 28.5 20.3203 27.4609 21.8516 25.3281C23.1641 23.5781 24.0391 21.4453 24.4766 18.8203C24.8047 17.2891 24.8047 15.7031 24.5312 14.1172C24.2578 12.4219 23.7109 11 22.8906 9.85156C22.0156 8.59375 20.8125 7.82812 19.3906 7.55469ZM16.3828 5.3125C16.875 4.82031 17.2031 4.16406 17.4219 3.28906C17.6406 2.74219 17.6953 2.08594 17.6953 1.375L17.6406 0.554688L16.8203 0.5C16.1641 0.5 15.5078 0.609375 14.9062 0.773438C14.0859 0.992188 13.4297 1.375 12.8828 1.8125C12.2266 2.52344 11.7891 3.50781 11.6797 4.82031C11.5703 5.47656 11.5703 6.07812 11.6797 6.57031L12.4453 6.625C13.1562 6.625 13.8125 6.57031 14.3594 6.35156C15.2344 6.13281 15.8906 5.80469 16.3828 5.3125Z" fill="#CECECE"/>
</symbol>
</svg>
<div class="school-quality-frameworks card mt-5 p-4 border-radius-8">
<h2 class="sub-header-2">School Quality Framework Indicators</h2>
<div class="row mt-5">
<% category_presenters.each do |category_presenter| %>
<section class="category-card column d-flex flex-column">
<div class="category-card__title text-center"><h3><%= category_presenter.name %></h3></div>
<section class="category-card column d-flex flex-column justify-space-between align-items-center">
<div class="category-card__icon">
<svg class="icon-heart">
<use xlink:href="#<%= category_presenter.icon %>"></use>
</svg>
</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="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 row">
<div class="subcategory-card__circle-container">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:50px; height:50px;">
<circle class="subcategory-card__benchmark-icon <%= presenter.color %>" cx="50" cy="50" r="35"/>
<text class="subcategory-card__benchmark-label" x="<%= presenter.offset %>" y= "55"><%= presenter.abbreviation %></text>
</svg>
</div>
<div class="subcategory-card__name col"><%= subcategory.name %></div>
<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">
<div class="subcategory-card__circle <%= presenter.color %>"><%= presenter.abbreviation%></div>
<div class="subcategory-card__name"><%= subcategory.name %></div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
<div class="text-center"><button class="view-details mt-3">View Details</button></div>
<div class="category-card__button text-center"><button class="view-details mt-3">View Details</button></div>
</section>
<% end %>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

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

@ -1,13 +1,13 @@
<% content_for :navigation do %>
<h2 class="h1 color-white">Areas Of Interest</h2>
<h2 class="sub-header color-white">Areas Of Interest</h2>
<% end %>
<div class="card">
<div class="mb-5">
<h2 class="h2 color-black">Distance from benchmark</h2>
<h2 class="sub-header-2 color-black">Distance from benchmark</h2>
</div>
<%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %>
</div>
<%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
</div>

35
spec/presenters/category_presenter_spec.rb
Unescape View File

@ -9,6 +9,31 @@ describe CategoryPresenter do
return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
end
let(:teachers_and_leadership_presenter) do
category = SqmCategory.find_by_name("Teachers & Leadership")
return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
end
let(:school_culture_presenter) do
category = SqmCategory.find_by_name("School Culture")
return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
end
let(:resources_presenter) do
category = SqmCategory.find_by_name("Resources")
return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
end
let(:academic_learning_presenter) do
category = SqmCategory.find_by_name("Academic Learning")
return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
end
let(:citizenship_and_wellbeing_presenter) do
category = SqmCategory.find_by_name("Citizenship & Wellbeing")
return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new)
end
it 'returns the name and description of the category' do
expect(category_presenter.name).to eq 'Some Category'
expect(category_presenter.description).to eq 'A description for some Category'
@ -17,4 +42,14 @@ describe CategoryPresenter do
it 'maps subcategories to subcategory presenters' do
expect(category_presenter.subcategories.map(&:name)).to eq ['A subcategory', 'Another subcategory']
end
it 'returns the correct icon for the given category' do
expect(teachers_and_leadership_presenter.icon).to eq 'icon-apple'
expect(school_culture_presenter.icon).to eq 'icon-school'
expect(resources_presenter.icon).to eq 'icon-people'
expect(academic_learning_presenter.icon).to eq 'icon-mortar-board'
expect(citizenship_and_wellbeing_presenter.icon).to eq 'icon-heart'
end
end

10
spec/presenters/subcategory_card_presenter_spec.rb
Unescape View File

@ -19,7 +19,7 @@ describe SubcategoryCardPresenter do
end
it 'returns the color class of the zone' do
expect(subcategory_card_presenter.color).to eq "fill-warning"
expect(subcategory_card_presenter.color).to eq "bg-warning"
end
end
@ -30,7 +30,7 @@ describe SubcategoryCardPresenter do
end
it 'returns the color class of the zone' do
expect(subcategory_card_presenter.color).to eq "fill-watch"
expect(subcategory_card_presenter.color).to eq "bg-watch"
end
end
@ -41,7 +41,7 @@ describe SubcategoryCardPresenter do
end
it 'returns the color class of the zone' do
expect(subcategory_card_presenter.color).to eq "fill-growth"
expect(subcategory_card_presenter.color).to eq "bg-growth"
end
end
@ -52,7 +52,7 @@ describe SubcategoryCardPresenter do
end
it 'returns the color class of the zone' do
expect(subcategory_card_presenter.color).to eq "fill-approval"
expect(subcategory_card_presenter.color).to eq "bg-approval"
end
end
@ -63,7 +63,7 @@ describe SubcategoryCardPresenter do
end
it 'returns the color class of the zone' do
expect(subcategory_card_presenter.color).to eq "fill-ideal"
expect(subcategory_card_presenter.color).to eq "bg-ideal"
end
end
end

Write Preview
Loading…
Cancel
Save