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

refactor(trafficChart): moving elements by color

pull/3/head
alex 2016-02-09 17:25:10 +03:00
parent da9e9893e7
commit 5959a7e760
4 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/dashboard/dashboard.html
View File

@ -1,13 +1,13 @@
<dashboard-pie-chart></dashboard-pie-chart>
<div class="row">
<div class="col-lg-7 col-md-12 col-sm-12"
<div class="col-lg-6 col-md-12 col-sm-12"
ba-panel
ba-panel-title="Acquisition Channels"
ba-panel-class="medium-panel traffic-panel">
<traffic-chart></traffic-chart>
</div>
<div class="col-lg-5 col-md-12 col-sm-12"
<div class="col-lg-6 col-md-12 col-sm-12"
ba-panel
ba-panel-title="Users by Country"
ba-panel-class="medium-panel">

8
src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
View File

@ -25,14 +25,14 @@
},
{
value: 1000,
color: layoutColors.info,
highlight: layoutColors.infoBg,
color: layoutColors.success,
highlight: layoutColors.successBg,
label: 'Direct Traffic'
},
{
value: 1200,
color: layoutColors.success,
highlight: layoutColors.successBg,
color: layoutColors.info,
highlight: layoutColors.infoBg,
label: 'Referral Traffic'
},
{

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

@ -14,9 +14,30 @@
<div class="channels-info">
<div>
<div class="channels-info-item">
<div class="legend-color default"></div>
<p>Ad Campaigns<span class="channel-number">+87%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color warning"></div>
<p>Ohter<span class="channel-number">+17%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color info"></div>
<p>Direct Traffic<span class="channel-number">+70%</span></p>
<p>Referral Traffic<span class="channel-number">+70%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
@ -24,6 +45,16 @@
</div>
</div>
<div class="channels-info-item">
<div class="legend-color success"></div>
<p>Direct Traffic<span class="channel-number">+38%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color primary"></div>
<p>Search engines<span class="channel-number">+22%</span></p>
@ -34,35 +65,8 @@
</div>
</div>
<div class="channels-info-item">
<div class="legend-color default"></div>
<p>Ad Campaigns<span class="channel-number">+87%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color success"></div>
<p>Referral<span class="channel-number">+38%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color warning"></div>
<p>Ohter<span class="channel-number">+17%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
</div>
</div>
</div>
</div>
</div>

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

@ -193,7 +193,7 @@
}
@media (max-width: $resM) {
.channels-info{
div.channels-info{
display: block;
width: calc(100% - 88px);
margin-top: -65px;
@ -211,6 +211,21 @@
left: calc(50% - 90px);
}
}
@media (max-width: 1465px) and (min-width: 1199px){
.channels-info{
display: none;
}
.traffic-chart{
position: inherit;
float: none;
margin: 0 auto;
}
.chart-bg{
left: calc(50% - 90px);
}
}
body.badmin-transparent{
.traffic-chart canvas{
border: 10px solid rgba(0,0,0,0.35);