jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(trafficChart): make chart more responsive

pull/3/head
alex 2016-02-05 13:26:45 +03:00
parent 7cac9a412c
commit a1848e3a07
2 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/pages/dashboard/trafficChart/trafficChart.html
View File

@ -1,5 +1,4 @@
<div class="channels-block" track-width="smallContainerWidth" min-width="640" <div class="channels-block">
ng-class="{'small-container': smallContainerWidth}">
<div class="chart-bg"></div> <div class="chart-bg"></div>
<div class="traffic-chart" id="trafficChart"> <div class="traffic-chart" id="trafficChart">

98
src/sass/theme/dashboard/_trafficChart.scss
View File

@ -133,46 +133,46 @@
} }
} }
@mixin doughnut-size($size) { //@mixin doughnut-size($size) {
.traffic-chart .canvas-holder { // .traffic-chart .canvas-holder {
width: $size; // width: $size;
height: $size; // height: $size;
canvas { // canvas {
width: $size; // width: $size;
height: $size; // height: $size;
} // }
} // }
} //}
@media (max-width: $resS) { //@media (max-width: $resS) {
@include doughnut-size(250px); // @include doughnut-size(250px);
.canvas-holder { // .canvas-holder {
float: none; // float: none;
} // }
.traffic-legend { // .traffic-legend {
display: block; // display: block;
padding: 10px 0 0; // padding: 10px 0 0;
width: 300px; // width: 300px;
} // }
ul.doughnut-legend { // ul.doughnut-legend {
padding-left: 20px; // padding-left: 20px;
li { // li {
&:nth-child(2n-1) { // &:nth-child(2n-1) {
float: left; // float: left;
} // }
} // }
} // }
.traffic-chart{ // .traffic-chart{
width: 100%; // width: 100%;
} // }
.canvas-holder{ // .canvas-holder{
display: block; // display: block;
margin: 0 auto; // margin: 0 auto;
} // }
.panel.medium-panel.traffic-panel{ // .panel.medium-panel.traffic-panel{
height: inherit; // height: inherit;
} // }
} //}
.traffic-chart canvas{ .traffic-chart canvas{
border: 10px solid rgba(0,0,0,0.0); border: 10px solid rgba(0,0,0,0.0);
@ -189,6 +189,22 @@
top: 60px; top: 60px;
} }
@media (max-width: $resMin) { @media (max-width: $resM) {
@include doughnut-size(200px); .channels-info{
display: block;
width: calc(100% - 88px);
margin-top: -65px;
margin-bottom: 10px;
}
.panel.medium-panel.traffic-panel{
height: auto;
}
.traffic-chart{
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg{
left: calc(50% - 90px);
}
} }