system notification

README.md

@@ -16,6 +16,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
 
 ### The 20%
 
+- [ ] verify that project exists on project page when fetching it remotely (add behind the scenes)
 - [ ] 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
@@ -34,6 +35,7 @@ GitHub Burndown Chart as a service. Public repos are free, for private access au
 - [ ] 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] how does a message look like when we have an error and nothing to render?
 - [x] format milestone titles prepending "Milestone" word if appropriate
 - [x] Variable document.title on different pages
 - [x] be able to go back to homepage

public/css/app.bundle.css

@@ -449,12 +449,13 @@ ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
 .wrap{width:800px;margin:0 auto}
 #notify{position:fixed;top:-68px;z-index:1;width:100%;background:#fcfcfc;color:#aaafbf;border-top:3px solid #aaafbf;border-bottom:1px solid #f3f4f8;}
+#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px}
 #notify.success{border-top-color:#00b361;color:#00b361}
 #notify.warn{border-top-color:#ea9712;color:#ea9712}
 #notify.alert{border-top-color:#c1041c;color:#c1041c}
-#notify .icon,#notify p{display:inline-block}
+#notify .icon,#notify p{display:block}
-#notify .icon{font-size:26px;padding:18px;width:38px}
+#notify .icon{font-size:26px;padding:18px;width:38px;float:left}
-#notify p{margin-right:10px}
+#notify p{padding:20px 20px 20px 74px;text-align:justify}
 #head{background:#c1041c;height:64px;}
 #head #icon{font-size:26px;margin:0;padding:10px 0;line-height:44px;height:44px;width:74px;background:#77000e;display:inline-block;color:#c1041c;margin:0;text-align:center}
 #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}

public/css/app.css

@@ -42,12 +42,13 @@ ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
 .wrap{width:800px;margin:0 auto}
 #notify{position:fixed;top:-68px;z-index:1;width:100%;background:#fcfcfc;color:#aaafbf;border-top:3px solid #aaafbf;border-bottom:1px solid #f3f4f8;}
+#notify.system{top:0%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:500px}
 #notify.success{border-top-color:#00b361;color:#00b361}
 #notify.warn{border-top-color:#ea9712;color:#ea9712}
 #notify.alert{border-top-color:#c1041c;color:#c1041c}
-#notify .icon,#notify p{display:inline-block}
+#notify .icon,#notify p{display:block}
-#notify .icon{font-size:26px;padding:18px;width:38px}
+#notify .icon{font-size:26px;padding:18px;width:38px;float:left}
-#notify p{margin-right:10px}
+#notify p{padding:20px 20px 20px 74px;text-align:justify}
 #head{background:#c1041c;height:64px;}
 #head #icon{font-size:26px;margin:0;padding:10px 0;line-height:44px;height:44px;width:74px;background:#77000e;display:inline-block;color:#c1041c;margin:0;text-align:center}
 #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}

public/js/app.bundle.js

@@ -40460,7 +40460,7 @@ Router.prototype.mount = function(routes, path) {
     // app.coffee
     root.require.register('burnchart/src/app.js', function(exports, require, module) {
     
-      var App, Header, Notify, Router, key, _i, _len, _ref;
+      var App, Header, Notify, key, router, _i, _len, _ref;
       
       _ref = ['utils/mixins', 'models/projects'];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -40468,12 +40468,12 @@ Router.prototype.mount = function(routes, path) {
         require("./" + key);
       }
       
-      Router = require('./modules/router');
-      
       Header = require('./views/header');
       
       Notify = require('./views/notify');
       
+      router = require('./modules/router');
+      
       App = Ractive.extend({
         'template': require('./templates/layout'),
         'components': {
@@ -40481,7 +40481,7 @@ Router.prototype.mount = function(routes, path) {
           Notify: Notify
         },
         init: function() {
-          return new Router();
+          return router.init('/');
         }
       });
       
@@ -41197,7 +41197,7 @@ Router.prototype.mount = function(routes, path) {
         });
       };
       
-      router = Router({
+      module.exports = window.router = router = Router({
         '/': _.partial(route, 'index'),
         '/new/project': _.partial(route, 'new'),
         '/:owner/:name': _.partial(route, 'project'),
@@ -41208,16 +41208,14 @@ Router.prototype.mount = function(routes, path) {
         },
         '/notify': function() {
           mediator.fire('!app/loading', true);
-          mediator.fire('!app/notify', 'You did something real good', 'warn');
+          mediator.fire('!app/notify', {
+            'text': 'You have some interesting news in your inbox. Go check it out now.',
+            'type': 'warn'
+          });
           return window.location.hash = '#';
         }
       });
       
-      module.exports = function() {
-        router.init('/');
-        return router;
-      };
-      
     });
 
     // header.mustache
@@ -41244,10 +41242,16 @@ Router.prototype.mount = function(routes, path) {
       module.exports = ["<Notify/>","<Header/>","","<div id=\"page\">","  <!-- content loaded from a router -->","</div>","","<div id=\"footer\">","  <div class=\"wrap\">","    &copy; 2012-2014 <a href=\"http://cloudfi.re\">Cloudfire Systems</a>","  </div>","</div>"].join("\n");
     });
 
+    // milestones.mustache
+    root.require.register('burnchart/src/templates/milestones.js', function(exports, require, module) {
+    
+      module.exports = ["{{#milestones.length}}","  <div id=\"projects\">","    <div class=\"header\">","      <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>","      <h2>Milestones</h2>","    </div>","","    <table>","      {{#milestones}}","        <tr>","          <td>","            <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>","          </td>","          <td style=\"width:1%\">","            <div class=\"progress\">","              <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>","              <span class=\"due\">{{{ format.due(due_on) }}}</span>","              <div class=\"outer bar\">","                <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>","              </div>","            </div>","          </td>","        </tr>","      {{/milestones}}","    </table>","","    <div class=\"footer\">","      <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>","    </div>","  </div>","{{/milestones.length}}"].join("\n");
+    });
+
     // notify.mustache
     root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
     
-      module.exports = ["{{#text}}","  <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","    <Icons icon=\"megaphone\"/>","    <p>{{text}}</p>","  </div>","{{/text}}"].join("\n");
+      module.exports = ["{{#text}}","  {{#system}}","    <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{else}}","    <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{/system}}","{{/text}}"].join("\n");
     });
 
     // chart.mustache
@@ -41271,13 +41275,13 @@ Router.prototype.mount = function(routes, path) {
     // project.mustache
     root.require.register('burnchart/src/templates/pages/project.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"title\">","  <div class=\"wrap\">","    <h2 class=\"title\">radekstepan/disposable</h2>","  </div>","</div>","","<div id=\"content\" class=\"wrap\">","  Project milestones go here","</div>"].join("\n");
+      module.exports = ["<div id=\"title\">","  <div class=\"wrap\">","    <h2 class=\"title\">{{route.join('/')}}</h2>","  </div>","</div>","","<div id=\"content\" class=\"wrap\">","  <Milestones owner=\"{{route[0]}}\" name=\"{{route[1]}}\"/>","</div>"].join("\n");
     });
 
     // projects.mustache
     root.require.register('burnchart/src/templates/projects.js', function(exports, require, module) {
     
-      module.exports = ["{{#projects.list.length}}","  <div id=\"projects\">","    <div class=\"header\">","      <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>","      <h2>Projects</h2>","    </div>","","    <table>","      {{#projects.list}}","        {{#milestones}}","          <tr>","            <td class=\"repo\">","              <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>","            </td>","            <td>","              <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>","            </td>","            <td>","              <div class=\"progress\">","                <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>","                <span class=\"due\">{{{ format.due(due_on) }}}</span>","                <div class=\"outer bar\">","                  <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>","                </div>","              </div>","            </td>","          </tr>","        {{/milestones}}","      {{/projects.list}}","","    <!--","      <tr>","        <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","        <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">40%</span>","            <span class=\"due\">due on Friday</span>","            <div class=\"outer bar\">","              <div class=\"inner bar red\" style=\"width:40%\"></div>","            </div>","          </div>","        </td>","      </tr>","      <tr class=\"done\">","        <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","        <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">100%</span>","            <span class=\"due\">due tomorrow</span>","            <div class=\"outer bar\">","              <div class=\"inner bar green\" style=\"width:100%\"></div>","            </div>","          </div>","        </td>","      </tr>","      <tr>","        <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","        <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">27%</span>","            <span class=\"due\">due in 2 weeks</span>","            <div class=\"outer bar\">","              <div class=\"inner bar red\" style=\"width:27%\"></div>","            </div>","          </div>","        </td>","      </tr>","      <tr>","        <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","        <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">90%</span>","            <span class=\"due red\">overdue by a month</span>","            <div class=\"outer bar\">","              <div class=\"inner bar red\" style=\"width:90%\"></div>","            </div>","          </div>","        </td>","      </tr>","    -->","    </table>","","    <div class=\"footer\">","      <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>","    </div>","  </div>","{{/projects.list}}"].join("\n");
+      module.exports = ["{{#projects.list.length}}","  <div id=\"projects\">","    <div class=\"header\">","      <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>","      <h2>Projects</h2>","    </div>","","    <table>","      {{#projects.list}}","        {{#milestones}}","          <tr>","            <td class=\"repo\">","              <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>","            </td>","            <td>","              <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>","            </td>","            <td style=\"width:1%\">","              <div class=\"progress\">","                <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>","                <span class=\"due\">{{{ format.due(due_on) }}}</span>","                <div class=\"outer bar\">","                  <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>","                </div>","              </div>","            </td>","          </tr>","        {{/milestones}}","      {{/projects.list}}","    </table>","","    <div class=\"footer\">","      <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>","    </div>","  </div>","{{/projects.list.length}}","","<!--","  <tr>","    <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","    <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">40%</span>","        <span class=\"due\">due on Friday</span>","        <div class=\"outer bar\">","          <div class=\"inner bar red\" style=\"width:40%\"></div>","        </div>","      </div>","    </td>","  </tr>","  <tr class=\"done\">","    <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","    <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">100%</span>","        <span class=\"due\">due tomorrow</span>","        <div class=\"outer bar\">","          <div class=\"inner bar green\" style=\"width:100%\"></div>","        </div>","      </div>","    </td>","  </tr>","  <tr>","    <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","    <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">27%</span>","        <span class=\"due\">due in 2 weeks</span>","        <div class=\"outer bar\">","          <div class=\"inner bar red\" style=\"width:27%\"></div>","        </div>","      </div>","    </td>","  </tr>","  <tr>","    <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","    <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">90%</span>","        <span class=\"due red\">overdue by a month</span>","        <div class=\"outer bar\">","          <div class=\"inner bar red\" style=\"width:90%\"></div>","        </div>","      </div>","    </td>","  </tr>","-->"].join("\n");
     });
 
     // date.coffee
@@ -41479,6 +41483,33 @@ Router.prototype.mount = function(routes, path) {
       
     });
 
+    // milestones.coffee
+    root.require.register('burnchart/src/views/milestones.js', function(exports, require, module) {
+    
+      var Icons, mediator, projects;
+      
+      mediator = require('../modules/mediator');
+      
+      projects = require('../models/projects');
+      
+      Icons = require('./icons');
+      
+      module.exports = Ractive.extend({
+        'template': require('../templates/milestones'),
+        'components': {
+          Icons: Icons
+        },
+        'adapt': [Ractive.adaptors.Ractive],
+        init: function() {
+          return this.set('milestones', _.filter(projects.get('list'), {
+            'owner': this.get('owner'),
+            'name': this.get('name')
+          }));
+        }
+      });
+      
+    });
+
     // notify.coffee
     root.require.register('burnchart/src/views/notify.js', function(exports, require, module) {
     
@@ -41496,16 +41527,20 @@ Router.prototype.mount = function(routes, path) {
           'top': HEIGHT
         },
         init: function() {
-          var _this = this;
+          var defaults,
-          return mediator.on('!app/notify', function(text, type) {
+            _this = this;
-            if (type == null) {
+          defaults = {
-              type = '';
+            'text': '',
-            }
+            'type': '',
-            _this.set({
+            'system': false,
-              text: text,
+            'icon': 'megaphone'
-              type: type
+          };
-            });
+          return mediator.on('!app/notify', function(opts) {
-            _this.animate('top', 0, {
+            var pos;
+            opts = _.defaults(opts, defaults);
+            _this.set(opts);
+            pos = [0, 50][+opts.system];
+            _this.animate('top', pos, {
               'easing': d3.ease('bounce'),
               'duration': 800
             });
@@ -41643,30 +41678,18 @@ Router.prototype.mount = function(routes, path) {
     // project.coffee
     root.require.register('burnchart/src/views/pages/project.js', function(exports, require, module) {
     
-      var Hero, Projects, format;
+      var Milestones;
       
-      Hero = require('../hero');
+      Milestones = require('../milestones');
-      
-      Projects = require('../projects');
-      
-      format = require('../../utils/format');
       
       module.exports = Ractive.extend({
         'template': require('../../templates/pages/project'),
         'components': {
-          Hero: Hero,
+          Milestones: Milestones
-          Projects: Projects
-        },
-        'data': {
-          format: format
         },
         init: function() {
-          var name, owner, route, _ref;
+          var name, owner, _ref;
           _ref = this.get('route'), owner = _ref[0], name = _ref[1];
-          route = {
-            owner: owner,
-            name: name
-          };
           return document.title = "" + owner + "/" + name;
         }
       });

public/js/app.js

@@ -7,7 +7,7 @@
     // app.coffee
     root.require.register('burnchart/src/app.js', function(exports, require, module) {
     
-      var App, Header, Notify, Router, key, _i, _len, _ref;
+      var App, Header, Notify, key, router, _i, _len, _ref;
       
       _ref = ['utils/mixins', 'models/projects'];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -15,12 +15,12 @@
         require("./" + key);
       }
       
-      Router = require('./modules/router');
-      
       Header = require('./views/header');
       
       Notify = require('./views/notify');
       
+      router = require('./modules/router');
+      
       App = Ractive.extend({
         'template': require('./templates/layout'),
         'components': {
@@ -28,7 +28,7 @@
           Notify: Notify
         },
         init: function() {
-          return new Router();
+          return router.init('/');
         }
       });
       
@@ -744,7 +744,7 @@
         });
       };
       
-      router = Router({
+      module.exports = window.router = router = Router({
         '/': _.partial(route, 'index'),
         '/new/project': _.partial(route, 'new'),
         '/:owner/:name': _.partial(route, 'project'),
@@ -755,16 +755,14 @@
         },
         '/notify': function() {
           mediator.fire('!app/loading', true);
-          mediator.fire('!app/notify', 'You did something real good', 'warn');
+          mediator.fire('!app/notify', {
+            'text': 'You have some interesting news in your inbox. Go check it out now.',
+            'type': 'warn'
+          });
           return window.location.hash = '#';
         }
       });
       
-      module.exports = function() {
-        router.init('/');
-        return router;
-      };
-      
     });
 
     // header.mustache
@@ -791,10 +789,16 @@
       module.exports = ["<Notify/>","<Header/>","","<div id=\"page\">","  <!-- content loaded from a router -->","</div>","","<div id=\"footer\">","  <div class=\"wrap\">","    &copy; 2012-2014 <a href=\"http://cloudfi.re\">Cloudfire Systems</a>","  </div>","</div>"].join("\n");
     });
 
+    // milestones.mustache
+    root.require.register('burnchart/src/templates/milestones.js', function(exports, require, module) {
+    
+      module.exports = ["{{#milestones.length}}","  <div id=\"projects\">","    <div class=\"header\">","      <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>","      <h2>Milestones</h2>","    </div>","","    <table>","      {{#milestones}}","        <tr>","          <td>","            <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>","          </td>","          <td style=\"width:1%\">","            <div class=\"progress\">","              <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>","              <span class=\"due\">{{{ format.due(due_on) }}}</span>","              <div class=\"outer bar\">","                <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>","              </div>","            </div>","          </td>","        </tr>","      {{/milestones}}","    </table>","","    <div class=\"footer\">","      <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>","    </div>","  </div>","{{/milestones.length}}"].join("\n");
+    });
+
     // notify.mustache
     root.require.register('burnchart/src/templates/notify.js', function(exports, require, module) {
     
-      module.exports = ["{{#text}}","  <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","    <Icons icon=\"megaphone\"/>","    <p>{{text}}</p>","  </div>","{{/text}}"].join("\n");
+      module.exports = ["{{#text}}","  {{#system}}","    <div id=\"notify\" class=\"{{type}} system\" style=\"top:{{top}}%\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{else}}","    <div id=\"notify\" class=\"{{type}}\" style=\"top:{{-top}}px\">","      <Icons icon=\"{{icon}}\"/>","      <p>{{text}}</p>","    </div>","  {{/system}}","{{/text}}"].join("\n");
     });
 
     // chart.mustache
@@ -818,13 +822,13 @@
     // project.mustache
     root.require.register('burnchart/src/templates/pages/project.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"title\">","  <div class=\"wrap\">","    <h2 class=\"title\">radekstepan/disposable</h2>","  </div>","</div>","","<div id=\"content\" class=\"wrap\">","  Project milestones go here","</div>"].join("\n");
+      module.exports = ["<div id=\"title\">","  <div class=\"wrap\">","    <h2 class=\"title\">{{route.join('/')}}</h2>","  </div>","</div>","","<div id=\"content\" class=\"wrap\">","  <Milestones owner=\"{{route[0]}}\" name=\"{{route[1]}}\"/>","</div>"].join("\n");
     });
 
     // projects.mustache
     root.require.register('burnchart/src/templates/projects.js', function(exports, require, module) {
     
-      module.exports = ["{{#projects.list.length}}","  <div id=\"projects\">","    <div class=\"header\">","      <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>","      <h2>Projects</h2>","    </div>","","    <table>","      {{#projects.list}}","        {{#milestones}}","          <tr>","            <td class=\"repo\">","              <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>","            </td>","            <td>","              <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>","            </td>","            <td>","              <div class=\"progress\">","                <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>","                <span class=\"due\">{{{ format.due(due_on) }}}</span>","                <div class=\"outer bar\">","                  <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>","                </div>","              </div>","            </td>","          </tr>","        {{/milestones}}","      {{/projects.list}}","","    <!--","      <tr>","        <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","        <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">40%</span>","            <span class=\"due\">due on Friday</span>","            <div class=\"outer bar\">","              <div class=\"inner bar red\" style=\"width:40%\"></div>","            </div>","          </div>","        </td>","      </tr>","      <tr class=\"done\">","        <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","        <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">100%</span>","            <span class=\"due\">due tomorrow</span>","            <div class=\"outer bar\">","              <div class=\"inner bar green\" style=\"width:100%\"></div>","            </div>","          </div>","        </td>","      </tr>","      <tr>","        <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","        <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">27%</span>","            <span class=\"due\">due in 2 weeks</span>","            <div class=\"outer bar\">","              <div class=\"inner bar red\" style=\"width:27%\"></div>","            </div>","          </div>","        </td>","      </tr>","      <tr>","        <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","        <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","        <td>","          <div class=\"progress\">","            <span class=\"percent\">90%</span>","            <span class=\"due red\">overdue by a month</span>","            <div class=\"outer bar\">","              <div class=\"inner bar red\" style=\"width:90%\"></div>","            </div>","          </div>","        </td>","      </tr>","    -->","    </table>","","    <div class=\"footer\">","      <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>","    </div>","  </div>","{{/projects.list}}"].join("\n");
+      module.exports = ["{{#projects.list.length}}","  <div id=\"projects\">","    <div class=\"header\">","      <a href=\"#\" class=\"sort\"><Icons icon=\"sort-alphabet\"/> Sorted by priority</a>","      <h2>Projects</h2>","    </div>","","    <table>","      {{#projects.list}}","        {{#milestones}}","          <tr>","            <td class=\"repo\">","              <a class=\"project\" href=\"#{{owner}}/{{name}}\">{{owner}}/{{name}}</a>","            </td>","            <td>","              <a class=\"milestone\" href=\"#{{owner}}/{{name}}/{{number}}\">{{ title }}</a>","            </td>","            <td style=\"width:1%\">","              <div class=\"progress\">","                <span class=\"percent\">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>","                <span class=\"due\">{{{ format.due(due_on) }}}</span>","                <div class=\"outer bar\">","                  <div class=\"inner bar {{format.onTime(this)}}\" style=\"width:{{format.progress(closed_issues, open_issues)}}%\"></div>","                </div>","              </div>","            </td>","          </tr>","        {{/milestones}}","      {{/projects.list}}","    </table>","","    <div class=\"footer\">","      <a href=\"#\"><Icons icon=\"cog\"/> Edit</a>","    </div>","  </div>","{{/projects.list.length}}","","<!--","  <tr>","    <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","    <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">40%</span>","        <span class=\"due\">due on Friday</span>","        <div class=\"outer bar\">","          <div class=\"inner bar red\" style=\"width:40%\"></div>","        </div>","      </div>","    </td>","  </tr>","  <tr class=\"done\">","    <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","    <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">100%</span>","        <span class=\"due\">due tomorrow</span>","        <div class=\"outer bar\">","          <div class=\"inner bar green\" style=\"width:100%\"></div>","        </div>","      </div>","    </td>","  </tr>","  <tr>","    <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","    <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">27%</span>","        <span class=\"due\">due in 2 weeks</span>","        <div class=\"outer bar\">","          <div class=\"inner bar red\" style=\"width:27%\"></div>","        </div>","      </div>","    </td>","  </tr>","  <tr>","    <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","    <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","    <td>","      <div class=\"progress\">","        <span class=\"percent\">90%</span>","        <span class=\"due red\">overdue by a month</span>","        <div class=\"outer bar\">","          <div class=\"inner bar red\" style=\"width:90%\"></div>","        </div>","      </div>","    </td>","  </tr>","-->"].join("\n");
     });
 
     // date.coffee
@@ -1026,6 +1030,33 @@
       
     });
 
+    // milestones.coffee
+    root.require.register('burnchart/src/views/milestones.js', function(exports, require, module) {
+    
+      var Icons, mediator, projects;
+      
+      mediator = require('../modules/mediator');
+      
+      projects = require('../models/projects');
+      
+      Icons = require('./icons');
+      
+      module.exports = Ractive.extend({
+        'template': require('../templates/milestones'),
+        'components': {
+          Icons: Icons
+        },
+        'adapt': [Ractive.adaptors.Ractive],
+        init: function() {
+          return this.set('milestones', _.filter(projects.get('list'), {
+            'owner': this.get('owner'),
+            'name': this.get('name')
+          }));
+        }
+      });
+      
+    });
+
     // notify.coffee
     root.require.register('burnchart/src/views/notify.js', function(exports, require, module) {
     
@@ -1043,16 +1074,20 @@
           'top': HEIGHT
         },
         init: function() {
-          var _this = this;
+          var defaults,
-          return mediator.on('!app/notify', function(text, type) {
+            _this = this;
-            if (type == null) {
+          defaults = {
-              type = '';
+            'text': '',
-            }
+            'type': '',
-            _this.set({
+            'system': false,
-              text: text,
+            'icon': 'megaphone'
-              type: type
+          };
-            });
+          return mediator.on('!app/notify', function(opts) {
-            _this.animate('top', 0, {
+            var pos;
+            opts = _.defaults(opts, defaults);
+            _this.set(opts);
+            pos = [0, 50][+opts.system];
+            _this.animate('top', pos, {
               'easing': d3.ease('bounce'),
               'duration': 800
             });
@@ -1190,30 +1225,18 @@
     // project.coffee
     root.require.register('burnchart/src/views/pages/project.js', function(exports, require, module) {
     
-      var Hero, Projects, format;
+      var Milestones;
       
-      Hero = require('../hero');
+      Milestones = require('../milestones');
-      
-      Projects = require('../projects');
-      
-      format = require('../../utils/format');
       
       module.exports = Ractive.extend({
         'template': require('../../templates/pages/project'),
         'components': {
-          Hero: Hero,
+          Milestones: Milestones
-          Projects: Projects
-        },
-        'data': {
-          format: format
         },
         init: function() {
-          var name, owner, route, _ref;
+          var name, owner, _ref;
           _ref = this.get('route'), owner = _ref[0], name = _ref[1];
-          route = {
-            owner: owner,
-            name: name
-          };
           return document.title = "" + owner + "/" + name;
         }
       });

src/app.coffee

@@ -4,9 +4,9 @@
 ] )
 
 
-Router = require './modules/router'
 Header = require './views/header'
 Notify = require './views/notify'
+router = require './modules/router'
 
 App = Ractive.extend
   
@@ -15,6 +15,6 @@ App = Ractive.extend
   'components': { Header, Notify }
 
   init: ->
-    new Router()
+    router.init '/'
 
 module.exports = new App()

src/modules/router.coffee

@@ -6,7 +6,7 @@ route = (page, args...) ->
   Page = require "../views/pages/#{page}"
   new Page { el, 'data': { 'route': args } }
 
-router = Router
+module.exports = window.router = router = Router
   '/':                        _.partial route, 'index'
   '/new/project':             _.partial route, 'new'
   '/:owner/:name':            _.partial route, 'project'
@@ -17,10 +17,7 @@ router = Router
     window.location.hash = '#'
   '/notify': ->
     mediator.fire '!app/loading', yes
-    mediator.fire '!app/notify', 'You did something real good', 'warn'
+    mediator.fire '!app/notify',
-    window.location.hash = '#'
+      'text': 'You have some interesting news in your inbox. Go check it out now.'
-
+      'type': 'warn'
-module.exports = ->
+    window.location.hash = '#'
-  # Init the routes.
-  router.init '/'
-  router

src/styles/app.styl

@@ -40,6 +40,13 @@ ul
   border-top: 3px solid #AAAFBF
   border-bottom: 1px solid #F3F4F8
 
+  // system-wide notification
+  &.system
+    top: 0%  // hide from view
+    left: 50%
+    transform: translateX(-50%) translateY(-50%)
+    width: 500px
+
   &.success
     border-top-color: #00B361
     color: #00B361
@@ -53,15 +60,17 @@ ul
     color: $strong_color
 
   .icon, p
-    display: inline-block
+    display: block
 
   .icon
     font-size: 26px
     padding: 18px
     width: 38px
+    float: left
 
   p
-    margin-right: 10px
+    padding: 20px 20px 20px 74px
+    text-align: justify
 
 #head
   background: $strong_color

src/templates/milestones.mustache

@@ -0,0 +1,31 @@
+{{#milestones.length}}
+  <div id="projects">
+    <div class="header">
+      <a href="#" class="sort"><Icons icon="sort-alphabet"/> Sorted by priority</a>
+      <h2>Milestones</h2>
+    </div>
+
+    <table>
+      {{#milestones}}
+        <tr>
+          <td>
+            <a class="milestone" href="#{{owner}}/{{name}}/{{number}}">{{ title }}</a>
+          </td>
+          <td style="width:1%">
+            <div class="progress">
+              <span class="percent">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>
+              <span class="due">{{{ format.due(due_on) }}}</span>
+              <div class="outer bar">
+                <div class="inner bar {{format.onTime(this)}}" style="width:{{format.progress(closed_issues, open_issues)}}%"></div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      {{/milestones}}
+    </table>
+
+    <div class="footer">
+      <a href="#"><Icons icon="cog"/> Edit</a>
+    </div>
+  </div>
+{{/milestones.length}}

src/templates/notify.mustache

@@ -1,6 +1,13 @@
 {{#text}}
-  <div id="notify" class="{{type}}" style="top:{{-top}}px">
+  {{#system}}
-    <Icons icon="megaphone"/>
+    <div id="notify" class="{{type}} system" style="top:{{top}}%">
-    <p>{{text}}</p>
+      <Icons icon="{{icon}}"/>
-  </div>
+      <p>{{text}}</p>
+    </div>
+  {{else}}
+    <div id="notify" class="{{type}}" style="top:{{-top}}px">
+      <Icons icon="{{icon}}"/>
+      <p>{{text}}</p>
+    </div>
+  {{/system}}
 {{/text}}

src/templates/pages/project.mustache

@@ -1,9 +1,9 @@
 <div id="title">
   <div class="wrap">
-    <h2 class="title">radekstepan/disposable</h2>
+    <h2 class="title">{{route.join('/')}}</h2>
   </div>
 </div>
 
 <div id="content" class="wrap">
-  Project milestones go here
+  <Milestones owner="{{route[0]}}" name="{{route[1]}}"/>
 </div>

src/templates/projects.mustache

@@ -15,7 +15,7 @@
             <td>
               <a class="milestone" href="#{{owner}}/{{name}}/{{number}}">{{ title }}</a>
             </td>
-            <td>
+            <td style="width:1%">
               <div class="progress">
                 <span class="percent">{{Math.floor(format.progress(closed_issues, open_issues))}}%</span>
                 <span class="due">{{{ format.due(due_on) }}}</span>
@@ -27,65 +27,65 @@
           </tr>
         {{/milestones}}
       {{/projects.list}}
-
-    <!--
-      <tr>
-        <td><a class="repo" href="#">radekstepan/disposable</a></td>
-        <td><span class="milestone">Milestone 1.0 <span class="icon down-open"></span></td>
-        <td>
-          <div class="progress">
-            <span class="percent">40%</span>
-            <span class="due">due on Friday</span>
-            <div class="outer bar">
-              <div class="inner bar red" style="width:40%"></div>
-            </div>
-          </div>
-        </td>
-      </tr>
-      <tr class="done">
-        <td><a class="repo" href="#">radekstepan/burnchart</a></td>
-        <td><span class="milestone">Beta Milestone <span class="icon down-open"></span></a></td>
-        <td>
-          <div class="progress">
-            <span class="percent">100%</span>
-            <span class="due">due tomorrow</span>
-            <div class="outer bar">
-              <div class="inner bar green" style="width:100%"></div>
-            </div>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td><a class="repo" href="#">intermine/intermine</a></td>
-        <td><span class="milestone">Emma Release 96 <span class="icon down-open"></span></a></td>
-        <td>
-          <div class="progress">
-            <span class="percent">27%</span>
-            <span class="due">due in 2 weeks</span>
-            <div class="outer bar">
-              <div class="inner bar red" style="width:27%"></div>
-            </div>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td><a class="repo" href="#">microsoft/windows</a></td>
-        <td><span class="milestone">RC 9 <span class="icon down-open"></span></a></td>
-        <td>
-          <div class="progress">
-            <span class="percent">90%</span>
-            <span class="due red">overdue by a month</span>
-            <div class="outer bar">
-              <div class="inner bar red" style="width:90%"></div>
-            </div>
-          </div>
-        </td>
-      </tr>
-    -->
     </table>
 
     <div class="footer">
       <a href="#"><Icons icon="cog"/> Edit</a>
     </div>
   </div>
-{{/projects.list}}
+{{/projects.list.length}}
+
+<!--
+  <tr>
+    <td><a class="repo" href="#">radekstepan/disposable</a></td>
+    <td><span class="milestone">Milestone 1.0 <span class="icon down-open"></span></td>
+    <td>
+      <div class="progress">
+        <span class="percent">40%</span>
+        <span class="due">due on Friday</span>
+        <div class="outer bar">
+          <div class="inner bar red" style="width:40%"></div>
+        </div>
+      </div>
+    </td>
+  </tr>
+  <tr class="done">
+    <td><a class="repo" href="#">radekstepan/burnchart</a></td>
+    <td><span class="milestone">Beta Milestone <span class="icon down-open"></span></a></td>
+    <td>
+      <div class="progress">
+        <span class="percent">100%</span>
+        <span class="due">due tomorrow</span>
+        <div class="outer bar">
+          <div class="inner bar green" style="width:100%"></div>
+        </div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td><a class="repo" href="#">intermine/intermine</a></td>
+    <td><span class="milestone">Emma Release 96 <span class="icon down-open"></span></a></td>
+    <td>
+      <div class="progress">
+        <span class="percent">27%</span>
+        <span class="due">due in 2 weeks</span>
+        <div class="outer bar">
+          <div class="inner bar red" style="width:27%"></div>
+        </div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td><a class="repo" href="#">microsoft/windows</a></td>
+    <td><span class="milestone">RC 9 <span class="icon down-open"></span></a></td>
+    <td>
+      <div class="progress">
+        <span class="percent">90%</span>
+        <span class="due red">overdue by a month</span>
+        <div class="outer bar">
+          <div class="inner bar red" style="width:90%"></div>
+        </div>
+      </div>
+    </td>
+  </tr>
+-->

src/views/milestones.coffee

@@ -0,0 +1,16 @@
+mediator = require '../modules/mediator'
+projects = require '../models/projects'
+Icons    = require './icons'
+
+module.exports = Ractive.extend
+
+  'template': require '../templates/milestones'
+
+  'components': { Icons }
+
+  'adapt': [ Ractive.adaptors.Ractive ]
+
+  init: ->
+    @set 'milestones', _.filter projects.get('list'),
+      'owner': @get 'owner'
+      'name':  @get 'name'

src/views/notify.coffee

@@ -11,18 +11,35 @@ module.exports = Ractive.extend
     'top': HEIGHT
 
   init: ->
-    # Save the notify text on us.
+    defaults =
-    mediator.on '!app/notify', (text, type='') =>
+      'text': ''
-      @set { text, type }
+      'type': ''
-      @animate 'top', 0,      # slide to view
+      'system': no
+      'icon': 'megaphone'
+
+    # Animate.
+    # type:   alert/warn/success
+    # system: yes/no
+    mediator.on '!app/notify', (opts) =>
+      opts = _.defaults opts, defaults
+
+      # Set the text.
+      @set opts
+      # Which position to slide to?
+      pos = [ 0, 50 ][ +opts.system ] # 0px or 50% from top
+      # Slide into view.
+      @animate 'top', pos,
         'easing': d3.ease('bounce')
         'duration': 800
       _.delay =>
-        @animate 'top', HEIGHT,  # slide out of view
+        # Slide out of the view.
+        @animate 'top', HEIGHT,
           'easing': d3.ease('back')
           'complete': =>
-            @set 'text', null # reset
+            # Reset the text when all is done.
-      , 5e3 # ttl
+            @set 'text', null
+      # Ttl.
+      , 5e3
 
   'components': { Icons }
 

src/views/pages/project.coffee

@@ -1,17 +1,12 @@
-Hero     = require '../hero'
+Milestones = require '../milestones'
-Projects = require '../projects'
-format   = require '../../utils/format'
 
 module.exports = Ractive.extend
 
   'template': require '../../templates/pages/project'
 
-  'components': { Hero, Projects }
+  'components': { Milestones }
-
-  'data': { format }
 
   init: ->
     [ owner, name ] = @get 'route'
-    route = { owner, name }
     
     document.title = "#{owner}/#{name}"