mirror of
https://github.com/openSUSE/osem.git
synced 2026-08-13 19:54:02 +00:00
Fixes #1195 Made the charts responsive for small screens
This commit is contained in:
parent
f9d8c9715c
commit
f4f05b4e9b
2 changed files with 36 additions and 1 deletions
|
|
@ -1,6 +1,23 @@
|
|||
.text-center
|
||||
%h4 #{title}
|
||||
%canvas.doughnut_chart{ 'data-chart' => data.to_json }
|
||||
%canvas.doughnut_chart{ id: "dough_#{title}", 'data-chart' => data.to_json }
|
||||
- if data
|
||||
- data.each do |key, value|
|
||||
%span{ 'style' => "border-bottom: 3px solid #{value['color']}" } #{key}: #{value['value']}
|
||||
|
||||
:javascript
|
||||
$(document).ready( function(){
|
||||
|
||||
var d = $("#dough_#{title}");
|
||||
var dt = d.get(0).getContext('2d');
|
||||
|
||||
$(window).resize( respondCanvas );
|
||||
|
||||
function respondCanvas(){
|
||||
dt.canvas.width = 150;
|
||||
dt.canvas.height = 150;
|
||||
}
|
||||
|
||||
respondCanvas();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -27,3 +27,21 @@
|
|||
%span{ 'style' => "border-bottom: 3px solid #{conference[:color]};", 'data-chart' => "#{name}" }
|
||||
%input{ 'type' => 'checkbox', 'name' => "#{conference[:short_title]}" }
|
||||
#{conference[:short_title]}
|
||||
|
||||
:javascript
|
||||
$(document).ready( function(){
|
||||
|
||||
var c = $("#line_chart_#{name}");
|
||||
var ct = c.get(0).getContext('2d');
|
||||
var container = $(c).parent();
|
||||
|
||||
$(window).resize( respondCanvas );
|
||||
|
||||
function respondCanvas(){
|
||||
c.attr('width', $(container).width() );
|
||||
c.attr('height', $(container).height() );
|
||||
}
|
||||
|
||||
respondCanvas();
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue