mirror of
https://github.com/edcommonwealth/sqm-dashboards.git
synced 2026-03-10 07:50:33 -07:00
Add typography and color styles
This commit is contained in:
Alex Basson
parent
6814e213c7
commit
587cbbdd3d
8 changed files with 110 additions and 60 deletions
|
|
@ -4,9 +4,10 @@ $spacers: (
|
|||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
4: ($spacer * 2),
|
||||
5: ($spacer * 3),
|
||||
6: ($spacer * 5)
|
||||
6: ($spacer * 4),
|
||||
7: ($spacer * 5),
|
||||
);
|
||||
|
||||
@import "bootstrap";
|
||||
|
|
|
|||
|
|
@ -1,14 +1,50 @@
|
|||
$red: #C92F47;
|
||||
$black: #3E3A38;
|
||||
$gray-1: #595959;
|
||||
$gray-2: #CECECE;
|
||||
$gray-3: #F9F9F9;
|
||||
$white: #FFFFFF;
|
||||
$blue: #01788E;
|
||||
$red: #C93047;
|
||||
|
||||
$teal: #00B0B3;
|
||||
$mint: #B2D236;
|
||||
|
||||
$beige: #EFEBE1;
|
||||
|
||||
$warning: #FF73C0;
|
||||
$watch: #F096AD;
|
||||
$growth: #E0BA9A;
|
||||
$approval: #D0DD86;
|
||||
$ideal: #C0FF73;
|
||||
|
||||
.red {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.beige-bg {
|
||||
.bg-beige {
|
||||
background-color: $beige;
|
||||
}
|
||||
|
||||
.white-bg {
|
||||
background-color: white;
|
||||
.bg-white {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.fill-warning {
|
||||
fill: $warning;
|
||||
}
|
||||
|
||||
.fill-watch {
|
||||
fill: $watch;
|
||||
}
|
||||
|
||||
.fill-growth {
|
||||
fill: $growth;
|
||||
}
|
||||
|
||||
.fill-approval {
|
||||
fill: $approval;
|
||||
}
|
||||
|
||||
.fill-ideal {
|
||||
fill: $ideal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,41 @@
|
|||
font-size: 40px;
|
||||
}
|
||||
|
||||
.p {
|
||||
@extend .font-cabin;
|
||||
@extend .weight-400;
|
||||
font-size: 17px;
|
||||
.h2 {
|
||||
@extend .font-bitter;
|
||||
@extend .weight-700;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
@extend .font-bitter;
|
||||
@extend .weight-700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
@extend .font-bitter;
|
||||
@extend .weight-600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.body-large {
|
||||
@extend .font-cabin;
|
||||
@extend .weight-400;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.body-small {
|
||||
@extend .font-cabin;
|
||||
@extend .weight-400;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.link {
|
||||
@extend .font-cabin;
|
||||
@extend .weight-600;
|
||||
font-size: 16px;
|
||||
color: $blue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
module MeasureGraphParameters
|
||||
module ZoneColor
|
||||
WARNING = "#FF73C0"
|
||||
WATCH = "#F096AD"
|
||||
GROWTH = "#E0BA9A"
|
||||
APPROVAL = "#D0DD86"
|
||||
IDEAL = "#C0FF73"
|
||||
end
|
||||
end
|
||||
|
|
@ -9,18 +9,7 @@ class MeasureGraphRowPresenter
|
|||
end
|
||||
|
||||
def bar_color
|
||||
case zone.type
|
||||
when :ideal
|
||||
MeasureGraphParameters::ZoneColor::IDEAL
|
||||
when :approval
|
||||
MeasureGraphParameters::ZoneColor::APPROVAL
|
||||
when :growth
|
||||
MeasureGraphParameters::ZoneColor::GROWTH
|
||||
when :watch
|
||||
MeasureGraphParameters::ZoneColor::WATCH
|
||||
else
|
||||
MeasureGraphParameters::ZoneColor::WARNING
|
||||
end
|
||||
"fill-#{zone.type}"
|
||||
end
|
||||
|
||||
def bar_width
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="white-bg p-4 border-radius-8">
|
||||
<div class="bg-white p-4 border-radius-8">
|
||||
|
||||
<% heading_gutter = 30 %>
|
||||
<% footer_gutter = 50 %>
|
||||
|
|
@ -35,11 +35,11 @@
|
|||
</g>
|
||||
|
||||
<g id="scale-background" transform="translate(0, <%= heading_gutter %>)">
|
||||
<rect id="warning-zone" x="0" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WARNING %> opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="watch-zone" x="16.67%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WATCH %> opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="growth-zone" x="33.33%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::GROWTH %> opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="approval-zone" x="50%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::APPROVAL %> opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="ideal-zone" x="75%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::IDEAL %> opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="warning-zone" class="fill-warning" x="0" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="watch-zone" class="fill-watch" x="16.67%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="growth-zone" class="fill-growth" x="33.33%" y="0" width="16.67%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="approval-zone" class="fill-approval" x="50%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
<rect id="ideal-zone" class="fill-ideal" x="75%" y="0" width="25%" height="100%" opacity="0.2" filter="url(#inset-shadow)"/>
|
||||
|
||||
<rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black"/>
|
||||
</g>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
<svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%">
|
||||
<%= measure_graph_row_presenters.each_with_index do |presenter, index| %>
|
||||
<rect class="measure-row-bar" 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 %> fill=<%= presenter.bar_color %> />
|
||||
<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 %> />
|
||||
<% end %>
|
||||
</svg>
|
||||
</g>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
<h1><%= @school.name %></h1>
|
||||
|
||||
<div class="beige-bg px-6 py-4">
|
||||
<div class="fdr fjb fac">
|
||||
<h2 class="h1">Areas Of Interest</h2>
|
||||
<div class="fdr">
|
||||
<select class="ml-3 custom-select-lg" name="academic-year">
|
||||
<option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
|
||||
</select>
|
||||
<div class="fdr fjb fac">
|
||||
<h2 class="h1">Areas Of Interest</h2>
|
||||
<div class="fdr">
|
||||
<select class="ml-3 custom-select-lg" name="academic-year">
|
||||
<option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
|
||||
</select>
|
||||
|
||||
<select class="ml-3 custom-select-lg" name="district">
|
||||
<option value="<%= @district.slug %>" selected><%= @district.name %></option>
|
||||
</select>
|
||||
<select class="ml-3 custom-select-lg" name="district">
|
||||
<option value="<%= @district.slug %>" selected><%= @district.name %></option>
|
||||
</select>
|
||||
|
||||
<select class="ml-3 custom-select-lg" name="school">
|
||||
<option value="<%= @school.slug %>" selected><%= @school.name %></option>
|
||||
</select>
|
||||
</div>
|
||||
<select class="ml-3 custom-select-lg" name="school">
|
||||
<option value="<%= @school.slug %>" selected><%= @school.name %></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="bg-beige mt-4 p-5">
|
||||
|
||||
<div>
|
||||
<h2 class="h1 red">Distance from benchmark</h2>
|
||||
<p class="p">This graph shows how much a score is above or below the benchmark of any given scale.</p>
|
||||
<p class="body-large">This graph shows how much a score is above or below the benchmark of any given scale.</p>
|
||||
</div>
|
||||
|
||||
<%= render partial: "measure_bar_graph", locals: { measure_graph_row_presenters: @measure_graph_row_presenters}%>
|
||||
<%= render partial: "measure_bar_graph", locals: { measure_graph_row_presenters: @measure_graph_row_presenters } %>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ RSpec.describe MeasureGraphRowPresenter do
|
|||
it_behaves_like 'measure_name'
|
||||
|
||||
it('returns the correct color') do
|
||||
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::IDEAL
|
||||
expect(presenter.bar_color).to eq "fill-ideal"
|
||||
end
|
||||
|
||||
it('returns a bar width equal to the approval zone width plus the proportionate ideal zone width') do
|
||||
|
|
@ -51,7 +51,7 @@ RSpec.describe MeasureGraphRowPresenter do
|
|||
it_behaves_like 'measure_name'
|
||||
|
||||
it("returns the correct color") do
|
||||
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::APPROVAL
|
||||
expect(presenter.bar_color).to eq "fill-approval"
|
||||
end
|
||||
|
||||
it('returns a bar width equal to the proportionate approval zone width') do
|
||||
|
|
@ -69,7 +69,7 @@ RSpec.describe MeasureGraphRowPresenter do
|
|||
it_behaves_like 'measure_name'
|
||||
|
||||
it("returns the correct color") do
|
||||
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::GROWTH
|
||||
expect(presenter.bar_color).to eq "fill-growth"
|
||||
end
|
||||
|
||||
it('returns a bar width equal to the proportionate growth zone width') do
|
||||
|
|
@ -87,7 +87,7 @@ RSpec.describe MeasureGraphRowPresenter do
|
|||
it_behaves_like 'measure_name'
|
||||
|
||||
it("returns the correct color") do
|
||||
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::WATCH
|
||||
expect(presenter.bar_color).to eq "fill-watch"
|
||||
end
|
||||
|
||||
it('returns a bar width equal to the proportionate watch zone width plus the growth zone width') do
|
||||
|
|
@ -105,7 +105,7 @@ RSpec.describe MeasureGraphRowPresenter do
|
|||
it_behaves_like 'measure_name'
|
||||
|
||||
it("returns the correct color") do
|
||||
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::WARNING
|
||||
expect(presenter.bar_color).to eq "fill-warning"
|
||||
end
|
||||
|
||||
it('returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths') do
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue