mirror of
https://github.com/edcommonwealth/sqm-dashboards.git
synced 2026-03-07 21:48:16 -08:00
Style dashboard page
This commit is contained in:
Alex Basson
parent
45c5392b2e
commit
8cc6866c61
7 changed files with 141 additions and 143 deletions
|
|
@ -5,12 +5,11 @@ $gray-3: #F9F9F9;
|
|||
$white: #FFFFFF;
|
||||
$blue: #01788E;
|
||||
$red: #C93047;
|
||||
$light-blue: #FAFCFD;
|
||||
|
||||
$teal: #00B0B3;
|
||||
$mint: #B2D236;
|
||||
|
||||
$beige: #EFEBE1;
|
||||
|
||||
$warning: #FF73C0;
|
||||
$watch: #F096AD;
|
||||
$growth: #E0BA9A;
|
||||
|
|
@ -33,8 +32,8 @@ $ideal: #C0FF73;
|
|||
color: $blue;
|
||||
}
|
||||
|
||||
.bg-color-beige {
|
||||
background-color: $beige;
|
||||
.bg-color-light-blue {
|
||||
background-color: $light-blue;
|
||||
}
|
||||
|
||||
.bg-color-blue {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
$spacer: 0.5rem;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 2),
|
||||
5: ($spacer * 3),
|
||||
6: ($spacer * 4),
|
||||
7: ($spacer * 5),
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 2),
|
||||
5: ($spacer * 3),
|
||||
6: ($spacer * 4),
|
||||
7: ($spacer * 5),
|
||||
);
|
||||
|
||||
@import "bootstrap";
|
||||
|
|
@ -21,3 +21,10 @@ $spacers: (
|
|||
.height-56 {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.card {
|
||||
@extend .bg-color-white;
|
||||
@extend .p-5;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 6px rgba($black, 0.25);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ module VarianceHelper
|
|||
end
|
||||
|
||||
def label_width_percentage
|
||||
25
|
||||
30
|
||||
end
|
||||
|
||||
def graph_width_percentage
|
||||
|
|
|
|||
|
|
@ -1,128 +1,125 @@
|
|||
<div class="bg-color-white p-4 border-radius-8">
|
||||
<svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<svg width="100%" height=<%= graph_height(presenters.size) %> xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feComponentTransfer in=SourceAlpha>
|
||||
<feFuncA type="table" tableValues="1 0"/>
|
||||
</feComponentTransfer>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feOffset dx="0" dy="5" result="offsetblur"/>
|
||||
<feFlood flood-color="rgb(0, 0, 0)" result="color"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feComposite in2="SourceAlpha" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
<feMergeNode/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feComponentTransfer in=SourceAlpha>
|
||||
<feFuncA type="table" tableValues="1 0"/>
|
||||
</feComponentTransfer>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feOffset dx="0" dy="5" result="offsetblur"/>
|
||||
<feFlood flood-color="rgb(0, 0, 0)" result="color"/>
|
||||
<feComposite in2="offsetblur" operator="in"/>
|
||||
<feComposite in2="SourceAlpha" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
<feMergeNode/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<svg
|
||||
id="graph-background"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
height=<%= graph_background_height(number_of_rows: presenters.size) %>
|
||||
>
|
||||
<g id="zone-headings">
|
||||
<%= zones.each_with_index do |zone, index| %>
|
||||
<text
|
||||
class="zone-header"
|
||||
x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
|
||||
y="<%= heading_gutter / 2 %>"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
<%= zone.capitalize %>
|
||||
</text>
|
||||
<% end %>
|
||||
</g>
|
||||
|
||||
<g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
|
||||
<%= zones.each_with_index do |zone, index| %>
|
||||
<rect
|
||||
id="<%= zone %>-zone"
|
||||
class="zone-background fill-<%= zone %>"
|
||||
x="<%= index * zone_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= zone_width_percentage %>%"
|
||||
height="100%"
|
||||
opacity="0.2"
|
||||
filter="url(#inset-shadow)"
|
||||
/>
|
||||
<% end %>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<g id="measure-rows">
|
||||
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
|
||||
<%= presenters.each_with_index do |presenter, index| %>
|
||||
<text
|
||||
class="font-cabin"
|
||||
x="<%= label_width_percentage %>%"
|
||||
dx="<%= -1 * label_padding_right %>"
|
||||
y="<%= index * measure_row_height + measure_row_height / 2 %>"
|
||||
text-anchor="end"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
<%= presenter.measure_name %>
|
||||
</text>
|
||||
<% end %>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
id="measure-row-bars"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="<%= heading_gutter %>"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
>
|
||||
<%= presenters.each_with_index do |presenter, index| %>
|
||||
<rect
|
||||
class="measure-row-bar <%= presenter.bar_color %>"
|
||||
x="<%= presenter.x_offset %>"
|
||||
y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
|
||||
width="<%= presenter.bar_width %>"
|
||||
height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
|
||||
stroke="none"
|
||||
/>
|
||||
<% end %>
|
||||
</svg>
|
||||
<svg
|
||||
id="graph-background"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
height=<%= graph_background_height(number_of_rows: presenters.size) %>
|
||||
>
|
||||
<g id="zone-headings">
|
||||
<%= zones.each_with_index do |zone, index| %>
|
||||
<text
|
||||
class="zone-header weight-600"
|
||||
x="<%= index * zone_width_percentage + zone_width_percentage / 2.0 %>%"
|
||||
y="<%= heading_gutter / 2 %>"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
<%= zone.capitalize %>
|
||||
</text>
|
||||
<% end %>
|
||||
</g>
|
||||
|
||||
<svg
|
||||
id="key-benchmark"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
height="<%= graph_background_height(number_of_rows: presenters.size) %>"
|
||||
>
|
||||
<g transform="translate(0, <%= heading_gutter %>)">
|
||||
<g id="zone-background" transform="translate(0, <%= heading_gutter %>)">
|
||||
<%= zones.each_with_index do |zone, index| %>
|
||||
<rect
|
||||
id="key-benchmark"
|
||||
x="60%"
|
||||
transform="translate(-1, 0)"
|
||||
id="<%= zone %>-zone"
|
||||
class="zone-background fill-<%= zone %>"
|
||||
x="<%= index * zone_width_percentage %>%"
|
||||
y="0"
|
||||
width="4"
|
||||
width="<%= zone_width_percentage %>%"
|
||||
height="100%"
|
||||
fill="black"
|
||||
/>
|
||||
</g>
|
||||
opacity="0.2"
|
||||
filter="url(#inset-shadow)"
|
||||
/>
|
||||
<% end %>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<g id="measure-rows">
|
||||
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
|
||||
<%= presenters.each_with_index do |presenter, index| %>
|
||||
<text
|
||||
class="font-cabin"
|
||||
x="<%= label_width_percentage %>%"
|
||||
dx="<%= -1 * label_padding_right %>"
|
||||
y="<%= index * measure_row_height + measure_row_height / 2 %>"
|
||||
text-anchor="end"
|
||||
dominant-baseline="middle"
|
||||
>
|
||||
<%= presenter.measure_name %>
|
||||
</text>
|
||||
<% end %>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
id="legend"
|
||||
id="measure-row-bars"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
y="<%= heading_gutter %>"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
>
|
||||
<text
|
||||
class="graph-footer"
|
||||
x="60%"
|
||||
y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>"
|
||||
text-anchor="middle"
|
||||
>
|
||||
Benchmark
|
||||
</text>
|
||||
<%= presenters.each_with_index do |presenter, index| %>
|
||||
<rect
|
||||
class="measure-row-bar <%= presenter.bar_color %>"
|
||||
x="<%= presenter.x_offset %>"
|
||||
y="<%= index * measure_row_height + (measure_row_height - measure_row_bar_height) / 2 %>"
|
||||
width="<%= presenter.bar_width %>"
|
||||
height=<%= measure_row_bar_height %> data-for-measure-id="<%= presenter.measure_id %>"
|
||||
stroke="none"
|
||||
/>
|
||||
<% end %>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<svg
|
||||
id="key-benchmark"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
height="<%= graph_background_height(number_of_rows: presenters.size) %>"
|
||||
>
|
||||
<g transform="translate(0, <%= heading_gutter %>)">
|
||||
<rect
|
||||
id="key-benchmark"
|
||||
x="60%"
|
||||
transform="translate(-1, 0)"
|
||||
y="0"
|
||||
width="4"
|
||||
height="100%"
|
||||
fill="black"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
id="legend"
|
||||
x="<%= label_width_percentage %>%"
|
||||
y="0"
|
||||
width="<%= graph_width_percentage %>%"
|
||||
>
|
||||
<text
|
||||
class="graph-footer"
|
||||
x="60%"
|
||||
y="<%= graph_background_height(number_of_rows: presenters.size) + (footer_gutter / 2) %>"
|
||||
text-anchor="middle"
|
||||
>
|
||||
Benchmark
|
||||
</text>
|
||||
</svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -2,13 +2,10 @@
|
|||
<h2 class="h1 color-white">Areas Of Interest</h2>
|
||||
<% end %>
|
||||
|
||||
<div class="bg-color-beige mt-4 p-5">
|
||||
|
||||
<div>
|
||||
<h2 class="h1 color-red">Distance from benchmark</h2>
|
||||
<p class="body-large mb-6">This graph shows how much a score is above or below the benchmark of any given scale.</p>
|
||||
<div class="card">
|
||||
<div class="mb-5">
|
||||
<h2 class="h2 color-black">Distance from benchmark</h2>
|
||||
</div>
|
||||
|
||||
<%= render partial: "variance_graph", locals: { presenters: @presenters } %>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,9 @@
|
|||
<div class="container">
|
||||
<div class="row py-4 justify-content-between align-items-center">
|
||||
<div class="col d-flex justify-content-start align-items-center">
|
||||
<p class="me-6"><%= link_to image_tag('logo.png', class: 'height-56'), root_path %></p>
|
||||
<p class="me-4">
|
||||
<a class="h3 link <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
|
||||
</p>
|
||||
<%= link_to image_tag('logo.png', class: 'height-56 me-7'), root_path %>
|
||||
<a class="h3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
|
||||
<a class="h3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
|
||||
</div>
|
||||
|
||||
<div class="col d-flex justify-content-end">
|
||||
|
|
|
|||
|
|
@ -30,10 +30,12 @@
|
|||
<%= render partial: 'layouts/sqm/header' %>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<%= yield %>
|
||||
<div class="bg-color-light-blue">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col mt-7">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue