nice spinner

README.md

@@ -16,6 +16,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
 
 ### The 20%
 
+- [ ] need to show status (receiving information etc.) per repo
 - [ ] provide a documentation site
 - [ ] visiting a chart page saves the project if it isn't saved already
 - [ ] landing page for the project and put message on my repo
@@ -32,6 +33,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
 - [ ] show a countdown clock towards the end of the milestone or show overdue
 - [ ] highlight for a moment recently changed milestone
 - [ ] smooth animation when transitioning between icons and notifications
+- [ ] show logged-in state only after it is known
 - [x] format milestone titles prepending "Milestone" word if appropriate
 - [x] Variable document.title on different pages
 - [x] be able to go back to homepage
@@ -43,6 +45,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
 
 ### Extras
 
+- [ ] highlight changes from past fetch
 - [ ] In add a project form autocomplete on my username, orgs I am member of and repos I have access to
 - [ ] Someone might create a public repo, add it to the system and switch it to private; need to check repo priviledges at runtime; or when asking for auth, one would choose either public OR public/private, but this could get confusign.
 - [ ] Make sure the padding fits throughout the interface; we have user-select on elements.
@@ -99,6 +102,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
 
 ### Business
 
+- you need to pay for a license to use the app for business purposes
 - repos, milestones saved remotely
 - auto-update with new information
-- private repos
+- private repos

public/css/app.bundle.css

@@ -410,8 +410,7 @@ table {
 @font-face{font-family:'Fontello';src:url("../fonts/fontello.eot?74672344");src:url("../fonts/fontello.eot?74672344#iefix") format('embedded-opentype'),url("../fonts/fontello.woff?74672344") format('woff'),url("../fonts/fontello.ttf?74672344") format('truetype'),url("../fonts/fontello.svg?74672344#fontello") format('svg');font-weight:normal;font-style:normal}
 
 .icon{vertical-align:middle;font-family:"Fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none;}
-.icon.spin6{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
-.icon.spin4{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
+.icon.spin6,.icon.spin4,.icon.spinner1{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
 @-moz-keyframes spin{0%{-moz-transform:rotate(0)}
 100%{-moz-transform:rotate(360deg)}
 }@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}

public/css/app.css

@@ -3,8 +3,7 @@
 @font-face{font-family:'Fontello';src:url("../fonts/fontello.eot?74672344");src:url("../fonts/fontello.eot?74672344#iefix") format('embedded-opentype'),url("../fonts/fontello.woff?74672344") format('woff'),url("../fonts/fontello.ttf?74672344") format('truetype'),url("../fonts/fontello.svg?74672344#fontello") format('svg');font-weight:normal;font-style:normal}
 
 .icon{vertical-align:middle;font-family:"Fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none;}
-.icon.spin6{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
-.icon.spin4{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
+.icon.spin6,.icon.spin4,.icon.spinner1{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
 @-moz-keyframes spin{0%{-moz-transform:rotate(0)}
 100%{-moz-transform:rotate(360deg)}
 }@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}

public/fonts/fontello.svg

@@ -17,6 +17,7 @@
 <glyph glyph-name="spin6" unicode="&#xe808;" d="m855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 <glyph glyph-name="megaphone" unicode="&#xe809;" d="m0 413q0 66 36 111t89 45l289 0q63 0 119 45t96 125l2 0q58 111 150 111 102 0 160-131t59-307-59-306-160-131q-92 0-150 111l-2 0q-78 155-199 168-6-2-8-2l0-2q-6-2-10-7-2-2-2-4-4-6-4-12l0-221q0-8 16-26t16-36l0-32q0-25-19-43t-44-19l-125 0q-25 0-44 19t-18 43l0 282q0 25-19 44t-44 18q-53 0-89 45t-36 111z m63 0q0-40 18-67t44-27l219 0q-31 37-31 94t31 93l-219 0q-25 0-44-27t-18-66z m169-157q18-29 18-62l0-282 125 0 0 28-2 2-2 2q-27 33-27 62l0 219q0 16 6 31l-118 0z m112 157q0-40 18-67t44-27l8 0q86 0 162-63-13 74-13 157 0 80 13 156-76-63-162-63l-8 0q-25 0-44-27t-18-66z m281 0q0-47 6-94l88 0q25 0 44 27t18 67-18 66-44 27l-88 0q-6-47-6-93z m14-157q19-97 57-158t85-60q65 0 111 109t45 266-45 265-111 109q-47 0-85-60t-57-158l80 0q52 0 89-45t36-112-36-111-89-45l-80 0z" horiz-adv-x="1000" />
 <glyph glyph-name="spin4" unicode="&#xe80a;" d="m498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />
+<glyph glyph-name="spinner1" unicode="&#xe80b;" d="m469 614v204q129 0 237-61t169-170 62-237h-204q0 72-36 133t-95 96-133 35z" horiz-adv-x="937.5" />
 </font>
 </defs>
 </svg>

public/js/app.bundle.js

@@ -40914,7 +40914,7 @@ if (typeof exports === 'object') {
             });
           });
           return mediator.on('!app/loading', function(ya) {
-            return _this.set('icon', ya ? 'spin4' : 'fire-station');
+            return _this.set('icon', ya ? 'spinner1' : 'fire-station');
           });
         },
         'components': {
@@ -40967,7 +40967,8 @@ if (typeof exports === 'object') {
         'down-open': '\e807',
         'spin6': '\e808',
         'megaphone': '\e809',
-        'spin4': '\e80a'
+        'spin4': '\e80a',
+        'spinner1': '\e80b'
       };
       
       module.exports = Ractive.extend({

public/js/app.js

@@ -943,7 +943,7 @@
             });
           });
           return mediator.on('!app/loading', function(ya) {
-            return _this.set('icon', ya ? 'spin4' : 'fire-station');
+            return _this.set('icon', ya ? 'spinner1' : 'fire-station');
           });
         },
         'components': {
@@ -996,7 +996,8 @@
         'down-open': '\e807',
         'spin6': '\e808',
         'megaphone': '\e809',
-        'spin4': '\e80a'
+        'spin4': '\e80a',
+        'spinner1': '\e80b'
       };
       
       module.exports = Ractive.extend({

src/styles/icons.styl

@@ -15,10 +15,7 @@
   font-variant: normal
   text-transform: none
 
-  &.spin6
-    animation: spin 2s infinite linear
-
-  &.spin4
+  &.spin6, &.spin4, &.spinner1
     animation: spin 2s infinite linear
 
 @-moz-keyframes spin {

src/views/header.coffee

@@ -20,7 +20,7 @@ module.exports = Ractive.extend
 
     # Switch loading icon with app icon.
     mediator.on '!app/loading', (ya) =>
-      @set 'icon', if ya then 'spin4' else 'fire-station'
+      @set 'icon', if ya then 'spinner1' else 'fire-station'
 
   'components': { Icons }
 

src/views/icons.coffee

@@ -13,6 +13,7 @@ codes =
   'spin6':         '\e808'
   'megaphone':     '\e809'
   'spin4':         '\e80a'
+  'spinner1':      '\e80b'
 
 module.exports = Ractive.extend