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

fix traffic chart layout while resize

pull/3/head
KostyaDanovsky 2015-11-23 17:05:06 +03:00
parent 79a36e93c6
commit 1e973ae137
2 changed files with 95 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/app/pages/dashboard/widgets/trafficChart/_trafficChart.scss
View File

@ -4,12 +4,12 @@
} }
.channels-info { .channels-info {
width: 100%; display: inline-block;
float: left; width: calc(100% - 500px);
overflow: hidden; }
margin-top: -11px; .small-container {
& > div { .channels-info {
padding: 0 0 0 540px; display: none;
} }
} }
@ -22,18 +22,18 @@
.traffic-chart { .traffic-chart {
width: 500px; width: 500px;
margin-left: -100%;
position: relative; position: relative;
min-height: 300px; min-height: 300px;
float: left; float: left;
.canvas-holder { }
width: 300px;
height: 300px; .traffic-legend {
position: relative; display: inline-block;
} padding: 70px 0 0 10px;
ul.doughnut-legend { width: 160px;
padding: 0 0 0 350px; }
margin: -250px 0 0 0;
ul.doughnut-legend {
li { li {
list-style: none; list-style: none;
font-size: 12px; font-size: 12px;
@ -43,6 +43,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 120px;
span { span {
float: left; float: left;
display: inline-block; display: inline-block;
@ -51,7 +52,14 @@
margin-right: 10px; margin-right: 10px;
} }
} }
} }
.canvas-holder {
display: inline-block;
width: 300px;
height: 300px;
position: relative;
float: left;
} }
.traffic-text { .traffic-text {
@ -83,28 +91,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
@mixin doughnut-center() { @mixin doughnut-size($size) {
.traffic-chart {
ul.doughnut-legend {
padding: 0;
margin: 40px 0 0 0;
li {
width: 50%;
float: left;
}
}
.canvas-holder {
margin: 0 auto;
}
}
}
@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
@include doughnut-center();
}
@media (max-width: 380px) {
$size: 250px;
.traffic-chart .canvas-holder { .traffic-chart .canvas-holder {
width: $size; width: $size;
height: $size; height: $size;
@ -115,13 +102,26 @@
} }
} }
@media (max-width: 1800px) { @media (max-width: $resS) {
.channels-info { @include doughnut-size(250px);
display: none; .canvas-holder {
}
.traffic-chart {
width: auto;
margin: 0 0 20px 0;
float: none; float: none;
} }
.traffic-legend {
display: block;
padding: 10px 0 0;
width: 300px;
}
ul.doughnut-legend {
padding-left: 20px;
li {
&:nth-child(2n-1) {
float: left;
}
}
}
}
@media (max-width: $resMin) {
@include doughnut-size(200px);
} }

25
src/app/pages/dashboard/widgets/trafficChart/trafficChart.html
View File

@ -1,4 +1,16 @@
<div class="channels-block"> <div class="channels-block" track-width="smallContainerWidth" min-width="640"
ng-class="{'small-container': smallContainerWidth}">
<div class="traffic-chart" id="trafficChart">
<div class="canvas-holder">
<canvas id="chart-area" width="300" height="300"></canvas>
<div class="traffic-text">
1,900,128
<span>Views Total</span>
</div>
</div>
<div class="traffic-legend"></div>
</div>
<div class="channels-info"> <div class="channels-info">
<div> <div>
@ -34,16 +46,5 @@
</div> </div>
</div> </div>
<div class="traffic-chart" id="trafficChart">
<div class="canvas-holder">
<canvas id="chart-area" width="300" height="300"></canvas>
<div class="traffic-text">
1,900,128
<span>Views Total</span>
</div>
</div>
<div class="traffic-legend"></div>
</div>
</div> </div>