gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-07 21:48:16 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add harvey ball legend to sqm indicators card

Browse source
This commit is contained in:
Alex Basson 2021-10-18 15:06:06 -04:00
parent b1c7ba3f0f
commit 0d9474f2c0
5 changed files with 85 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/colors.scss
View file

@ -57,6 +57,10 @@ $ideal: $purple;
background-color: $white;
}
.bg-color-gray-3 {
background-color: $gray-3;
}
.fill-black {
fill: $black;
}

11
app/assets/stylesheets/dashboard.scss
View file

@ -1,5 +1,7 @@
@import 'bootstrap';
@import 'colors';
@import 'fonts';
@import 'borders';
.graph-header {
@extend .font-bitter;
@ -10,6 +12,15 @@
font-family: 'Cabin', sans-serif;
}
.harvey-ball__legend {
display: flex;
justify-content: space-around;
align-items: center;
@extend .p-3;
@extend .bg-color-gray-3;
@extend .border-radius-8;
}
.category-card {
flex-basis: 20%;
height: 600px;

4
app/assets/stylesheets/fonts.scss
View file

@ -8,6 +8,10 @@
font-family: 'Cabin', sans-serif;
}
.font-size-14 {
font-size: 14px;
}
.weight-700 {
font-weight: 700;
}

43
app/views/dashboard/_quality_framework_indicators.erb
View file

@ -1,46 +1,3 @@
<svg class="d-none">
<symbol viewBox="0 0 24 24" id="empty-circle">
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="one-quarter-circle">
<path d="
M 12 0
A 12 12 0 0 1 24 12
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="half-circle">
<path d="
M 12 0
A 12 12 0 1 1 12 24
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="three-quarter-circle">
<path d="
M 12 0
A 12 12 0 1 1 0 12
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="full-circle">
<circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
</symbol>
</svg>
<div class="school-quality-frameworks">
<div class="row mt-5">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Before After
Before After

67
app/views/dashboard/index.html.erb
View file

@ -2,8 +2,73 @@
<h2 class="sub-header color-white">Areas Of Interest</h2>
<% end %>
<svg class="d-none">
<symbol viewBox="0 0 24 24" id="empty-circle">
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="one-quarter-circle">
<path d="
M 12 0
A 12 12 0 0 1 24 12
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="half-circle">
<path d="
M 12 0
A 12 12 0 1 1 12 24
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="three-quarter-circle">
<path d="
M 12 0
A 12 12 0 1 1 0 12
L 12 12
L 12 0"
stroke="none"
/>
<circle cx="12" cy="12" r="11.5" fill="none" stroke="#3E3A38"/>
</symbol>
<symbol viewBox="0 0 24 24" id="full-circle">
<circle cx="12" cy="12" r="11.5" stroke="#3E3A38"/>
</symbol>
</svg>
<div class="card">
<h2 class="sub-header-2">School Quality Framework Indicators</h2>
<div class="d-flex justify-content-between align-items-center">
<h2 class="sub-header-2">School Quality Framework Indicators</h2>
<div class="harvey-ball__legend">
<div class="font-size-14">Warning</div>
<svg class="ms-3 me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-warning" xlink:href="#empty-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-watch" xlink:href="#one-quarter-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-growth" xlink:href="#half-circle"></use>
</svg>
<svg class="mx-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-approval" xlink:href="#three-quarter-circle"></use>
</svg>
<svg class="ms-1 me-3" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<use class="fill-ideal" xlink:href="#full-circle"></use>
</svg>
<div class="font-size-14">Ideal</div>
</div>
</div>
<%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %>
</div>