mirror of
https://github.com/status-im/burnchart.git
synced 2025-02-17 04:46:30 +00:00
add progress bars & better hero banner
This commit is contained in:
Radek Stepan
parent
79e2d4a00b
commit
2fe7b41b17
@ -409,6 +409,7 @@ table {
|
||||
@font-face{font-family:'MuseoSans500Regular';src:url("fonts/museo-sans-500.eot");src:url("fonts/museo-sans-500.eot?#iefix") format('embedded-opentype'),url("fonts/museo-sans-500.woff") format('woff'),url("fonts/museo-sans-500.ttf") format('truetype'),url("fonts/museo-sans-500.svg#MuseoSans500Regular") format('svg');font-weight:normal;font-style:normal}
|
||||
@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;}
|
||||
.icon:before{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;line-height:1em}
|
||||
.icon.cog:before{content:'\e800'}
|
||||
.icon.search:before{content:'\e801'}
|
||||
@ -427,11 +428,13 @@ ul li{display:inline-block}
|
||||
.icon{margin-right:4px}
|
||||
.wrap{width:800px;margin:0 auto}
|
||||
#head{background:#252f39;color:#86939c;height:64px;}
|
||||
#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:#1c262f;display:inline-block;}
|
||||
#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:rgba(0,0,0,0.3);display:inline-block;}
|
||||
#head h1 .icon{margin:0}
|
||||
#head div.search{position:relative;display:inline-block;margin:13px 0 0 20px;vertical-align:top;}
|
||||
#head div.search .icon{position:absolute;color:#303d4a;top:8px;left:12px}
|
||||
#head div.search input{background:#1c262f;border:0;padding:10px 12px 10px 36px;font-family:'MuseoSlab500Regular',serif;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
|
||||
#head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}
|
||||
#head .q .icon{position:absolute;color:#303d4a;}
|
||||
#head .q .icon.search{top:8px;left:12px}
|
||||
#head .q .icon.down-open{top:8px;right:12px}
|
||||
#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-family:'MuseoSlab500Regular',serif;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
|
||||
#head ul{display:inline-block;}
|
||||
#head ul li{margin-left:30px}
|
||||
#head a{font-weight:bold;}
|
||||
@ -442,20 +445,34 @@ ul li{display:inline-block}
|
||||
#title .milestone{font-size:16px;font-weight:bold;margin:0 20px}
|
||||
#title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;color:#aaa}
|
||||
#content{padding:20px;margin-top:20px;}
|
||||
#content #hero{background:url("img/tweed.png") top left;-webkit-border-radius:2px;border-radius:2px;border:1px solid #dde1ed;margin-bottom:30px;}
|
||||
#content #hero .content{-webkit-border-radius:2px;border-radius:2px;color:#fff;padding:30px;background:rgba(124,252,0,0.4);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}
|
||||
#content #hero{background:url("img/hires/2.jpg") center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-webkit-border-radius:2px;border-radius:2px;margin-bottom:30px;}
|
||||
#content #hero .content{-webkit-border-radius:2px;border-radius:2px;color:#fff;padding:30px;background:rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}
|
||||
#content #hero .content h2{margin-bottom:20px;margin-left:140px}
|
||||
#content #hero .content p{font-family:'MuseoSlab500Regular',serif;font-size:18px;line-height:24px;margin-left:140px}
|
||||
#content #hero .content .address{font-size:120px;float:left}
|
||||
#content #hero .content .cta{text-align:center;margin-top:10px;}
|
||||
#content #hero .content .cta a{font-weight:bold;font-family:'MuseoSlab500Regular',serif;background:#3a591d;color:#fff;padding:10px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block}
|
||||
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:10px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
|
||||
#content #hero .content .cta a.primary{font-weight:bold;background:#00b361;color:#fff}
|
||||
#content #hero .content .cta a.secondary{background:#fff;color:#00b361}
|
||||
#content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
|
||||
#content #repos h2{color:#3e4457;display:inline-block}
|
||||
#content #repos .sort{float:right;line-height:30px}
|
||||
#content #repos table{width:100%;}
|
||||
#content #repos table tr td{background:#fdfdfd;padding:20px 30px;border-bottom:1px solid #eaecf2;}
|
||||
#content #repos table tr td{background:#fcfcfc;padding:20px 30px;border-bottom:1px solid #eaecf2;}
|
||||
#content #repos table tr td .milestone .icon{font-size:10px;margin:0}
|
||||
#content #repos table tr td .progress{width:200px;}
|
||||
#content #repos table tr td .progress .percent,#content #repos table tr td .progress .due{color:#9399ad;font-size:13px}
|
||||
#content #repos table tr td .progress .percent{float:right}
|
||||
#content #repos table tr td .progress .bar{-webkit-border-radius:4px;border-radius:4px;background:#eaecf2;height:10px;width:100%;}
|
||||
#content #repos table tr td .progress .bar.inner{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
|
||||
#content #repos table tr td .progress .bar.red{background:#ff2955}
|
||||
#content #repos table tr td .progress .bar.green{background:#4bda66}
|
||||
#content #repos table tr td .progress .due.red{color:#ff2955;font-weight:bold}
|
||||
#content #repos table tr td:first-child a{color:#3e4457;font-weight:bold}
|
||||
#content #repos table tr:nth-child(2) td{background:#fefefe}
|
||||
#content #repos table tr:last-child td{border:0}
|
||||
#content #repos table tr.done td{background:#ebf6f1;}
|
||||
#content #repos table tr.done td .milestone,#content #repos table tr.done td .percent,#content #repos table tr.done td .due{color:#9fc9b5}
|
||||
#content #repos .header,#content #repos .footer{padding:20px 30px}
|
||||
#content #repos .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
|
||||
#content #repos .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
|
||||
@ -29748,6 +29748,8 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
|
||||
|
||||
var App;
|
||||
|
||||
document.title = 'BurnChart: GitHub Burndown Chart as a Service';
|
||||
|
||||
App = Ractive.extend({
|
||||
template: require('./templates/layout'),
|
||||
init: function() {}
|
||||
@ -29760,7 +29762,7 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
|
||||
// layout.mustache
|
||||
root.require.register('burnchart/src/templates/layout.js', function(exports, require, module) {
|
||||
|
||||
module.exports = ["<div id=\"head\">"," <div class=\"right\">"," <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>"," </div>",""," <h1><span class=\"icon fire-station\"></span></h1>",""," <div class=\"search\">"," <span class=\"icon search\"></span>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>",""," <ul>"," <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," </ul>","</div>","","<div id=\"title\">"," <div class=\"wrap\">"," <h2>Disposable Project</h2>"," <span class=\"milestone\">Milestone 1.0</span>"," <p class=\"description\">The one where we deliver all that we promised.</p>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," <div id=\"hero\">"," <div class=\"content\">"," <span class=\"icon address\"></span>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#\"><span class=\"icon plus-circled\"></span> Add your project</a>"," </div>"," </div>"," </div>",""," <div id=\"repos\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">1.0</a></td>"," <td><span class=\"status\">due in 5 days on track</span></td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">MVP</a></td>"," <td><span class=\"status\">due today</span></td>"," </tr>"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><span class=\"icon cog\"></span> Edit</a>"," </div>"," </div>","</div>","","<div id=\"footer\">"," <div class=\"wrap\">"," © 2012-2014 Radek Stepan"," </div>","</div>"].join("\n");
|
||||
module.exports = ["<div id=\"head\">"," <div class=\"right\">"," <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>"," </div>",""," <h1><span class=\"icon fire-station\"></span></h1>",""," <div class=\"q\">"," <span class=\"icon search\"></span>"," <span class=\"icon down-open\"></span>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>",""," <ul>"," <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," </ul>","</div>","","<div id=\"title\">"," <div class=\"wrap\">"," <h2>Disposable Project</h2>"," <span class=\"milestone\">Milestone 1.0</span>"," <p class=\"description\">The one where we deliver all that we promised.</p>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," <div id=\"hero\">"," <div class=\"content\">"," <span class=\"icon address\"></span>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#\" class=\"primary\"><span class=\"icon plus-circled\"></span> Add your project</a>"," <a href=\"#\" class=\"secondary\">Read the Guide</a>"," </div>"," </div>"," </div>",""," <div id=\"repos\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></a></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=\"#\"><span class=\"icon cog\"></span> Edit</a>"," </div>"," </div>","</div>","","<div id=\"footer\">"," <div class=\"wrap\">"," © 2012-2014 Radek Stepan"," </div>","</div>"].join("\n");
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
@font-face{font-family:'MuseoSans500Regular';src:url("fonts/museo-sans-500.eot");src:url("fonts/museo-sans-500.eot?#iefix") format('embedded-opentype'),url("fonts/museo-sans-500.woff") format('woff'),url("fonts/museo-sans-500.ttf") format('truetype'),url("fonts/museo-sans-500.svg#MuseoSans500Regular") format('svg');font-weight:normal;font-style:normal}
|
||||
@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;}
|
||||
.icon:before{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;line-height:1em}
|
||||
.icon.cog:before{content:'\e800'}
|
||||
.icon.search:before{content:'\e801'}
|
||||
@ -20,11 +21,13 @@ ul li{display:inline-block}
|
||||
.icon{margin-right:4px}
|
||||
.wrap{width:800px;margin:0 auto}
|
||||
#head{background:#252f39;color:#86939c;height:64px;}
|
||||
#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:#1c262f;display:inline-block;}
|
||||
#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:rgba(0,0,0,0.3);display:inline-block;}
|
||||
#head h1 .icon{margin:0}
|
||||
#head div.search{position:relative;display:inline-block;margin:13px 0 0 20px;vertical-align:top;}
|
||||
#head div.search .icon{position:absolute;color:#303d4a;top:8px;left:12px}
|
||||
#head div.search input{background:#1c262f;border:0;padding:10px 12px 10px 36px;font-family:'MuseoSlab500Regular',serif;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
|
||||
#head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}
|
||||
#head .q .icon{position:absolute;color:#303d4a;}
|
||||
#head .q .icon.search{top:8px;left:12px}
|
||||
#head .q .icon.down-open{top:8px;right:12px}
|
||||
#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-family:'MuseoSlab500Regular',serif;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
|
||||
#head ul{display:inline-block;}
|
||||
#head ul li{margin-left:30px}
|
||||
#head a{font-weight:bold;}
|
||||
@ -35,20 +38,34 @@ ul li{display:inline-block}
|
||||
#title .milestone{font-size:16px;font-weight:bold;margin:0 20px}
|
||||
#title .description{display:inline-block;font-family:'MuseoSlab500Regular',serif;color:#aaa}
|
||||
#content{padding:20px;margin-top:20px;}
|
||||
#content #hero{background:url("img/tweed.png") top left;-webkit-border-radius:2px;border-radius:2px;border:1px solid #dde1ed;margin-bottom:30px;}
|
||||
#content #hero .content{-webkit-border-radius:2px;border-radius:2px;color:#fff;padding:30px;background:rgba(124,252,0,0.4);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}
|
||||
#content #hero{background:url("img/hires/2.jpg") center;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-webkit-border-radius:2px;border-radius:2px;margin-bottom:30px;}
|
||||
#content #hero .content{-webkit-border-radius:2px;border-radius:2px;color:#fff;padding:30px;background:rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);}
|
||||
#content #hero .content h2{margin-bottom:20px;margin-left:140px}
|
||||
#content #hero .content p{font-family:'MuseoSlab500Regular',serif;font-size:18px;line-height:24px;margin-left:140px}
|
||||
#content #hero .content .address{font-size:120px;float:left}
|
||||
#content #hero .content .cta{text-align:center;margin-top:10px;}
|
||||
#content #hero .content .cta a{font-weight:bold;font-family:'MuseoSlab500Regular',serif;background:#3a591d;color:#fff;padding:10px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block}
|
||||
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:10px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
|
||||
#content #hero .content .cta a.primary{font-weight:bold;background:#00b361;color:#fff}
|
||||
#content #hero .content .cta a.secondary{background:#fff;color:#00b361}
|
||||
#content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
|
||||
#content #repos h2{color:#3e4457;display:inline-block}
|
||||
#content #repos .sort{float:right;line-height:30px}
|
||||
#content #repos table{width:100%;}
|
||||
#content #repos table tr td{background:#fdfdfd;padding:20px 30px;border-bottom:1px solid #eaecf2;}
|
||||
#content #repos table tr td{background:#fcfcfc;padding:20px 30px;border-bottom:1px solid #eaecf2;}
|
||||
#content #repos table tr td .milestone .icon{font-size:10px;margin:0}
|
||||
#content #repos table tr td .progress{width:200px;}
|
||||
#content #repos table tr td .progress .percent,#content #repos table tr td .progress .due{color:#9399ad;font-size:13px}
|
||||
#content #repos table tr td .progress .percent{float:right}
|
||||
#content #repos table tr td .progress .bar{-webkit-border-radius:4px;border-radius:4px;background:#eaecf2;height:10px;width:100%;}
|
||||
#content #repos table tr td .progress .bar.inner{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
|
||||
#content #repos table tr td .progress .bar.red{background:#ff2955}
|
||||
#content #repos table tr td .progress .bar.green{background:#4bda66}
|
||||
#content #repos table tr td .progress .due.red{color:#ff2955;font-weight:bold}
|
||||
#content #repos table tr td:first-child a{color:#3e4457;font-weight:bold}
|
||||
#content #repos table tr:nth-child(2) td{background:#fefefe}
|
||||
#content #repos table tr:last-child td{border:0}
|
||||
#content #repos table tr.done td{background:#ebf6f1;}
|
||||
#content #repos table tr.done td .milestone,#content #repos table tr.done td .percent,#content #repos table tr.done td .due{color:#9fc9b5}
|
||||
#content #repos .header,#content #repos .footer{padding:20px 30px}
|
||||
#content #repos .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
|
||||
#content #repos .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
|
||||
@ -214,6 +214,8 @@
|
||||
|
||||
var App;
|
||||
|
||||
document.title = 'BurnChart: GitHub Burndown Chart as a Service';
|
||||
|
||||
App = Ractive.extend({
|
||||
template: require('./templates/layout'),
|
||||
init: function() {}
|
||||
@ -226,7 +228,7 @@
|
||||
// layout.mustache
|
||||
root.require.register('burnchart/src/templates/layout.js', function(exports, require, module) {
|
||||
|
||||
module.exports = ["<div id=\"head\">"," <div class=\"right\">"," <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>"," </div>",""," <h1><span class=\"icon fire-station\"></span></h1>",""," <div class=\"search\">"," <span class=\"icon search\"></span>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>",""," <ul>"," <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," </ul>","</div>","","<div id=\"title\">"," <div class=\"wrap\">"," <h2>Disposable Project</h2>"," <span class=\"milestone\">Milestone 1.0</span>"," <p class=\"description\">The one where we deliver all that we promised.</p>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," <div id=\"hero\">"," <div class=\"content\">"," <span class=\"icon address\"></span>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#\"><span class=\"icon plus-circled\"></span> Add your project</a>"," </div>"," </div>"," </div>",""," <div id=\"repos\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">1.0</a></td>"," <td><span class=\"status\">due in 5 days on track</span></td>"," </tr>"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>"," <td><span class=\"milestone\">MVP</a></td>"," <td><span class=\"status\">due today</span></td>"," </tr>"," </table>",""," <div class=\"footer\">"," <a href=\"#\"><span class=\"icon cog\"></span> Edit</a>"," </div>"," </div>","</div>","","<div id=\"footer\">"," <div class=\"wrap\">"," © 2012-2014 Radek Stepan"," </div>","</div>"].join("\n");
|
||||
module.exports = ["<div id=\"head\">"," <div class=\"right\">"," <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>"," </div>",""," <h1><span class=\"icon fire-station\"></span></h1>",""," <div class=\"q\">"," <span class=\"icon search\"></span>"," <span class=\"icon down-open\"></span>"," <input type=\"text\" placeholder=\"Jump to...\">"," </div>",""," <ul>"," <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>"," <li><a href=\"#\" class=\"faq\">FAQ</a></li>"," </ul>","</div>","","<div id=\"title\">"," <div class=\"wrap\">"," <h2>Disposable Project</h2>"," <span class=\"milestone\">Milestone 1.0</span>"," <p class=\"description\">The one where we deliver all that we promised.</p>"," </div>","</div>","","<div id=\"content\" class=\"wrap\">"," <div id=\"hero\">"," <div class=\"content\">"," <span class=\"icon address\"></span>"," <h2>See your project progress</h2>"," <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>"," <div class=\"cta\">"," <a href=\"#\" class=\"primary\"><span class=\"icon plus-circled\"></span> Add your project</a>"," <a href=\"#\" class=\"secondary\">Read the Guide</a>"," </div>"," </div>"," </div>",""," <div id=\"repos\">"," <div class=\"header\">"," <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>"," <h2>Projects</h2>"," </div>",""," <table>"," <tr>"," <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>"," <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></a></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=\"#\"><span class=\"icon cog\"></span> Edit</a>"," </div>"," </div>","</div>","","<div id=\"footer\">"," <div class=\"wrap\">"," © 2012-2014 Radek Stepan"," </div>","</div>"].join("\n");
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
BIN
public/img/hires/1.jpg
Normal file
BIN
public/img/hires/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
public/img/hires/2.jpg
Normal file
BIN
public/img/hires/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
@ -1,3 +1,5 @@
|
||||
document.title = 'BurnChart: GitHub Burndown Chart as a Service'
|
||||
|
||||
App = Ractive.extend
|
||||
|
||||
template: require './templates/layout'
|
||||
|
||||
@ -40,26 +40,32 @@ ul
|
||||
padding: 10px 24px
|
||||
line-height: 44px
|
||||
height: 44px
|
||||
background: #1C262F
|
||||
background: rgba(#000, 30%)
|
||||
display: inline-block
|
||||
|
||||
.icon
|
||||
margin: 0
|
||||
|
||||
div.search
|
||||
.q
|
||||
position: relative
|
||||
display: inline-block
|
||||
margin: 13px 0 0 20px
|
||||
margin: 13px 20px 0 20px
|
||||
vertical-align: top
|
||||
|
||||
.icon
|
||||
position: absolute
|
||||
color: #303D4A
|
||||
top: 8px
|
||||
left: 12px
|
||||
|
||||
&.search
|
||||
top: 8px
|
||||
left: 12px
|
||||
|
||||
&.down-open
|
||||
top: 8px
|
||||
right: 12px
|
||||
|
||||
input
|
||||
background: #1C262F
|
||||
background: rgba(#000, 30%)
|
||||
border: 0
|
||||
padding: 10px 12px 10px 36px
|
||||
font-family: $serif_font
|
||||
@ -109,16 +115,19 @@ ul
|
||||
margin-top: 20px
|
||||
|
||||
#hero
|
||||
background: url('img/tweed.png') top left
|
||||
background: url('img/hires/2.jpg') center
|
||||
background-size: cover
|
||||
border-radius: 2px
|
||||
border: 1px solid #DDE1ED
|
||||
// border: 1px solid #DDE1ED
|
||||
margin-bottom: 30px
|
||||
|
||||
.content
|
||||
border-radius: 2px
|
||||
color: #FFF
|
||||
padding: 30px
|
||||
background: rgba(lawngreen, 40%)
|
||||
// background: rgba(lawngreen, 40%)
|
||||
// background: #33AADD
|
||||
background: rgba(#000, 30%)
|
||||
box-shadow: inset 0 1px 2px rgba(#000, 20%)
|
||||
|
||||
h2
|
||||
@ -140,13 +149,21 @@ ul
|
||||
margin-top: 10px
|
||||
|
||||
a
|
||||
font-weight: bold
|
||||
font-family: $serif_font
|
||||
background: darken(#619530, 40%)
|
||||
color: #FFF
|
||||
// background: rgba(#000, 40%)
|
||||
padding: 10px 20px
|
||||
border-radius: 2px
|
||||
display: inline-block
|
||||
margin: 0 4px
|
||||
|
||||
&.primary
|
||||
font-weight: bold
|
||||
background: #00B361
|
||||
color: #FFF
|
||||
|
||||
&.secondary
|
||||
background: #FFF
|
||||
color: #00B361
|
||||
|
||||
#repos
|
||||
border: 1px solid #CDCECF
|
||||
@ -165,19 +182,65 @@ ul
|
||||
|
||||
tr
|
||||
td
|
||||
background: lighten(#FCFCFC, 30%)
|
||||
background: #FCFCFC
|
||||
padding: 20px 30px
|
||||
border-bottom: 1px solid #EAECF2
|
||||
|
||||
.milestone
|
||||
.icon
|
||||
font-size: 10px
|
||||
margin: 0
|
||||
|
||||
.progress
|
||||
width: 200px
|
||||
|
||||
.percent, .due
|
||||
color: darken(#C1C4D0, 20%)
|
||||
font-size: 13px
|
||||
|
||||
.percent
|
||||
float: right
|
||||
|
||||
.bar
|
||||
border-radius: 4px
|
||||
background: #EAECF2
|
||||
height: 10px
|
||||
width: 100%
|
||||
|
||||
&.inner
|
||||
box-shadow: inset 0 1px 2px rgba(#000, 20%)
|
||||
|
||||
&.red
|
||||
background: #FF2955
|
||||
|
||||
&.green
|
||||
background: #4BDA66
|
||||
|
||||
.due
|
||||
&.red
|
||||
color: #FF2955
|
||||
font-weight: bold
|
||||
|
||||
&:first-child
|
||||
a
|
||||
color: #3E4457
|
||||
font-weight: bold
|
||||
|
||||
&:nth-child(2)
|
||||
td
|
||||
background: lighten(#FCFCFC, 60%)
|
||||
|
||||
&:last-child
|
||||
td
|
||||
border: 0
|
||||
|
||||
&.done
|
||||
td
|
||||
background: #EBF6F1
|
||||
|
||||
.milestone, .percent, .due
|
||||
color: #9FC9B5
|
||||
|
||||
.header, .footer
|
||||
padding: 20px 30px
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.icon
|
||||
vertical-align: middle
|
||||
|
||||
&:before
|
||||
font-family: "Fontello"
|
||||
font-style: normal
|
||||
|
||||
@ -5,8 +5,9 @@
|
||||
|
||||
<h1><span class="icon fire-station"></span></h1>
|
||||
|
||||
<div class="search">
|
||||
<div class="q">
|
||||
<span class="icon search"></span>
|
||||
<span class="icon down-open"></span>
|
||||
<input type="text" placeholder="Jump to...">
|
||||
</div>
|
||||
|
||||
@ -31,7 +32,8 @@
|
||||
<h2>See your project progress</h2>
|
||||
<p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
|
||||
<div class="cta">
|
||||
<a href="#"><span class="icon plus-circled"></span> Add your project</a>
|
||||
<a href="#" class="primary"><span class="icon plus-circled"></span> Add your project</a>
|
||||
<a href="#" class="secondary">Read the Guide</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,13 +47,55 @@
|
||||
<table>
|
||||
<tr>
|
||||
<td><a class="repo" href="#">radekstepan/disposable</a></td>
|
||||
<td><span class="milestone">1.0</a></td>
|
||||
<td><span class="status">due in 5 days on track</span></td>
|
||||
<td><span class="milestone">Milestone 1.0 <span class="icon down-open"></span></a></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="#">radekstepan/burnchart</a></td>
|
||||
<td><span class="milestone">MVP</a></td>
|
||||
<td><span class="status">due today</span></td>
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user