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 typography and color styles

Browse source
This commit is contained in:
Alex Basson 2021-09-23 14:03:37 -04:00
parent 6814e213c7
commit 587cbbdd3d
8 changed files with 110 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/assets/stylesheets/application.scss
View file

@ -4,9 +4,10 @@ $spacers: (
1: ($spacer * .25), 1: ($spacer * .25),
2: ($spacer * .5), 2: ($spacer * .5),
3: $spacer, 3: $spacer,
4: ($spacer * 1.5), 4: ($spacer * 2),
5: ($spacer * 3), 5: ($spacer * 3),
6: ($spacer * 5) 6: ($spacer * 4),
7: ($spacer * 5),
); );
@import "bootstrap"; @import "bootstrap";

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

@ -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; $beige: #EFEBE1;
$warning: #FF73C0;
$watch: #F096AD;
$growth: #E0BA9A;
$approval: #D0DD86;
$ideal: #C0FF73;
.red { .red {
color: $red; color: $red;
} }
.beige-bg { .bg-beige {
background-color: $beige; background-color: $beige;
} }
.white-bg { .bg-white {
background-color: white; background-color: $white;
}
.fill-warning {
fill: $warning;
}
.fill-watch {
fill: $watch;
}
.fill-growth {
fill: $growth;
}
.fill-approval {
fill: $approval;
}
.fill-ideal {
fill: $ideal;
} }

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

@ -25,9 +25,41 @@
font-size: 40px; font-size: 40px;
} }
.p { .h2 {
@extend .font-cabin; @extend .font-bitter;
@extend .weight-400; @extend .weight-700;
font-size: 17px; 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;
}

9
app/models/measure_graph_parameters.rb
View file

@ -1,9 +0,0 @@
module MeasureGraphParameters
module ZoneColor
WARNING = "#FF73C0"
WATCH = "#F096AD"
GROWTH = "#E0BA9A"
APPROVAL = "#D0DD86"
IDEAL = "#C0FF73"
end
end

13
app/presenters/measure_graph_row_presenter.rb
View file

@ -9,18 +9,7 @@ class MeasureGraphRowPresenter
end end
def bar_color def bar_color
case zone.type "fill-#{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
end end
def bar_width def bar_width

14
app/views/dashboard/_measure_bar_graph.erb
View file

@ -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 %> <% heading_gutter = 30 %>
<% footer_gutter = 50 %> <% footer_gutter = 50 %>
@ -35,11 +35,11 @@
</g> </g>
<g id="scale-background" transform="translate(0, <%= heading_gutter %>)"> <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="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" x="16.67%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::WATCH %> 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" x="33.33%" y="0" width="16.67%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::GROWTH %> 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" x="50%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::APPROVAL %> 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" x="75%" y="0" width="25%" height="100%" fill=<%= MeasureGraphParameters::ZoneColor::IDEAL %> 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"/> <rect id="key-benchmark" x="50%" transform="translate(-1, 0)" y="0" width="2" height="100%" fill="black"/>
</g> </g>
@ -54,7 +54,7 @@
<svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%"> <svg id="measure-row-bars" x="25%" y=<%= heading_gutter %> width="75%">
<%= measure_graph_row_presenters.each_with_index do |presenter, index| %> <%= 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 %> <% end %>
</svg> </svg>
</g> </g>

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

@ -1,28 +1,29 @@
<h1><%= @school.name %></h1> <h1><%= @school.name %></h1>
<div class="beige-bg px-6 py-4"> <div class="fdr fjb fac">
<div class="fdr fjb fac"> <h2 class="h1">Areas Of Interest</h2>
<h2 class="h1">Areas Of Interest</h2> <div class="fdr">
<div class="fdr"> <select class="ml-3 custom-select-lg" name="academic-year">
<select class="ml-3 custom-select-lg" name="academic-year"> <option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option>
<option value="<%= @academic_year %>" selected><%= format_academic_year(@academic_year) %></option> </select>
</select>
<select class="ml-3 custom-select-lg" name="district"> <select class="ml-3 custom-select-lg" name="district">
<option value="<%= @district.slug %>" selected><%= @district.name %></option> <option value="<%= @district.slug %>" selected><%= @district.name %></option>
</select> </select>
<select class="ml-3 custom-select-lg" name="school"> <select class="ml-3 custom-select-lg" name="school">
<option value="<%= @school.slug %>" selected><%= @school.name %></option> <option value="<%= @school.slug %>" selected><%= @school.name %></option>
</select> </select>
</div>
</div> </div>
</div>
<div class="mt-4"> <div class="bg-beige mt-4 p-5">
<div>
<h2 class="h1 red">Distance from benchmark</h2> <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> </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> </div>

10
spec/presenters/measure_graph_row_presenter_spec.rb
View file

@ -33,7 +33,7 @@ RSpec.describe MeasureGraphRowPresenter do
it_behaves_like 'measure_name' it_behaves_like 'measure_name'
it('returns the correct color') do it('returns the correct color') do
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::IDEAL expect(presenter.bar_color).to eq "fill-ideal"
end end
it('returns a bar width equal to the approval zone width plus the proportionate ideal zone width') do 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_behaves_like 'measure_name'
it("returns the correct color") do it("returns the correct color") do
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::APPROVAL expect(presenter.bar_color).to eq "fill-approval"
end end
it('returns a bar width equal to the proportionate approval zone width') do 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_behaves_like 'measure_name'
it("returns the correct color") do it("returns the correct color") do
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::GROWTH expect(presenter.bar_color).to eq "fill-growth"
end end
it('returns a bar width equal to the proportionate growth zone width') do 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_behaves_like 'measure_name'
it("returns the correct color") do it("returns the correct color") do
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::WATCH expect(presenter.bar_color).to eq "fill-watch"
end end
it('returns a bar width equal to the proportionate watch zone width plus the growth zone width') do 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_behaves_like 'measure_name'
it("returns the correct color") do it("returns the correct color") do
expect(presenter.bar_color).to eq MeasureGraphParameters::ZoneColor::WARNING expect(presenter.bar_color).to eq "fill-warning"
end end
it('returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths') do it('returns a bar width equal to the proportionate warning zone width plus the watch & growth zone widths') do