fix(ui): unify loading animations in side panel

RAMP-PCAR · Apr 21, 2015 · 64e9632 · 64e9632
1 parent 7a2602c
commit 64e9632
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 104 deletions.
diff --git a/site/includes/loadingsimple.hbs b/site/includes/loadingsimple.hbs
@@ -0,0 +1,8 @@
+<div class="loading-simple">
+    <span>{{t "map.loadingTitle"}}</span>
+    <ul role="presentation">
+        <li></li>
+        <li></li>
+        <li></li>
+    </ul>
+</div>
diff --git a/site/pages/ramp.hbs b/site/pages/ramp.hbs
@@ -180,11 +180,7 @@
                     </div>
                 </div>
                 <div id="map-load-indicator" class="">
-                    <span>{{t "map.loadingTitle"}}</span><ul>
-                        <li></li>
-                        <li></li>
-                        <li></li>
-                    </ul>
+                    {{>loadingsimple}}
                 </div>
             </div>
         </div>
@@ -203,14 +199,9 @@
                         </h2>-->
                         <div id="searchMapSectionBody">
                             <!--LAYER SELECTION BEGINS-->
-                            <ul class="loadingAnimation">
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                                <li></li>
-                            </ul>
+                            <div class="loadingAnimation">
+                                {{>loadingsimple}}
+                            </div>
                             <!--LAYER SECTION END-->
                         </div>
                     <!--</div>-->
@@ -219,14 +210,9 @@
                 <details id="tabs1_2" data-panel-name="datagrid">
                     <summary class="">{{t "datagrid.dataTabTitle"}}</summary>
                     <div id="gridpane">
-                        <ul class="loadingAnimation">
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                            <li></li>
-                        </ul>
+                        <div class="loadingAnimation">
+                            {{>loadingsimple}}
+                        </div>
                     </div>
                 </details>
             </div>

diff --git a/src/css/effects/animation-effects.less b/src/css/effects/animation-effects.less
@@ -8,6 +8,93 @@
     padding: 10px !important;
 }
 
+.loading-simple {
+
+    font-weight: bold;
+    display: inline;
+
+    ul {
+        display: inline-block;
+        margin: 0 0 0 0;
+        padding: 0 !important;
+        list-style: none;
+
+        li {
+            background-color: #000000;
+            border-radius: 20%;
+            float: left;
+            height: 3px;
+            margin: 0 0 0 3px;
+            padding: 0;
+            width: 3px;
+
+            .dot-animation (@keyframe) {
+                animation: 5s cubic-bezier(0.03, 0.615, 0.995, 0.415) 0s normal both infinite @keyframe;
+            }
+
+            .default-keyframes() {
+                0% {
+                    opacity: 0;
+                }
+
+                10% {
+                    opacity: 0;
+                }
+
+                85% {
+                    opacity: 1;
+                }
+
+                95% {
+                    opacity: 0;
+                }
+
+                100% {
+                    opacity: 0;
+                }
+            }
+
+            @keyframes dot-1 {
+                .default-keyframes; 20% {
+                    opacity: 1;
+                }
+            }
+
+            @keyframes dot-2 {
+                .default-keyframes; 40% {
+                    opacity: 0;
+                }
+
+                50% {
+                    opacity: 1;
+                }
+            }
+
+            @keyframes dot-3 {
+                .default-keyframes; 60% {
+                    opacity: 0;
+                }
+
+                70% {
+                    opacity: 1;
+                }
+            }
+
+            &:nth-child(1) {
+                .dot-animation (dot-1);
+            }
+
+            &:nth-child(2) {
+                .dot-animation (dot-2);
+            }
+
+            &:nth-child(3) {
+                .dot-animation (dot-3);
+            }
+        }
+    }
+}
+
 ul.loadingAnimation {
     margin: 10px 0;
     height: 4px;

diff --git a/src/css/map/base.less b/src/css/map/base.less
@@ -26,10 +26,8 @@
         left: 0;
     }
 
-
     #map-load-indicator {
         bottom: 0;
-        font-weight: bold;
         padding: 3px 10px 3px 35px;
         position: absolute;
         right: 3px;
@@ -54,87 +52,6 @@
             .transition(300ms, ease);
             opacity: 0;
         }
-
-        ul {
-            display: inline-block;
-            margin: 0 0 0 9px !important;
-            padding: 0 !important;
-            list-style: none;
-
-            li {
-                background-color: #000000;
-                border-radius: 20%;
-                float: left;
-                height: 3px;
-                margin: 0 0 0 3px;
-                padding: 0;
-                width: 3px;
-
-                .dot-animation (@keyframe) {
-                    animation: 5s cubic-bezier(0.03, 0.615, 0.995, 0.415) 0s normal both infinite @keyframe;
-                }
-
-                .default-keyframes() {
-                    0% {
-                        opacity: 0;
-                    }
-
-                    10% {
-                        opacity: 0;
-                    }
-
-                    85% {
-                        opacity: 1;
-                    }
-
-                    95% {
-                        opacity: 0;
-                    }
-
-                    100% {
-                        opacity: 0;
-                    }
-                }
-
-                @keyframes dot-1 {
-                    .default-keyframes; 20% {
-                        opacity: 1;
-                    }
-                }
-
-                @keyframes dot-2 {
-                    .default-keyframes; 40% {
-                        opacity: 0;
-                    }
-
-                    50% {
-                        opacity: 1;
-                    }
-                }
-
-                @keyframes dot-3 {
-                    .default-keyframes; 60% {
-                        opacity: 0;
-                    }
-
-                    70% {
-                        opacity: 1;
-                    }
-                }
-
-                &:nth-child(1) {
-                    .dot-animation (dot-1);
-                }
-
-                &:nth-child(2) {
-                    .dot-animation (dot-2);
-                }
-
-                &:nth-child(3) {
-                    .dot-animation (dot-3);
-                }
-            }
-        }
     }
 
     .map-scale-dark {

diff --git a/src/css/side-panel/base.less b/src/css/side-panel/base.less
@@ -41,6 +41,11 @@
     //margin: 0;
     background-color: white;
 
+    .loadingAnimation {
+        text-align: center;
+        margin: 45px 0;
+    }
+
     .wb-tabs {
         position: static;