Merge pull request #103 from christianesperar/master

Dashboard tile count mobile enhancement

production/css/custom.css

@@ -377,26 +377,6 @@ table.no-margin .progress {
   width: 50%;
   margin-bottom: 10px;
 }
-@media (max-width: 992px) {
-  .tile_stats_count {
-    margin-bottom: 10px;
-    border-bottom: 1px solid #D9DEE4;
-    padding-bottom: 10px;
-  }
-}
-@media (min-width: 992px) and (max-width: 1100px) {
-  .tile_stats_count .count {
-    font-size: 35px !important;
-  }
-}
-@media(max-width:768px) {
-  .tile_stats_count .count {
-    font-size: 30px !important;
-  }
-  .tile_stats_count .right span {
-    font-size: 12px;
-  }
-}
 @media (min-width: 768px) {
   .col-md-55 {
     width: 20%;
@@ -1530,47 +1510,68 @@ span.right {
 .sidebar-footer a:hover {
   background: #425567;
 }
+
+/** top tiles  */
 .tile_count {
   margin-bottom: 20px;
   margin-top: 20px;
 }
-.tile_count div:first-child .left {
-  border: 0;
-}
 .tile_count .tile_stats_count {
-  border-left: 0px solid #333;
+  border-bottom: 1px solid #D9DEE4;
-  padding: 0;
+  padding: 0 10px 0 20px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
 }
-.tile_stats_count .left {
+@media (min-width: 992px) {
-  width: 15%;
+  .tile_count .tile_stats_count {
-  float: left;
+    margin-bottom: 10px;
+    border-bottom: 0;
+    padding-bottom: 10px;
+  }
+}
+.tile_count .tile_stats_count:before {
+  content:""; 
+  position: absolute; 
+  left: 0; 
   height: 65px;
   border-left: 2px solid #ADB2B5;
   margin-top: 10px;
 }
-.tile_stats_count .right {
+@media (min-width:992px) {
-  padding-left: 10px;
+  .tile_count .tile_stats_count:first-child:before {
-  height: 100%;
+    border-left: 0;
-  text-overflow: ellipsis;
+  }
-  overflow: hidden;
 }
-.tile_stats_count .right span {
+.tile_count .tile_stats_count .count {
-  text-overflow: ellipsis;
+  font-size: 30px;
-  white-space: nowrap;
-}
-.tile_stats_count .count {
-  font-size: 40px;
   line-height: 47px;
   font-weight: 600;
 }
-.tile_stats_count .count small {
+@media (min-width:768px) {
-  font-size: 20px;
+  .tile_count .tile_stats_count .count {
-  line-height: 20px;
+    font-size: 40px;
-  font-weight: 600;
+  }
 }
-.count_bottom i {
+@media (min-width: 992px) and (max-width: 1100px) {
+  .tile_count .tile_stats_count .count {
+    font-size: 30px;
+  }
+}
+.tile_count .tile_stats_count span {
+  font-size: 12px;
+}
+@media (min-width:768px) {
+  .tile_count .tile_stats_count span {
+    font-size: 13px;
+  }
+}
+.tile_count .tile_stats_count .count_bottom i {
   width: 12px;
 }
+/** /top tiles **/
+
 .dashboard_graph {
   background: #fff;
   padding: 7px 10px;

production/index.html

@@ -319,55 +319,36 @@
 
           <!-- top tiles -->
           <div class="row tile_count">
-            <div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
+            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
-              <div class="left"></div>
+              <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
-              <div class="right">
+              <div class="count">2500</div>
-                <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
+              <span class="count_bottom"><i class="green">4% </i> From last Week</span>
-                <div class="count">2500</div>
-                <span class="count_bottom"><i class="green">4% </i> From last Week</span>
-              </div>
             </div>
-            <div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
+            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
-              <div class="left"></div>
+              <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
-              <div class="right">
+              <div class="count">123.50</div>
-                <span class="count_top"><i class="fa fa-clock-o"></i> Average Time</span>
+              <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
-                <div class="count">123.50</div>
-                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
-              </div>
             </div>
-            <div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
+            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
-              <div class="left"></div>
+              <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
-              <div class="right">
+              <div class="count green">2,500</div>
-                <span class="count_top"><i class="fa fa-user"></i> Total Males</span>
+              <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
-                <div class="count green">2,500</div>
-                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
-              </div>
             </div>
-            <div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
+            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
-              <div class="left"></div>
+              <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
-              <div class="right">
+              <div class="count">4,567</div>
-                <span class="count_top"><i class="fa fa-user"></i> Total Females</span>
+              <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
-                <div class="count">4,567</div>
-                <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
-              </div>
             </div>
-            <div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
+            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
-              <div class="left"></div>
+              <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
-              <div class="right">
+              <div class="count">2,315</div>
-                <span class="count_top"><i class="fa fa-user"></i> Total Collections</span>
+              <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
-                <div class="count">2,315</div>
-                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
-              </div>
             </div>
-            <div class="animated flipInY col-md-2 col-sm-4 col-xs-4 tile_stats_count">
+            <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
-              <div class="left"></div>
+              <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
-              <div class="right">
+              <div class="count">7,325</div>
-                <span class="count_top"><i class="fa fa-user"></i> Total Connections</span>
+              <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
-                <div class="count">7,325</div>
-                <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
-              </div>
             </div>
-
           </div>
           <!-- /top tiles -->