gabehf/sqm-dashboards
1
0
Fork 0
mirror of https://github.com/edcommonwealth/sqm-dashboards.git synced 2026-03-11 08:21:12 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change implementation of div pointer.

Browse source
This commit is contained in:
rebuilt 2021-10-21 21:54:35 +02:00
parent 28f32d072f
commit c423fcc014
2 changed files with 32 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

51
app/assets/stylesheets/sqm_application.scss
View file

@ -7,7 +7,7 @@
@import "dashboard";
@import "navigation";
@import "buttons";
@import "scss/fontawesome.scss" ;
@import "scss/fontawesome.scss";
@import "scss/solid.scss";
.height-56 {
@ -25,7 +25,6 @@
.subcategory-section {
@extend .mt-5;
@extend .bg-color-white;
@extend .p-7;
box-shadow: 0 0 3px rgba($black, 0.25);
}
@ -57,34 +56,28 @@
box-shadow: 0px -1px 0px $gray-2;
}
.arrow-up:before
{
content: "";
.arrow-container {
position: relative;
top: -26px;
left: 183px;
border-width: 2.8em;
border-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: $gray-2;
top: -50px;
left: 220px;
}
.arrow-up:after
{
content: "";
position: relative;
top: -24px;
left: 90px;
border-width: 3em;
border-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: $gray-3;
.arrow {
background-color: $gray-3;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
width: 96px;
height: 48px;
position: absolute;
top: 2px;
left: 1px;
}
.arrow-shadow {
background-color: $gray-2;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
width: 98px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}

14
app/views/sqm_categories/show.html.erb
View file

@ -15,6 +15,8 @@
<% @category.subcategories.each do |subcategory| %>
<section class="subcategory-section">
<div class="p-7">
<h2 class="sub-header-2 font-bitter mb-7"><%= subcategory.name %></h2>
<div class="d-flex justify-content-between align-items-end">
@ -23,17 +25,21 @@
</div>
<h2 class="body-large mx-7"><%= subcategory.description %></h2>
</div>
</div>
<div class="arrow-up mt-6"></div>
<div class="arrow-container mt-7">
<div class="arrow-shadow"></div>
<div class="arrow"></div>
</div>
<div class="measure-card d-flex px-7 pt-10 pb-7 mt-4 ">
<div class="measure-card d-flex justify-space-between p-7">
<% subcategory.measure_presenters.each do |measure_presenter| %>
<div class="measure-presenter d-flex flex-column justify-content-between align-items-center px-5">
<div class="measure-presenter d-flex flex-column justify-content-between align-items-center mx-4">
<h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
<div>
<%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'weight-700' } %>
</div>
<p class="measure-description body-small mt-5 mb-4 "><%= measure_presenter.description %></p>
<p class="measure-description body-small mt-5 mb-4"><%= measure_presenter.description %></p>
</div>
<% end %>
</div>