summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/guix.css104
-rw-r--r--js/controller/packages.js11
-rw-r--r--js/model/packages.js6
-rw-r--r--js/view/layout.js4
-rw-r--r--js/view/packages.js8
5 files changed, 124 insertions, 9 deletions
diff --git a/css/guix.css b/css/guix.css
index 0534209..040f239 100644
--- a/css/guix.css
+++ b/css/guix.css
@@ -13,3 +13,107 @@
.sorter {
cursor: pointer;
}
+
+/* Loading Spinner */
+
+@-webkit-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@-moz-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@-o-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+/* :not(:required) hides this rule from IE9 and below */
+.spinner:not(:required) {
+ -webkit-animation: spinner 1500ms infinite linear;
+ -moz-animation: spinner 1500ms infinite linear;
+ -ms-animation: spinner 1500ms infinite linear;
+ -o-animation: spinner 1500ms infinite linear;
+ animation: spinner 1500ms infinite linear;
+ -webkit-border-radius: 0.5em;
+ -moz-border-radius: 0.5em;
+ -ms-border-radius: 0.5em;
+ -o-border-radius: 0.5em;
+ border-radius: 0.5em;
+ -webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
+ -moz-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
+ box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
+ display: inline-block;
+ font-size: 18px;
+ width: 1em;
+ height: 1em;
+ margin: 1.5em;
+ overflow: hidden;
+ text-indent: 100%;
+}
+
+.spinner-container {
+ width: 1em;
+ margin: 0 auto;
+ padding: 32px;
+}
diff --git a/js/controller/packages.js b/js/controller/packages.js
index 3a7858d..db94d72 100644
--- a/js/controller/packages.js
+++ b/js/controller/packages.js
@@ -20,7 +20,6 @@
function controller() {
var self = this;
- this.packages = packages.Packages();
this.pages = m.prop([]);
this.currentPageIndex = 0;
this.pageSize = 20;
@@ -47,10 +46,12 @@
this.phase = m.prop(packages.PHASE_NONE);
this.selectedPackage = m.prop(null);
- // All packages are visible initially
- this.packages.then(function(packages) {
- self.pages(self.paginate(packages, self.pageSize));
- });
+ this.packages = packages.Packages()
+ .then(function(packages) {
+ // All packages are visible initially
+ self.pages(self.paginate(packages, self.pageSize));
+ })
+ .then(m.redraw);
};
diff --git a/js/model/packages.js b/js/model/packages.js
index 5ea76a4..652d11a 100644
--- a/js/model/packages.js
+++ b/js/model/packages.js
@@ -19,7 +19,11 @@ guix.packages = {};
(function(packages) {
packages.Packages = function() {
- return m.request({ method: "GET", url: "packages.json" });
+ return m.request({
+ method: "GET",
+ url: "packages.json",
+ background: true
+ });
};
packages.Sorter = (function() {
diff --git a/js/view/layout.js b/js/view/layout.js
index 1ff641a..aa7834b 100644
--- a/js/view/layout.js
+++ b/js/view/layout.js
@@ -42,6 +42,10 @@ guix.withLayout = (function() {
]));
return function(elem) {
+ if(!_.isArray(elem)) {
+ elem = [elem];
+ }
+
return [
m("nav.navbar.navbar-default.navbar-static-top", {
role: "navigation"
diff --git a/js/view/packages.js b/js/view/packages.js
index e356984..e202471 100644
--- a/js/view/packages.js
+++ b/js/view/packages.js
@@ -16,6 +16,8 @@
// <http://www.gnu.org/licenses/>.
(function(packages) {
+ var spinner = m(".spinner-container", m(".spinner"));
+
packages.view = function(ctrl) {
function renderName(package) {
var name = package.name;
@@ -95,7 +97,7 @@
}, m("a", { href: "#" }, text));
}
- return m("ul.pagination", [
+ return m("div", m("ul.pagination", [
// Back page
renderPage("«", {
class: ctrl.isFirstPage() ? "disabled" : "",
@@ -125,7 +127,7 @@
return false;
}
})
- ]));
+ ])));
}
function renderSearchBox() {
@@ -237,7 +239,7 @@
return null;
}
- return guix.withLayout([
+ return guix.withLayout(_.isEmpty(ctrl.pages()) ? spinner : [
m("h2", [
"Packages",
m("span.badge", ctrl.packageCount())