All of lore.kernel.org
 help / color / mirror / Atom feed
From: Belen Barros Pena <belen.barros.pena@linux.intel.com>
To: toaster@yoctoproject.org
Subject: [PATCH 20/20] toaster: loading notification Make it spin
Date: Thu,  9 Jun 2016 14:24:33 +0100	[thread overview]
Message-ID: <1465478673-23191-21-git-send-email-belen.barros.pena@linux.intel.com> (raw)
In-Reply-To: <1465478673-23191-1-git-send-email-belen.barros.pena@linux.intel.com>

We need some additional css to make the spinner in our loading
notification spin. If the spinner doesn't spin, is it a spinner?

Signed-off-by: Belen Barros Pena <belen.barros.pena@linux.intel.com>
---
 .../lib/toaster/toastergui/static/css/default.css  | 39 +++++++++++++++++++++-
 bitbake/lib/toaster/toastergui/templates/base.html |  2 +-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index b66e748..6e256ee 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -255,7 +255,7 @@ code { color: #333; background-color: transparent; }
 .date-filter-controls span { margin: 0 10px; }
 
 /* Style the fixed positioned notifications */
-.loading-notification { position: fixed; z-index: 101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } 
+#loading-notification { position: fixed; z-index: 1101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } 
 
 .change-notification { position: fixed; z-index: 1101; top: 4%; left: 30%; right: 30%; -webkit-box-shadow: 0 0 10px #3a87ad; -moz-box-shadow: 0 0 10px #3a87ad; box-shadow: 0 0 10px #3a87ad; }
 
@@ -303,3 +303,40 @@ h2.panel-title { font-size: 30px; }
 @-webkit-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } }
 @-moz-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } }
 @keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } }
+
+/* Copied in from newer version of Font-Awesome 4.3.0 */
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+  display: inline-block;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+  display: inline-block;
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+/* End copied in from newer version of Font-Awesome 4.3.0 */
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 73e4cd8..8a9f690 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -62,7 +62,7 @@
   <body>
 
     {% csrf_token %}
-    <div id="loading-notification" class="alert lead text-center" style="display:none">
+    <div id="loading-notification" class="alert alert-warning lead text-center" style="display:none">
       Loading <i class="fa-pulse icon-spinner"></i>
     </div>
 
-- 
1.9.1



      parent reply	other threads:[~2016-06-09 13:38 UTC|newest]

Thread overview: 25+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2016-06-09 13:24 [PATCH 00/20] toaster: Move build information to Bootstrap 3 Belen Barros Pena
2016-06-09 13:24 ` [PATCH 01/20] toaster: build data Breadcrumbs to Bootstrap3 Belen Barros Pena
2016-06-09 13:24 ` [PATCH 02/20] toaster: build data Build dashboard to Bootstrap 3 Belen Barros Pena
2016-06-09 13:24 ` [PATCH 03/20] toaster: build data Left nav actions " Belen Barros Pena
2016-06-09 13:24 ` [PATCH 04/20] toaster: build data Packages installed " Belen Barros Pena
2016-06-10 11:18   ` Michael Wood
2016-06-10 11:21     ` Barros Pena, Belen
2016-06-09 13:24 ` [PATCH 05/20] toaster: build data Directory structure to Boostrap 3 Belen Barros Pena
2016-06-09 13:24 ` [PATCH 06/20] toaster: build data Configuration to Bootstrap 3 Belen Barros Pena
2016-06-09 13:24 ` [PATCH 07/20] toaster: build data Variables " Belen Barros Pena
2016-06-09 13:24 ` [PATCH 08/20] toaster: build data Tasks table " Belen Barros Pena
2016-06-10 11:53   ` Michael Wood
2016-06-09 13:24 ` [PATCH 09/20] toaster: build data Recipes " Belen Barros Pena
2016-06-09 13:24 ` [PATCH 10/20] toaster: build data Task details " Belen Barros Pena
2016-06-09 13:24 ` [PATCH 11/20] toaster: build data Recipe " Belen Barros Pena
2016-06-09 13:24 ` [PATCH 12/20] toaster: css Remove markup Belen Barros Pena
2016-06-10 13:05   ` Michael Wood
2016-06-09 13:24 ` [PATCH 13/20] toaster: build data Package details to Bootstrap 3 Belen Barros Pena
2016-06-09 13:24 ` [PATCH 14/20] toaster: build data Fix left navigation Belen Barros Pena
2016-06-09 13:24 ` [PATCH 15/20] toaster: build data Format empty state in packages table Belen Barros Pena
2016-06-09 13:24 ` [PATCH 16/20] toaster: build data Add css for highlight animation Belen Barros Pena
2016-06-09 13:24 ` [PATCH 17/20] toaster: task filters Remove invalid option Belen Barros Pena
2016-06-09 13:24 ` [PATCH 18/20] toaster: css Remove Bootstrap theme Belen Barros Pena
2016-06-09 13:24 ` [PATCH 19/20] toaster: build data Unavailable artifact to Bootstrap 3 Belen Barros Pena
2016-06-09 13:24 ` Belen Barros Pena [this message]

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=1465478673-23191-21-git-send-email-belen.barros.pena@linux.intel.com \
    --to=belen.barros.pena@linux.intel.com \
    --cc=toaster@yoctoproject.org \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body. 
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.