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

Make measure name responsive

Browse source
This commit is contained in:
Nelson Jovel 2021-12-15 18:22:43 +01:00
parent 1f07b821b3
commit 6931428d8f
2 changed files with 38 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/assets/stylesheets/overview.scss
View file

@ -92,3 +92,27 @@
border-radius: 50%;
width: 20px;
}
@media only screen and (min-width: 768px){
.measure-row-label {
width: 170px;
}
}
@media only screen and (min-width: 1000px){
.measure-row-label {
width: 200px;
}
}
@media only screen and (min-width: 1200px){
.measure-row-label {
width: 250px;
}
}
@media only screen and (min-width: 1400px){
.measure-row-label {
width: 500px;
}
}

25
app/views/overview/_variance_chart.html.erb
View file

@ -66,28 +66,31 @@
<svg id=measure-row-limited-availability-indicator x="0" y="<%= heading_gutter %>">
<% displayed_presenters.each_with_index do |presenter, index| %>
<% if presenter.show_partial_data_indicator? %>
<use xlink:href="/fontawesome-free/sprites/solid.svg#circle-exclamation" width="<%= partial_data_indicator_size %>"
<foreignObject
width="<%= partial_data_indicator_size %>"
height="<%= partial_data_indicator_size %>"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>."
x="<%= partial_data_indicator_size / 2 %>"
y="<%= index * measure_row_height + measure_row_height / 2 - partial_data_indicator_size / 2 %>">
</use>
<i class="fas fa-exclamation-circle"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-content="The following sources are not included in this measure due to insufficient data: <%= presenter.partial_data_sources.join(' and ') %>." ></i>
</foreignObject>
<% end %>
<% end %>
</svg>
<svg id="measure-row-labels" x="0" y=<%= heading_gutter %>>
<% displayed_presenters.each_with_index do |presenter, index| %>
<text
class="font-cabin"
<foreignObject
x="<%= availability_indicator_percentage %>%"
y="<%= index * measure_row_height + measure_row_height / 2 %>"
y="<%= index * measure_row_height + measure_row_height / 4 %>"
dominant-baseline="middle"
data-variance-row-label
>
<%= presenter.measure_name %>
</text>
width="550"
height="200">
<p class="measure-row-label" xmlns="http://www.w3.org/1999/xhtml">
<%= presenter.measure_name %>
</p>
</foreignObject>
<% end %>
<% if displayed_presenters.none? %>