diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0fed07c3..65cff9b2 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -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"; diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss index 6f6c1e2f..f9a6a72a 100644 --- a/app/assets/stylesheets/colors.scss +++ b/app/assets/stylesheets/colors.scss @@ -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; } diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index ee41e459..b6190577 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -25,9 +25,41 @@ font-size: 40px; } -.p { +.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: 17px; + font-size: 14px; + line-height: 1.3; } +.link { + @extend .font-cabin; + @extend .weight-600; + font-size: 16px; + color: $blue; +} diff --git a/app/models/measure_graph_parameters.rb b/app/models/measure_graph_parameters.rb deleted file mode 100644 index 4766ae3a..00000000 --- a/app/models/measure_graph_parameters.rb +++ /dev/null @@ -1,9 +0,0 @@ -module MeasureGraphParameters - module ZoneColor - WARNING = "#FF73C0" - WATCH = "#F096AD" - GROWTH = "#E0BA9A" - APPROVAL = "#D0DD86" - IDEAL = "#C0FF73" - end -end diff --git a/app/presenters/measure_graph_row_presenter.rb b/app/presenters/measure_graph_row_presenter.rb index f354e619..cfba961d 100644 --- a/app/presenters/measure_graph_row_presenter.rb +++ b/app/presenters/measure_graph_row_presenter.rb @@ -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 diff --git a/app/views/dashboard/_measure_bar_graph.erb b/app/views/dashboard/_measure_bar_graph.erb index 74adf4cd..e2dd0631 100644 --- a/app/views/dashboard/_measure_bar_graph.erb +++ b/app/views/dashboard/_measure_bar_graph.erb @@ -1,4 +1,4 @@ -
+
<% heading_gutter = 30 %> <% footer_gutter = 50 %> @@ -35,11 +35,11 @@ - opacity="0.2" filter="url(#inset-shadow)"/> - opacity="0.2" filter="url(#inset-shadow)"/> - opacity="0.2" filter="url(#inset-shadow)"/> - opacity="0.2" filter="url(#inset-shadow)"/> - opacity="0.2" filter="url(#inset-shadow)"/> + + + + + @@ -54,7 +54,7 @@ width="75%"> <%= measure_graph_row_presenters.each_with_index do |presenter, index| %> - fill=<%= presenter.bar_color %> /> + /> <% end %> diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb index 348ce773..8881effa 100644 --- a/app/views/dashboard/index.html.erb +++ b/app/views/dashboard/index.html.erb @@ -1,28 +1,29 @@

<%= @school.name %>

-
-
-

Areas Of Interest

-
- +
+

Areas Of Interest

+
+ - + - -
+
+
+ +
-
+

Distance from benchmark

-

This graph shows how much a score is above or below the benchmark of any given scale.

+

This graph shows how much a score is above or below the benchmark of any given scale.

- <%= 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 } %>
diff --git a/spec/presenters/measure_graph_row_presenter_spec.rb b/spec/presenters/measure_graph_row_presenter_spec.rb index 79f1e934..bb5e75de 100644 --- a/spec/presenters/measure_graph_row_presenter_spec.rb +++ b/spec/presenters/measure_graph_row_presenter_spec.rb @@ -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