From d850674ff1d91f65ebb88f25ded9afb902dfeb0f Mon Sep 17 00:00:00 2001
From: rebuilt <memoryman51@hotmail.com>
Date: Tue, 2 Nov 2021 21:50:39 +0100
Subject: [PATCH] Style focus states, margin for logo, popover borders,
 accordions

---
 app/assets/stylesheets/bootstrap-overrides.scss        | 2 +-
 app/assets/stylesheets/navigation.scss                 | 5 +++++
 app/assets/stylesheets/sqm_application.scss            | 1 -
 app/views/dashboard/_subcategory_card.html.erb         | 2 +-
 app/views/layouts/home.html.erb                        | 2 +-
 app/views/layouts/sqm/_header.html.erb                 | 2 +-
 app/views/sqm_categories/_subcategory_section.html.erb | 2 +-
 7 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/bootstrap-overrides.scss b/app/assets/stylesheets/bootstrap-overrides.scss
index c0fcdc26..439e7c8b 100644
--- a/app/assets/stylesheets/bootstrap-overrides.scss
+++ b/app/assets/stylesheets/bootstrap-overrides.scss
@@ -41,7 +41,7 @@ $accordion-button-icon: url("data:image/svg+xml,<svg width='13' height='8' viewB
 $accordion-button-active-icon: url("data:image/svg+xml,<svg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.97266 0.875C6.62109 0.558594 6.09375 0.558594 5.77734 0.875L0.996094 5.65625C0.644531 6.00781 0.644531 6.53516 0.996094 6.85156L1.76953 7.66016C2.12109 7.97656 2.64844 7.97656 2.96484 7.66016L6.375 4.25L9.75 7.66016C10.0664 7.97656 10.6289 7.97656 10.9453 7.66016L11.7539 6.85156C12.0703 6.53516 12.0703 6.00781 11.7539 5.65625L6.97266 0.875Z' fill='#01788E'/> </svg>");
 $accordion-icon-width: 12px;
 
-$popover-border-color: transparent;
+$popover-border-color: $gray-2;
 $popover-border-radius: 4px;
 $popover-body-padding-x: map-get($spacers, 4);
 $popover-body-padding-y: map-get($spacers, 4);
diff --git a/app/assets/stylesheets/navigation.scss b/app/assets/stylesheets/navigation.scss
index cbf3dfae..5ae3acf2 100644
--- a/app/assets/stylesheets/navigation.scss
+++ b/app/assets/stylesheets/navigation.scss
@@ -1,6 +1,11 @@
 @import 'colors';
 @import 'fonts';
 
+a:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba($blue, 0.35);
+}
+
 .nav-tabs {
   margin-bottom: -1rem;
 
diff --git a/app/assets/stylesheets/sqm_application.scss b/app/assets/stylesheets/sqm_application.scss
index 59465a4f..626cf922 100644
--- a/app/assets/stylesheets/sqm_application.scss
+++ b/app/assets/stylesheets/sqm_application.scss
@@ -47,7 +47,6 @@
   flex-basis: 33%;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
 }
 
diff --git a/app/views/dashboard/_subcategory_card.html.erb b/app/views/dashboard/_subcategory_card.html.erb
index db95772a..a9381ed4 100644
--- a/app/views/dashboard/_subcategory_card.html.erb
+++ b/app/views/dashboard/_subcategory_card.html.erb
@@ -1,5 +1,5 @@
 <div class="subcategory-card__benchmark-item">
-  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %> data-bs-content="This subcategory is not displayed due to limited availability of school admin data and/or low survey response rates.">
+  <svg class="subcategory-card__circle" width="24" height="24" xmlns="http://www.w3.org/2000/svg" <%= "data-bs-toggle=popover" if subcategory_card.insufficient_data? %>  data-bs-placement="top" data-bs-content="This subcategory is not displayed due to limited availability of school admin data and/or low survey response rates.">
     <use class="harvey-ball harvey-ball--<%= subcategory_card.color %>" xlink:href="#<%= subcategory_card.harvey_ball_icon %>"></use>
   </svg>
 
diff --git a/app/views/layouts/home.html.erb b/app/views/layouts/home.html.erb
index 8d0f88ab..46f5f9b9 100644
--- a/app/views/layouts/home.html.erb
+++ b/app/views/layouts/home.html.erb
@@ -13,7 +13,7 @@
   <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">
-        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56 me-7'), welcome_path %>
+        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56'), welcome_path, class: 'me-7' %>
       </div>
     </div>
   </div>
diff --git a/app/views/layouts/sqm/_header.html.erb b/app/views/layouts/sqm/_header.html.erb
index d4183c4e..7335e27a 100644
--- a/app/views/layouts/sqm/_header.html.erb
+++ b/app/views/layouts/sqm/_header.html.erb
@@ -2,7 +2,7 @@
   <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">
-        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56 me-7'), welcome_path %>
+        <%= link_to image_tag('sqm_logo.png', alt: 'MCIEA School Quality Measures Dashboard', class: 'height-56'), welcome_path, class: 'me-7' %>
         <a class="sub-header-3 link me-4 <%= link_weight(path: 'dashboard') %>" href="<%= link_to_dashboard(district: @district, school: @school, academic_year: @academic_year) %>">Dashboard</a>
         <a class="sub-header-3 link <%= link_weight(path: 'browse') %>" href="<%= link_to_browse(district: @district, school: @school, academic_year: @academic_year) %>">Browse</a>
       </div>
diff --git a/app/views/sqm_categories/_subcategory_section.html.erb b/app/views/sqm_categories/_subcategory_section.html.erb
index bd4d4b77..6382aa04 100644
--- a/app/views/sqm_categories/_subcategory_section.html.erb
+++ b/app/views/sqm_categories/_subcategory_section.html.erb
@@ -16,7 +16,7 @@
     <div class="arrow"></div>
   </div>
 
-  <div class="measure-card d-flex justify-space-between p-7">
+  <div class="measure-card d-flex p-7">
     <% subcategory.measure_presenters.each do |measure_presenter| %>
       <%= render partial: "measures_section", locals: { measure_presenter: measure_presenter } %>
     <% end %>