Merge pull request #88 from diggyk/master

Added loading indicator on home page
dropbox · Nov 5, 2015 · 2645315 · 2645315
2 parents de2c81b + 5b4e1bc
commit 2645315
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git a/hermes/version.py b/hermes/version.py
@@ -1 +1 @@
-__version__ = "0.5.3"
+__version__ = "0.5.4"
diff --git a/hermes/webapp/src/css/main.less b/hermes/webapp/src/css/main.less
@@ -923,18 +923,28 @@ a {
     padding: 20px;
     float: none;
     margin-top: 2em;
+    background: @btn-color;
+    min-width: 250px;
     &.ng-enter {
       margin-top: 3em;
-      opacity: 0;
+      opacity: 0.25;
+      background: @med-gray;
       -webkit-transition: 0.5s ease-out all;
       -moz-transition: 0.5s ease-out all;
       -ms-transition: 0.5s ease-out all;
       -o-transition: 0.5s ease-out all;
       transition: 0.5s ease-out all;;
+      -webkit-box-shadow: 0 0 5px 5px @med-gray;
+      -moz-box-shadow: 0 0 5px 5px @med-gray;
+      box-shadow: 0 0 5px 5px @med-gray;
     }
     &.ng-enter-active {
       margin-top: 2em;
       opacity: 1;
+      background: @btn-color;
+      -webkit-box-shadow: 0 0 0px 0px @med-gray;
+      -moz-box-shadow: 0 0 0px 0px @med-gray;
+      box-shadow: 0 0 0px 0px @med-gray;
     }
   }
   .banner {
@@ -963,4 +973,20 @@ a {
     font-size: 1.5em;
     text-align: center;
   }
+  .quest-info-holder {
+    text-align: center;
+    margin-top: 3em;
+    background: @med-gray;
+    padding: 20px;
+    opacity: 0.25;
+    display: inline-block;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    min-width: 250px;
+    color: @light-gray;
+    -webkit-box-shadow: 0 0 5px 5px @med-gray;
+    -moz-box-shadow: 0 0 5px 5px @med-gray;
+    box-shadow: 0 0 5px 5px @med-gray;
+  }
 }
diff --git a/hermes/webapp/src/templates/userHome.html b/hermes/webapp/src/templates/userHome.html
@@ -3,7 +3,27 @@
         <div class="col-md-12 banner" ng-if="ctrl.user">Hello {{ctrl.user}}</div>
     </div>
     <div class="row">
-        <div class="col-md-3 col-md-offset-3 quest-info"><button ng-if="ctrl.totalQuests != null" ng-click="ctrl.goToQuestsPage()">{{ctrl.totalQuests}} total open quests.<br/>{{ctrl.totalUserCreatedQuests}} created by you.</button></div>
-        <div class="col-md-3 labor-info"><button ng-if="ctrl.totalUserLabors != null" ng-click="ctrl.goToLaborsPage()">{{ctrl.totalLabors}} total open labors.<br/>{{ctrl.totalUserLabors}} {{ctrl.totalUserLabors == 1 ? "is" : "are"}} for you.</button></div>
+        <div class="col-md-3 col-md-offset-3 quest-info">
+            <button ng-if="ctrl.totalQuests != null"
+                    ng-click="ctrl.goToQuestsPage()">{{ctrl.totalQuests}} total
+                open quests.<br/>{{ctrl.totalUserCreatedQuests}} created by
+                you.
+            </button>
+            <div ng-if="ctrl.totalQuests == null" class="quest-info-holder">
+                Loading<br/>
+                Info
+            </div>
+        </div>
+        <div class="col-md-3 labor-info">
+            <button ng-if="ctrl.totalUserLabors != null"
+                    ng-click="ctrl.goToLaborsPage()">{{ctrl.totalLabors}} total
+                open labors.<br/>{{ctrl.totalUserLabors}}
+                {{ctrl.totalUserLabors == 1 ? "is" : "are"}} for you.
+            </button>
+            <div ng-if="ctrl.totalUserLabors == null" class="quest-info-holder">
+                Loading<br/>
+                Info
+            </div>
+        </div>
     </div>
 </div>