From 3a7fd3dd378fd327f4f6989254385c4eb1817f93 Mon Sep 17 00:00:00 2001
From: Jay Alvarez <jaya@aptivate.org>
Date: Wed, 15 Jul 2015 12:07:23 +0100
Subject: [PATCH] Added spinkit spinner code and styles
---
django/website/media/css/styles.css | 85 +++++++++++++++++--
.../media/less/internews-bootstrap.less | 2 +-
.../website/media/less/internews-mixins.less | 2 +-
django/website/media/less/internews.less | 6 ++
django/website/media/less/navigation.less | 15 ----
django/website/media/less/sources.less | 4 +-
django/website/media/less/spinner.less | 71 ++++++++++++++++
django/website/media/less/view-edit.less | 13 +++
django/website/templates/base.html | 9 +-
django/website/templates/base_side.html | 9 ++
10 files changed, 187 insertions(+), 29 deletions(-)
delete mode 100644 django/website/media/less/navigation.less
create mode 100644 django/website/media/less/spinner.less
diff --git a/django/website/media/css/styles.css b/django/website/media/css/styles.css
index 1be09dfd..ae00b303 100644
--- a/django/website/media/css/styles.css
+++ b/django/website/media/css/styles.css
@@ -6519,7 +6519,6 @@ body {
}
.site-info a {
color: #78716e;
- text-decoration: underline;
}
.navbar-static-top {
position: fixed;
@@ -6583,6 +6582,9 @@ body {
.navbar-top-links > .open > a:focus {
background-color: #002d62;
}
+#side-menu {
+ padding-top: 14.5px;
+}
.sidebar {
margin-top: 51px;
}
@@ -6724,6 +6726,8 @@ body {
}
.panel-heading i {
font-size: 22px;
+ position: relative;
+ top: 3px;
}
.panel-blue,
.panel-primary {
@@ -6982,6 +6986,14 @@ a.list-group-item-danger.active:focus {
.popover {
color: #282625;
}
+.nav-hanging-tabs {
+ margin-top: 40px;
+ margin-right: 0;
+}
+.nav-hanging-tabs > li > a {
+ background-color: rgba(0, 0, 0, 0.05);
+ padding: 14px 18px;
+}
.table-no-border > thead > tr > th,
.table > tbody > tr > th,
.table-no-border > tfoot > tr > th,
@@ -7037,16 +7049,71 @@ th.delete > label {
.bootstrap3-multi-input {
display: none;
}
-.nav-hanging-tabs {
- margin-top: 20px;
- margin-right: 0;
+.spinner {
+ display: none;
+ height: 50px;
+ margin: 40px auto 0;
+ width: 120px;
}
-.nav-hanging-tabs > li > a {
- background-color: rgba(0, 0, 0, 0.05);
- padding: 14px 18px;
+.spinner > span {
+ display: block;
+ float: left;
}
-#side-menu {
- padding-top: 14.5px;
+.spinner > div {
+ height: 100%;
+ width: 6px;
+ display: inline-block;
+ -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+ animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+.spinner.active {
+ display: block;
+}
+.spinner > span {
+ font-size: 14px;
+ padding: 15px 5px;
+ color: #0f6cb6;
+}
+.spinner > div {
+ background-color: #0f6cb6;
+}
+.spinner .rect2 {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+.spinner .rect3 {
+ -webkit-animation-delay: -1s;
+ animation-delay: -1s;
+}
+.spinner .rect4 {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+.spinner .rect5 {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+@-webkit-keyframes sk-stretchdelay {
+ 0%,
+ 40%,
+ 100% {
+ -webkit-transform: scaleY(0.4);
+ }
+ 20% {
+ -webkit-transform: scaleY(1);
+ }
+}
+@keyframes sk-stretchdelay {
+ 0%,
+ 40%,
+ 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ }
+ 20% {
+ transform: scaleY(1);
+ -webkit-transform: scaleY(1);
+ }
}
.clearfix:before,
.clearfix:after,
diff --git a/django/website/media/less/internews-bootstrap.less b/django/website/media/less/internews-bootstrap.less
index e4d25b7f..88296588 100644
--- a/django/website/media/less/internews-bootstrap.less
+++ b/django/website/media/less/internews-bootstrap.less
@@ -7,6 +7,6 @@
@import "view-edit.less";
@import "sources.less";
@import "widgets.less";
-@import "navigation.less";
+@import "spinner.less";
@import "../bootstrap/less/mixins.less";
@import "../bootstrap/less/utilities.less";
\ No newline at end of file
diff --git a/django/website/media/less/internews-mixins.less b/django/website/media/less/internews-mixins.less
index 15177fac..4bb4b2f7 100644
--- a/django/website/media/less/internews-mixins.less
+++ b/django/website/media/less/internews-mixins.less
@@ -1,5 +1,5 @@
-.box-shadow(@horizontal, @vertical, @spread:5px, @color: rgba(0,0,0,0.4)) {
+.box-shadow(@horizontal, @vertical, @spread:5px, @color: rgba(51,51,51,0.38)) {
-webkit-box-shadow:@arguments;
-moz-box-shadow:@arguments;
-o-box-shadow:@arguments;
diff --git a/django/website/media/less/internews.less b/django/website/media/less/internews.less
index 428821cd..16fe34e7 100644
--- a/django/website/media/less/internews.less
+++ b/django/website/media/less/internews.less
@@ -141,6 +141,10 @@ body {
// --Sidebar
+#side-menu {
+ padding-top:@navbar-padding-vertical;
+}
+
.sidebar {
.sidebar-nav.navbar-collapse {
padding-left: 0;
@@ -327,6 +331,8 @@ body {
border:none;
i {
font-size:22px;
+ position:relative;
+ top:3px;
}
}
diff --git a/django/website/media/less/navigation.less b/django/website/media/less/navigation.less
deleted file mode 100644
index 7648071f..00000000
--- a/django/website/media/less/navigation.less
+++ /dev/null
@@ -1,15 +0,0 @@
-//internews navigation overrides
-
-.nav-hanging-tabs {
- margin-top:20px;
- margin-right:0;
-}
-
-.nav-hanging-tabs > li > a {
- background-color:rgba(0,0,0,0.05);
- padding:14px 18px;
-}
-
-#side-menu {
- padding-top:@navbar-padding-vertical;
-}
diff --git a/django/website/media/less/sources.less b/django/website/media/less/sources.less
index 0cf3c2f9..8197e4a5 100644
--- a/django/website/media/less/sources.less
+++ b/django/website/media/less/sources.less
@@ -1,5 +1,5 @@
-//Sources page
+//Styles for import, loading and sources
.bootstrap3-multi-input {
display:none;
-}
+}
\ No newline at end of file
diff --git a/django/website/media/less/spinner.less b/django/website/media/less/spinner.less
new file mode 100644
index 00000000..9663375f
--- /dev/null
+++ b/django/website/media/less/spinner.less
@@ -0,0 +1,71 @@
+//loading spinner
+
+.spinner {
+ display: none;
+ height: 50px;
+ margin: 40px auto 0;
+ width: 120px;
+}
+
+.spinner > span {
+ display: block;
+ float: left;
+}
+
+.spinner > div {
+ height: 100%;
+ width: 6px;
+ display: inline-block;
+
+ -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+ animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner.active {
+ display:block;
+}
+
+.spinner > span {
+ font-size: 14px;
+ padding: 15px 5px;
+ color:@brand-primary;
+}
+
+.spinner > div {
+ background-color: @brand-primary;
+}
+
+.spinner .rect2 {
+ -webkit-animation-delay: -1.1s;
+ animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+ -webkit-animation-delay: -1.0s;
+ animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+ -webkit-animation-delay: -0.9s;
+ animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+ 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+ 20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+ 0%, 40%, 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ } 20% {
+ transform: scaleY(1.0);
+ -webkit-transform: scaleY(1.0);
+ }
+}
diff --git a/django/website/media/less/view-edit.less b/django/website/media/less/view-edit.less
index e7022fdc..b511a0e3 100644
--- a/django/website/media/less/view-edit.less
+++ b/django/website/media/less/view-edit.less
@@ -1,5 +1,18 @@
// View/edit
+//link navigation
+
+.nav-hanging-tabs {
+ margin-top:40px;
+ margin-right:0;
+}
+
+.nav-hanging-tabs > li > a {
+ background-color:rgba(0,0,0,0.05);
+ padding:14px 18px;
+}
+
+//table
.table-no-border > thead > tr > th, .table > tbody > tr > th,
.table-no-border > tfoot > tr > th, .table > thead > tr > td,
.table-no-border > tbody > tr > td, .table > tfoot > tr > td {
diff --git a/django/website/templates/base.html b/django/website/templates/base.html
index fbd897c9..038bb62b 100644
--- a/django/website/templates/base.html
+++ b/django/website/templates/base.html
@@ -22,7 +22,6 @@
</head>
<body class="stretch-vertical">
-
{% block content %}
<div class="container-fluid stretch-vertical">
<div class="row container-row">
@@ -40,8 +39,16 @@
{% bootstrap_javascript jquery=True %}
<script src="{{ STATIC_URL }}js/underscore.js"></script>
<script src="{{ STATIC_URL }}js/backbone.js"></script>
+ <script type="text/javascript">
+ $(function(){
+ $('a, button, .btn').click(function() {
+ $('.spinner').toggleClass('active');
+ });
+ });
+ </script>
{% endblock %}
{% block lastjs %}
{% endblock %}
+
</body>
</html>
diff --git a/django/website/templates/base_side.html b/django/website/templates/base_side.html
index 30b36b1f..27b9a752 100644
--- a/django/website/templates/base_side.html
+++ b/django/website/templates/base_side.html
@@ -50,6 +50,14 @@
<div class="row">
<div class="col-lg-12">
<div class="row messages-box">
+ <div class="spinner">
+ <span>loading...</span>
+ <div class="rect1"></div>
+ <div class="rect2"></div>
+ <div class="rect3"></div>
+ <div class="rect4"></div>
+ <div class="rect5"></div>
+ </div>
{% if messages %}
<ul class="list-unstyled">
{% for message in messages %}
@@ -65,3 +73,4 @@
</div>
<!-- /Main Content -->
{% endblock content %}
+
--
GitLab