diff --git a/app/assets/stylesheets/colors.scss b/app/assets/stylesheets/colors.scss index e3422d17..655f7a66 100644 --- a/app/assets/stylesheets/colors.scss +++ b/app/assets/stylesheets/colors.scss @@ -54,6 +54,22 @@ $ideal: #C0FF73; background-color: $gray-4; } +.bg-warning { + background-color: $warning; +} + +.bg-watch { + background-color: $watch; +} +.bg-growth { + background-color: $growth; +} +.bg-approval { + background-color: $approval; +} +.bg-ideal { + background-color: $ideal; +} .fill-warning { fill: $warning; } diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index eb20f70c..7d5cf2c2 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -1,4 +1,6 @@ @import 'fonts'; +@import 'bootstrap'; +@import 'fonts'; .graph-header { @extend .font-bitter; @@ -9,26 +11,42 @@ font-family: 'Cabin', sans-serif; } +.icon-heart { + width: 28px; + height: 32px; +} + .category-card { flex-basis: 20%; - align-items: center; - justify-content: space-between; - height: 600px; + height: 750px; } .category-card__title { - flex-basis: 20%; + height: 13%; } .category-card__description { - flex-basis: 20%; + height: 40%; + @extend .font-cabin; + @extend .weight-400; +} + +.category-card__button { + height: 10%; +} + +.category-card__icon { + height: 7%; +} + +.category-card__subcategory { + height: 30%; } .subcategory-card { - flex-basis: 20%; border: 1px solid #CECECE; background-color: $gray-4; - width: 90%; + min-width: 95%; margin: auto; padding: 8px; border: 1px solid #CECECE; @@ -40,12 +58,22 @@ } .subcategory-card__benchmark-item { + display: flex; align-items: center; + justify-content: flex-start; + @extend .my-3; } -.subcategory-card__circle-container { - flex: 0 0 50px; - padding: 0; +.subcategory-card__circle { + min-width: 26px; + min-height: 26px; + margin-right: 4px; + border-radius: 50%; + height: 26px; + width: 26px; + text-align: center; + @extend .font-cabin; + @extend .weight-400; } .subcategory-card__benchmark-label { diff --git a/app/presenters/category_presenter.rb b/app/presenters/category_presenter.rb index adda3a27..f313618b 100644 --- a/app/presenters/category_presenter.rb +++ b/app/presenters/category_presenter.rb @@ -13,12 +13,27 @@ class CategoryPresenter @category.description end + def icon + case name + when 'Teachers & Leadership' + 'icon-apple' + when 'School Culture' + 'icon-school' + when 'Resources' + 'icon-people' + when 'Academic Learning' + 'icon-mortar-board' + else 'Citizenship & Wellbeing' + 'icon-heart' + end + end + def subcategories @category.subcategories.map do |subcategory| SubcategoryPresenter.new( subcategory: subcategory, academic_year: @academic_year, - school: @school, + school: @school ) end end diff --git a/app/presenters/subcategory_card_presenter.rb b/app/presenters/subcategory_card_presenter.rb index 4540dbd8..aa73cc7b 100644 --- a/app/presenters/subcategory_card_presenter.rb +++ b/app/presenters/subcategory_card_presenter.rb @@ -10,17 +10,8 @@ class SubcategoryCardPresenter abbreviations[zone.type] end - def svg - - end - - def offset - return 40 unless abbreviation.length > 1 - 27 - end - def color - "fill-#{zone.type}" + "bg-#{zone.type}" end private diff --git a/app/views/dashboard/_quality_framework_indicators.erb b/app/views/dashboard/_quality_framework_indicators.erb index ff68ac07..69129454 100644 --- a/app/views/dashboard/_quality_framework_indicators.erb +++ b/app/views/dashboard/_quality_framework_indicators.erb @@ -1,28 +1,57 @@ -
-

School Quality Framework Indicators

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

School Quality Framework Indicators

+ +
<% category_presenters.each do |category_presenter| %> -
-

<%= category_presenter.name %>

+
+ +
+ + + +
+ +

<%= category_presenter.name %>

+

<%= category_presenter.description %>

-
-
- <% category_presenter.subcategories.each do |subcategory | %> - <% presenter = subcategory.subcategory_card_presenter %> -
-
- - - <%= presenter.abbreviation %> - -
-
<%= subcategory.name %>
+ +
+
+
+ <% category_presenter.subcategories.each do |subcategory | %> + <% presenter = subcategory.subcategory_card_presenter %> +
+
<%= presenter.abbreviation%>
+
<%= subcategory.name %>
- <% end %> + <% end %> +
-
+ +
<% end %> diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb index 3462197a..d1864b22 100644 --- a/app/views/dashboard/index.html.erb +++ b/app/views/dashboard/index.html.erb @@ -1,13 +1,13 @@ <% content_for :navigation do %> -

Areas Of Interest

+

Areas Of Interest

<% end %>
-

Distance from benchmark

+

Distance from benchmark

<%= render partial: "variance_graph", locals: { presenters: @measure_graph_row_presenters} %> +
<%= render partial: "quality_framework_indicators", locals: { category_presenters: @category_presenters } %> -
diff --git a/spec/presenters/category_presenter_spec.rb b/spec/presenters/category_presenter_spec.rb index 415f5b57..511df577 100644 --- a/spec/presenters/category_presenter_spec.rb +++ b/spec/presenters/category_presenter_spec.rb @@ -9,6 +9,31 @@ describe CategoryPresenter do return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new) end + let(:teachers_and_leadership_presenter) do + category = SqmCategory.find_by_name("Teachers & Leadership") + return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new) + end + + let(:school_culture_presenter) do + category = SqmCategory.find_by_name("School Culture") + return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new) + end + + let(:resources_presenter) do + category = SqmCategory.find_by_name("Resources") + return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new) + end + + let(:academic_learning_presenter) do + category = SqmCategory.find_by_name("Academic Learning") + return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new) + end + + let(:citizenship_and_wellbeing_presenter) do + category = SqmCategory.find_by_name("Citizenship & Wellbeing") + return CategoryPresenter.new(category: category, academic_year: AcademicYear.new, school: School.new) + end + it 'returns the name and description of the category' do expect(category_presenter.name).to eq 'Some Category' expect(category_presenter.description).to eq 'A description for some Category' @@ -17,4 +42,14 @@ describe CategoryPresenter do it 'maps subcategories to subcategory presenters' do expect(category_presenter.subcategories.map(&:name)).to eq ['A subcategory', 'Another subcategory'] end + + it 'returns the correct icon for the given category' do + expect(teachers_and_leadership_presenter.icon).to eq 'icon-apple' + expect(school_culture_presenter.icon).to eq 'icon-school' + expect(resources_presenter.icon).to eq 'icon-people' + expect(academic_learning_presenter.icon).to eq 'icon-mortar-board' + expect(citizenship_and_wellbeing_presenter.icon).to eq 'icon-heart' + + end + end diff --git a/spec/presenters/subcategory_card_presenter_spec.rb b/spec/presenters/subcategory_card_presenter_spec.rb index 4bf004ea..5ee875cb 100644 --- a/spec/presenters/subcategory_card_presenter_spec.rb +++ b/spec/presenters/subcategory_card_presenter_spec.rb @@ -19,7 +19,7 @@ describe SubcategoryCardPresenter do end it 'returns the color class of the zone' do - expect(subcategory_card_presenter.color).to eq "fill-warning" + expect(subcategory_card_presenter.color).to eq "bg-warning" end end @@ -30,7 +30,7 @@ describe SubcategoryCardPresenter do end it 'returns the color class of the zone' do - expect(subcategory_card_presenter.color).to eq "fill-watch" + expect(subcategory_card_presenter.color).to eq "bg-watch" end end @@ -41,7 +41,7 @@ describe SubcategoryCardPresenter do end it 'returns the color class of the zone' do - expect(subcategory_card_presenter.color).to eq "fill-growth" + expect(subcategory_card_presenter.color).to eq "bg-growth" end end @@ -52,7 +52,7 @@ describe SubcategoryCardPresenter do end it 'returns the color class of the zone' do - expect(subcategory_card_presenter.color).to eq "fill-approval" + expect(subcategory_card_presenter.color).to eq "bg-approval" end end @@ -63,7 +63,7 @@ describe SubcategoryCardPresenter do end it 'returns the color class of the zone' do - expect(subcategory_card_presenter.color).to eq "fill-ideal" + expect(subcategory_card_presenter.color).to eq "bg-ideal" end end end