Merge "Show busy indicator while waiting for query results - fixes #104"
diff --git a/Changes b/Changes
index aa1455f..e075546 100755
--- a/Changes
+++ b/Changes
@@ -1,4 +1,4 @@
-0.37 2019-12-17
+0.37 2020-01-07
- Removed deprecated 'kalamar_test_port' helper.
- Separated KalamarHelpers and KalamarPages.
- Renamed 'doc_link_to' to 'embedded_link_to'
@@ -30,6 +30,8 @@
statistics button (#107, hebasta)
- Fixed links to Leibniz association (hebasta)
- Make proxy timeouts configurable.
+ - Show busy indicator while waiting for query results
+ (#104).
0.36 2019-09-19
- Rename all cookies to be independent
diff --git a/Gruntfile.js b/Gruntfile.js
index 2547144..d64d307 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -143,6 +143,7 @@
files: ['dev/scss/{util,base,fonts,kalamar,media,no-js}.scss',
'dev/scss/base/flextable.scss',
'dev/scss/base/fragment.scss',
+ 'dev/scss/base/load.scss',
'dev/scss/footer/footer.scss',
'dev/scss/sidebar/sidebar.scss',
'dev/scss/header/{header,hint,menu,searchbar,vc,statistics,datepicker}.scss',
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 109fd48..478f87e 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -341,7 +341,7 @@
if (form !== null) {
form.addEventListener('submit', function (e) {
var qf = d.getElementById('q-field');
-
+
// No query was defined
if (qf.value === undefined || qf.value === '') {
qf.focus();
@@ -349,7 +349,7 @@
KorAP.log(700, "No query given");
return;
};
-
+
// Store session information
KorAP.session.set("show", show);
@@ -362,6 +362,14 @@
input.removeAttribute('value');
input.removeAttribute('name');
};
+
+ // This would preferably set the query to be "disabled",
+ // but in that case the query wouldn't be submitted
+ // at all.
+ // Setting the cursor to "progress" fails in current versions
+ // of webkit.
+ qf.classList.add("loading");
+ d.getElementById('qsubmit').classList.add("loading");
});
};
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 1582513..f6dc152 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -2,6 +2,7 @@
@import "util";
@import "base/flextable";
@import "base/fragment";
+@import "base/load";
/**
* Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/load.scss b/dev/scss/base/load.scss
new file mode 100644
index 0000000..1917a54
--- /dev/null
+++ b/dev/scss/base/load.scss
@@ -0,0 +1,14 @@
+div.loading {
+ background-color: transparent !important;
+ height: 16px !important;
+ width: 16px !important;
+ margin: 0 auto !important;
+}
+
+.loading {
+ background: {
+ position: center;
+ repeat: no-repeat;
+ image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
+ }
+}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index ab86913..7e34b27 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -19,6 +19,11 @@
&::-webkit-search-cancel-button {
display: none;
}
+
+ &.loading {
+ background-color: $light-orange;
+ background-image: none;
+ }
}
header input {
@@ -34,7 +39,7 @@
position: absolute;
padding: 0;
right: $right-distance;
- &::after {
+ &:not(.loading)::after {
content: $fa-search;
}
}
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index c36126f..3039d03 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -284,14 +284,3 @@
div.metatable > dl.cbm-disabled > div > dd {
cursor: default !important;
}
-
-div.loading {
- background-color: transparent !important;
- height: 16px !important;
- width: 16px !important;
- margin: 0 auto !important;
- background-image: url('data:image/gif;base64,R0lGODlhEAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48Hzh2UngyGvet6OpmKWmBb5TI+LlTOlAAACH5BAkEAAEALAAAAAAQABAAAAIohA+hu3gMnXyBqnkNw1XDnHThZ32bd6LUg0SOOIJsCaPmtOJvrctHAQAh+QQJBAABACwAAAAAEAAQAAACKYQPobt44QyM01VW0cVNPq48nxZKGLkxqGiungmyCXh9nRUleSZrO10AACH5BAkEAAEALAAAAAAQABAAAAIohA8RyKwN04pSWdumufp0niHghnkPyaWmqZLsKL3QWXUrJdpo66RKAQAh+QQJBAABACwAAAAAEAAQAAACJoQPEcisDdOKUlnbrp4IH989n1iBJUhK47itxkbGsEvRtXq/8B4UACH5BAkEAAEALAAAAAAQABAAAAIphA8RyKwN04pSWdvuNPto1HEX6G1YOYrain5im0pQ/GSnTIFr7eyhUQAAIfkECQQAAQAsAAAAABAAEAAAAiqMf6ALwWoelJFS5CbESTdeNUu3jWP4IWe2qS0TsmC8cuZFsrAkWrgtKQAAIfkECQQAAQAsAAAAABAAEAAAAiiMf6AL6LwMnDFQVG9SkrveWN6XjR82Mmi4cdMTvWsjnyIV4rIOgUwBACH5BAkEAAEALAAAAAAQABAAAAImjH+gC8HrXpNTxoeuzkltrkFg6BnMiJxpaYpWV76jDFKujV14LBUAIfkEAR4AAQAsAAAAABAAEAAAAiSEDxHIrA3TilJZ266eaN/8HJixdd4nailXgafrwSUVUqltQgUAOw==');
-
-}
-
-