search: add loading bar for search page

Signed-off-by: Anna Trzcinska <anna.trzcinska@cern.ch>
ioannistsanaktsidis · Dec 5, 2017 · d7a57f3 · d7a57f3
1 parent e14d983
commit d7a57f3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/cernopendata/modules/theme/static/scss/styles.scss b/cernopendata/modules/theme/static/scss/styles.scss
@@ -14,7 +14,11 @@ $iconic-font-path: "/static/node_modules/open-iconic/font/fonts/";
 
 $dark_blue: #2c3e50;
 $medium_blue: #2c3e50;
-$light_blue: #3b94cf;
+$light_blue: #3b97d3;
+$orange: #e57e25;
+$loading-color: $light-blue;
+$loading-width: 3px;
+$loading-size: 30px;
 
 @import "frontpage";
 
@@ -484,5 +488,20 @@ invenio-search-facets {
 
 .list-nobullets {
     list-style: none;
-    padding-left: 30px;
+    padding-left: $loading-size;
 }
+
+#loading-bar .bar{ 
+    background-color: $loading-color; 
+    height: $loading-width;
+}
+
+#loading-bar-spinner .spinner-icon {
+    width: $loading-size;
+    height: $loading-size;
+    border: solid $loading-width transparent;
+    border-top-color:  $loading-color;
+    border-left-color: $loading-color;
+    border-radius: $loading-size;
+}
+
diff --git a/cernopendata/templates/cernopendata/search.html b/cernopendata/templates/cernopendata/search.html
@@ -11,10 +11,12 @@
     angular.element(document).ready(function() {
       angular.bootstrap(
         document.getElementById("invenio-search"), [
-           'invenioSearch'
+           'invenioSearch',
+           'angular-loading-bar'
         ]
       );
     });
+
     angular.module('invenioSearch').filter('unsafe', ['$sce', function($sce) {
       return function(input) {
         return $sce.trustAsHtml(input + '...');