// fix anime dashboard loading

This commit is contained in:
Kevin Granger
2013-09-02 19:05:34 +02:00
parent 11cd88cf63
commit 2f5054cb92
3 changed files with 46 additions and 13 deletions
File diff suppressed because one or more lines are too long
+38 -5
View File
@@ -1053,6 +1053,7 @@ fieldset > .row
margin: 4px -16px
dl
margin: 0
min-height: 120px
text-align: center
background-color: white
padding: 10px
@@ -1093,10 +1094,7 @@ fieldset > .row
.data_value
span, .dash_trend
+transition-property(opacity)
+transition-duration(0.6s)
+transition-timing-function(ease-in)
+opacity(1)
@extend .data_loading
.loading
.data_value
min-width: 30px
@@ -1108,9 +1106,44 @@ fieldset > .row
content: "\f021"
color: #ccc
span, .dash_trend
+opacity(0)
display: none
.data_table
.data_chart
.data_trends
=animation($name,$value)
-webkit-animation-#{$name}: $value
animation-#{$name}: $value
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@-o-keyframes #{$name}
@content
@keyframes #{$name}
@content
.data_loading
opacity: 1
+animation(name,bounceG)
+animation(duration,0.7s)
+animation(direction,linear)
+scale(0.7)
+keyframes(bounceG)
0%
+opacity(0)
+scale(0.1)
100%
+opacity(1)
+scale(1)
@@ -35,35 +35,35 @@
</a>
</span>
</header>
<div id="dash_trends_toolbar" class="row">
<div id="dashtrends_toolbar" class="row">
<dl class="col-xs-4 col-lg-2 active">
<dt>{l s='Sales'}</dt>
<dd class="size_l"><span id="sales_score"></span></dd>
<dd class="data_value size_l"><span id="sales_score"></span></dd>
<dd class="dash_trend dash_trend_up"><span id="sales_score_trends"></span>%</dd>
</dl>
<dl class="col-xs-4 col-lg-2">
<dt>{l s='Orders'}</dt>
<dd class="size_l"><span id="orders_score"></span></dd>
<dd class="data_value size_l"><span id="orders_score"></span></dd>
<dd class="dash_trend dash_trend_down"><span id="orders_score_trends"></span>%</dd>
</dl>
<dl class="col-xs-4 col-lg-2">
<dt>{l s='Cart Value'}</dt>
<dd class="size_l"><span id="cart_value_score"></span></dd>
<dd class="data_value size_l"><span id="cart_value_score"></span></dd>
<dd class="dash_trend dash_trend_up"><span id="cart_value_score_trends"></span>%</dd>
</dl>
<dl class="col-xs-4 col-lg-2">
<dt>{l s='Visits'}</dt>
<dd class="size_l"><span id="visits_score"></span></dd>
<dd class="data_value size_l"><span id="visits_score"></span></dd>
<dd class="dash_trend dash_trend_down"><span id="visits_score_trends"></span>%</dd>
</dl>
<dl class="col-xs-4 col-lg-2">
<dt>{l s='Converstion Rate'}</dt>
<dd class="size_l"><span id="convertion_rate_score"></span>%</dd>
<dd class="data_value size_l"><span id="convertion_rate_score"></span>%</dd>
<dd class="dash_trend dash_trend_up"><span id="convertion_rate_score_trends"></span>%</dd>
</dl>
<dl class="col-xs-4 col-lg-2">
<dt>{l s='Net Profits'}</dt>
<dd class="size_l"><span id="net_profits_score"></span></dd>
<dd class="data_value size_l"><span id="net_profits_score"></span></dd>
<dd class="dash_trend dash_trend_up"><span id="net_profits_score_trends"></span>%</dd>
</dl>
</div>