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

Style _gauge_graph

Browse source
This commit is contained in:
rebuilt 2021-10-19 21:06:00 +02:00
parent 382f20fcfa
commit baec96e7d1
3 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,6 +39,11 @@
height: auto;
}
.gauge-title {
margin-top: -1.5em;
margin-bottom: 0;
}
.measure-presenter {
flex-basis: 33%;
}

15
app/views/sqm_categories/_gauge_graph.html.erb
View file

@ -1,3 +1,4 @@
<div class="d-flex flex-column align-items-center">
<svg
viewBox="<%= viewbox.x %> <%= viewbox.y %> <%= viewbox.width %> <%= viewbox.height %>"
class="<%= gauge_class %>"
@ -13,15 +14,6 @@
stroke="none"
/>
<text
class="gauge-title <%= font_class %> fill-black"
x="<%= arc_center.x %>"
y="<%= arc_center.y - 10 %>"
text-anchor="middle"
dominant-baseline="middle"
>
<%= gauge.title %>
</text>
<path
class="gauge-outline stroke-gray-2"
@ -48,8 +40,11 @@
d="<%= move_to(point: indicator_tip) %>
<%= draw_line_to(point: indicator_right_corner) %>
<%= draw_line_to(point: indicator_left_corner) %>
<%= draw_line_to(point: indicator_tip) %>"
<%= draw_line_to(point: indicator_tip) %>"
transform="rotate(<%= rotation_angle_for(percentage: gauge.key_benchmark_percentage) %> <%= arc_center.x %> <%= arc_center.y %>)"
stroke="none"
/>
</svg>
<p class="gauge-title <%= font_class %> fill-black"><%= gauge.title %></p>
</div>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After

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

@ -19,7 +19,7 @@
<div class="d-flex justify-space-between align-items-end">
<div>
<%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'font-bitter' } %>
<%= render partial: "gauge_graph", locals: { gauge: subcategory.gauge_presenter, gauge_class: 'gauge-graph-lg', font_class: 'sub-header-3' } %>
</div>
<h2 class="body-large mx-7"><%= subcategory.description %></h2>
</div>
@ -31,7 +31,7 @@
<div class="measure-presenter d-flex flex-column justify-space-between align-items-center px-5">
<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: 'font-cabin' } %>
<%= 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>
</div>