[#22] Improve visual feedback as well as x of y notion in tile footer

textbook · Apr 25, 2016 · 4d52bd7 · 4d52bd7
1 parent 507eda9
commit 4d52bd7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/flash/static/scripts/utils.js b/flash/static/scripts/utils.js
@@ -73,6 +73,7 @@ var bundleService = function (serviceSelector, interval) {
 
     tiles.each(function (index, obj) {
       stacked[index] = $(obj);
+      stacked[index].append('<div class="tiles-count">' + (index + 1) + ' of ' + tiles.length+ '</div>');
       wrapper.append(stacked[index]);
     });
     $('.dashboard').append(wrapper);
@@ -87,7 +88,7 @@ var bundleService = function (serviceSelector, interval) {
 
     stacked[currentActive]
       .show()
-      .effect('shake', {distance: 10, times: 1});
+      .effect('shake', {distance: 10, times: 3});
   }
 
   updateStacked();

diff --git a/flash/static/styles/default.css b/flash/static/styles/default.css
@@ -14,16 +14,13 @@ h1 {
 
 .service-tile {
   background: rgba(165, 165, 165, 0.1);
+  border-left: 15px solid rgb(66, 66, 66);
   border-radius: 5px;
   font-size: 1.8rem;
   margin: 40px 0;
   padding: 1rem;
 }
 
-.service-tile {
-  border-left: 15px solid rgb(66, 66, 66);
-}
-
 .service-tile.tile-ok {
   border-left: 15px solid rgb(52, 123, 52);
 }
@@ -46,6 +43,10 @@ h1 {
   width: 98%;
 }
 
+.tiles-count {
+  text-align: center;
+}
+
 .pane {
   display: flex;
   height: 200px;