got rid entirely of the square-spin loader

yovae · Feb 17, 2016 · 47f13fc · 47f13fc
1 parent f5c9e0d
commit 47f13fc
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 51 deletions.
diff --git a/app/views/base/spinner.scala.html b/app/views/base/spinner.scala.html
@@ -0,0 +1,2 @@
+@()
+<div class="spinner"><svg viewBox="0 0 40 40"><circle cx=20 cy=20 r=18 fill="none"></circle></svg></div>
diff --git a/app/views/insight/refreshForm.scala.html b/app/views/insight/refreshForm.scala.html
@@ -3,7 +3,7 @@
 <form class="insight-refresh" method="post" action="@routes.Insight.refresh(u.username)">
   <button data-icon="E" class="button text">@action</button>
   <div class="crunching none">
-    <span class="square-spin"></span>
+    @base.spinner()
     <br />
     <strong>Now crunching data just for you!</strong>
     <br />

diff --git a/app/views/tournament/home.scala.html b/app/views/tournament/home.scala.html
@@ -58,7 +58,7 @@ <h2 class="leaderboard_title">@trans.lichessTournaments()</h2>
   }
   <h1>@trans.tournaments()</h1>
   <div id="tournament_schedule">
-    <span class="square-spin"></span>
+    @base.spinner()
   </div>
   <div id="tournament_list">
     <table class="slist finished">

diff --git a/public/javascripts/big.js b/public/javascripts/big.js
@@ -758,8 +758,6 @@ lichess.numberFormat = (function() {
         }, 10);
       });
 
-      var powerTipLoader = '<div class="square-wrap"><div class="square-spin"></div></div>';
-
       lichess.userPowertip = function($els, placement) {
         $els.removeClass('ulpt').powerTip({
           intentPollInterval: 200,
@@ -778,7 +776,7 @@ lichess.numberFormat = (function() {
               }
             });
           }
-        }).data('powertip', powerTipLoader);
+        }).data('powertip', lichess.spinnerHtml);
       };
 
       function gamePowertip($els, placement) {
@@ -801,7 +799,7 @@ lichess.numberFormat = (function() {
               }
             });
           }
-        }).data('powertip', powerTipLoader);
+        }).data('powertip', lichess.spinnerHtml);
       }
 
       function updatePowertips() {

diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
@@ -345,30 +345,6 @@ div.content_box .loader:after {
   margin-top: 10px;
   margin-bottom: 10px;
 }
-.square-spin {
-  display: inline-block;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  width: 1em;
-  height: 1em;
-  background: #c0c0c0;
-  border: 1px solid #aaa;
-  -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-  animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-}
-@-webkit-keyframes square-spin {
-  25% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); }
-  50% { -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
-  75% { -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); }
-  100% { -webkit-transform: perspective(100px) rotateX(0) rotateY(0); }
-}
-
-@keyframes square-spin {
-  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
-  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
-  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
-  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
-}
 .spinner {
   width: 40px;
   height: 40px;
@@ -491,14 +467,10 @@ div.content_box .loader:after {
   display: block;
   padding: 15px 15px;
 }
-#powerTip .square-wrap,
-#miniGame .square-wrap {
-  text-align: center;
-}
-#powerTip .square-spin {
-  margin: 23px auto 20px auto;
+#powerTip .spinner {
+  margin: 20px auto;
 }
-#miniGame .square-spin {
+#miniGame .spinner {
   margin: 82px auto 0 auto;
 }
 .clearfix::after {

diff --git a/public/stylesheets/dark.css b/public/stylesheets/dark.css
@@ -570,10 +570,6 @@ body.dark div.eval_gauge tick {
 body.dark div.side_box .game_infos .variant-link {
   border-color: #8c8c8c;
 }
-body.dark .square-spin {
-  background: #666;
-  border-color: #aaa;
-}
 body.dark input.cmn-toggle-round + label {
   background-color: #888;
 }

diff --git a/public/stylesheets/insight.css b/public/stylesheets/insight.css
@@ -1,12 +1,13 @@
-#insight .square-in {
+#insight .spinner {
   display: none;
   position: absolute;
-  top: 280px;
-  left: 380px;
-  -webkit-transform: scale(5);
+  width: 80px;
+  height: 80px;
+  top: 238px;
+  left: 342px;
   opacity: 0.7;
 }
-#insight .loading .square-in {
+#insight .loading .spinner {
   display: block;
 }
 

diff --git a/public/stylesheets/tournament.css b/public/stylesheets/tournament.css
@@ -567,10 +567,10 @@ ol.scheduled_tournaments li.marathon {
   min-height: 400px;
   position: relative;
 }
-#tournament_schedule .square-spin {
-  position: absolute;
-  top: 190px;
-  left: 50%;
+#tournament_schedule .spinner {
+  width: 120px;
+  height: 120px;
+  padding-top: 120px;
   opacity: 0.7;
 }
 #tournament_schedule .schedule {

diff --git a/ui/insight/src/chart.js b/ui/insight/src/chart.js
@@ -213,6 +213,6 @@ module.exports = function(ctrl) {
         makeChart(el, ctrl.vm.answer);
       }
     }),
-    m('div.square-in', m('div.square-spin')),
+    m.trust(lichess.spinnerHtml)
   ];
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@()
		<div class="spinner"><svg viewBox="0 0 40 40"><circle cx=20 cy=20 r=18 fill="none"></circle></svg></div>