router
This commit is contained in:
Radek Stepan
parent
9737a309c8
commit
3115872d4b
|
|
@ -33,6 +33,7 @@ module.exports = (grunt) ->
|
|||
'vendor/ractive-adaptor/adaptor.js'
|
||||
'vendor/firebase/firebase.js'
|
||||
'vendor/firebase-simple-login/firebase-simple-login.js'
|
||||
'vendor/grapnel/src/grapnel.js'
|
||||
# Our app.
|
||||
'public/js/app.js'
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1 +1,5 @@
|
|||
# burnchart
|
||||
# burnchart
|
||||
|
||||
1. Do not show login/logged-in state when we are still fetching that information from Firebase
|
||||
1. Handle 404 on routes; from catch all check if '/' or go 404 controller
|
||||
1. Variable document.title on different pages
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
"ractive": "~0.5.5",
|
||||
"ractive-adaptor": "radekstepan/ractive-adaptor-ractive",
|
||||
"firebase": "~1.0.21",
|
||||
"firebase-simple-login": "~1.6.3"
|
||||
"firebase-simple-login": "~1.6.3",
|
||||
"grapnel": "~0.4.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -471,6 +471,20 @@ ul li{display:inline-block}
|
|||
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
|
||||
#content #hero .content .cta a.primary{font-weight:bold;background:#c1041c;color:#fff}
|
||||
#content #hero .content .cta a.secondary{background:#fff;color:#c1041c}
|
||||
#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;background:#fff;width:400px;}
|
||||
#content #add h2{color:#3e4457}
|
||||
#content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
|
||||
#content #add p a{color:#3e4457}
|
||||
#content #add .form{padding:20px;}
|
||||
#content #add .form table{width:100%;}
|
||||
#content #add .form table tr td:first-child{width:100%}
|
||||
#content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-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 #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
|
||||
#content #add .header,#content #add .footer{padding:20px 30px}
|
||||
#content #add .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 #add .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
|
||||
#content #add .footer .icon{display:inline-block;color:#aaafbf}
|
||||
#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}
|
||||
|
|
@ -495,18 +509,4 @@ ul li{display:inline-block}
|
|||
#content #repos .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
#content #repos .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:right;font-family:'MuseoSlab500Regular',serif;}
|
||||
#content #repos .footer .icon{color:#aaafbf}
|
||||
#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;width:400px;margin-top:30px;}
|
||||
#content #add h2{color:#3e4457}
|
||||
#content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
|
||||
#content #add p a{color:#3e4457}
|
||||
#content #add .form{padding:20px;}
|
||||
#content #add .form table{width:100%;}
|
||||
#content #add .form table tr td:first-child{width:100%}
|
||||
#content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-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 #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
|
||||
#content #add .header,#content #add .footer{padding:20px 30px}
|
||||
#content #add .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 #add .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
|
||||
#content #add .footer .icon{display:inline-block;color:#aaafbf}
|
||||
#footer{border-top:1px solid #f3f4f8;text-align:center;padding:30px;margin-top:30px;font-family:'MuseoSlab500Regular',serif}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,20 @@ ul li{display:inline-block}
|
|||
#content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
|
||||
#content #hero .content .cta a.primary{font-weight:bold;background:#c1041c;color:#fff}
|
||||
#content #hero .content .cta a.secondary{background:#fff;color:#c1041c}
|
||||
#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;background:#fff;width:400px;}
|
||||
#content #add h2{color:#3e4457}
|
||||
#content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
|
||||
#content #add p a{color:#3e4457}
|
||||
#content #add .form{padding:20px;}
|
||||
#content #add .form table{width:100%;}
|
||||
#content #add .form table tr td:first-child{width:100%}
|
||||
#content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-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 #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
|
||||
#content #add .header,#content #add .footer{padding:20px 30px}
|
||||
#content #add .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 #add .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
|
||||
#content #add .footer .icon{display:inline-block;color:#aaafbf}
|
||||
#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}
|
||||
|
|
@ -88,18 +102,4 @@ ul li{display:inline-block}
|
|||
#content #repos .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
#content #repos .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:right;font-family:'MuseoSlab500Regular',serif;}
|
||||
#content #repos .footer .icon{color:#aaafbf}
|
||||
#content #add{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;width:400px;margin-top:30px;}
|
||||
#content #add h2{color:#3e4457}
|
||||
#content #add p{font-family:'MuseoSlab500Regular',serif;color:#b1b6c4;margin-top:10px;line-height:20px;text-align:justify;text-justify:inter-word;}
|
||||
#content #add p a{color:#3e4457}
|
||||
#content #add .form{padding:20px;}
|
||||
#content #add .form table{width:100%;}
|
||||
#content #add .form table tr td:first-child{width:100%}
|
||||
#content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-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 #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
|
||||
#content #add .header,#content #add .footer{padding:20px 30px}
|
||||
#content #add .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 #add .header a{font-family:'MuseoSlab500Regular',serif}
|
||||
#content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
|
||||
#content #add .footer .icon{display:inline-block;color:#aaafbf}
|
||||
#footer{border-top:1px solid #f3f4f8;text-align:center;padding:30px;margin-top:30px;font-family:'MuseoSlab500Regular',serif}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
127
public/js/app.js
127
public/js/app.js
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +1,26 @@
|
|||
header = require './components/header'
|
||||
mediator = require './modules/mediator'
|
||||
|
||||
document.title = 'BurnChart: GitHub Burndown Chart as a Service'
|
||||
Header = require './components/header'
|
||||
|
||||
el = '#page'
|
||||
|
||||
route = (page, req, evt) ->
|
||||
document.title = 'BurnChart: GitHub Burndown Chart as a Service'
|
||||
Page = require "./pages/#{page}"
|
||||
new Page { el }
|
||||
|
||||
router =
|
||||
'': _.partial route, 'index'
|
||||
'project/add': _.partial route, 'addProject'
|
||||
|
||||
App = Ractive.extend
|
||||
|
||||
template: require './templates/layout'
|
||||
'template': require './templates/layout'
|
||||
|
||||
'components':
|
||||
'Header': header
|
||||
'components': { Header }
|
||||
|
||||
init: ->
|
||||
# Init the routes.
|
||||
Grapnel.listen router
|
||||
|
||||
module.exports = new App()
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
firebase = require '../modules/firebase'
|
||||
user = require '../modules/user'
|
||||
mediator = require '../modules/mediator'
|
||||
|
||||
module.exports = Ractive.extend
|
||||
|
||||
'template': require '../templates/addProjectForm'
|
||||
|
||||
'data':
|
||||
'user': user
|
||||
|
||||
'adapt': [ Ractive.adaptors.Ractive ]
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
firebase = require '../modules/firebase'
|
||||
user = require '../modules/user'
|
||||
mediator = require '../modules/mediator'
|
||||
|
||||
module.exports = Ractive.extend
|
||||
|
||||
|
|
@ -7,7 +8,7 @@ module.exports = Ractive.extend
|
|||
|
||||
init: ->
|
||||
# Login user.
|
||||
@on 'login', ->
|
||||
@on '!login', ->
|
||||
firebase.login (err) ->
|
||||
throw err if err
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ class FB
|
|||
|
||||
# Save user.
|
||||
user.set obj
|
||||
console.log "#{obj.displayName} is logged in"
|
||||
|
||||
# Login a user.
|
||||
login: (cb) ->
|
||||
|
|
@ -26,7 +25,6 @@ class FB
|
|||
authCb = cb
|
||||
|
||||
# Login.
|
||||
console.log 'Connecting GitHub account'
|
||||
@auth.login config.provider,
|
||||
'rememberMe': yes
|
||||
'scope': 'public_repo'
|
||||
|
|
@ -35,6 +33,5 @@ class FB
|
|||
logout: ->
|
||||
@auth?.logout
|
||||
do user.reset
|
||||
console.log 'You have logged out'
|
||||
|
||||
module.exports = new FB()
|
||||
|
|
@ -0,0 +1 @@
|
|||
module.exports = new Ractive()
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
AddProjectForm = require '../components/addProjectForm'
|
||||
|
||||
module.exports = Ractive.extend
|
||||
|
||||
'template': require '../templates/pages/addProject'
|
||||
|
||||
'components': { AddProjectForm }
|
||||
|
||||
init: ->
|
||||
console.log 'Add a project page'
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = Ractive.extend
|
||||
|
||||
'template': require '../templates/pages/index'
|
||||
|
||||
init: ->
|
||||
console.log 'Index page'
|
||||
|
|
@ -172,6 +172,79 @@ ul
|
|||
background: #FFF
|
||||
color: $strong_color
|
||||
|
||||
#add
|
||||
border: 1px solid #CDCECF
|
||||
border-radius: 2px
|
||||
background: #FFF
|
||||
width: 400px
|
||||
|
||||
h2
|
||||
color: #3E4457
|
||||
|
||||
p
|
||||
font-family: $serif_font
|
||||
color: #B1B6C4
|
||||
margin-top: 10px
|
||||
line-height: 20px
|
||||
text-align: justify
|
||||
text-justify: inter-word
|
||||
|
||||
a
|
||||
color: #3E4457
|
||||
|
||||
.form
|
||||
padding: 20px
|
||||
|
||||
table
|
||||
width: 100%
|
||||
|
||||
tr
|
||||
td
|
||||
&:first-child
|
||||
width: 100%
|
||||
|
||||
input
|
||||
box-sizing: border-box
|
||||
padding: 10px
|
||||
width: 100%
|
||||
border-radius: 2px 0 0 2px
|
||||
border: 1px solid #DDE1ED
|
||||
border-right: 0
|
||||
box-shadow: inset 0 1px 2px rgba(#000, 20%)
|
||||
|
||||
a
|
||||
margin-left: -2px
|
||||
font-family: $serif_font
|
||||
padding: 11px 20px
|
||||
border-radius: 0 2px 2px 0
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
background: $strong_color
|
||||
color: #FFF
|
||||
|
||||
.header, .footer
|
||||
padding: 20px 30px
|
||||
|
||||
.header
|
||||
box-shadow: 0 1px 2px rgba(#DDE1ED, 50%)
|
||||
margin-bottom: 2px
|
||||
border-bottom: 1px solid #DDE1ED
|
||||
|
||||
a
|
||||
font-family: $serif_font
|
||||
|
||||
.footer
|
||||
background: #F9FAFB
|
||||
color: #AAAFBF
|
||||
box-shadow: inset 0 1px 2px rgba(#DDE1ED, 20%)
|
||||
border-top: 1px solid #DDE1ED
|
||||
text-align: center
|
||||
font-family: $serif_font
|
||||
|
||||
.icon
|
||||
display: inline-block
|
||||
color: #AAAFBF
|
||||
|
||||
#repos
|
||||
border: 1px solid #CDCECF
|
||||
border-radius: 2px
|
||||
|
|
@ -270,79 +343,6 @@ ul
|
|||
.icon
|
||||
color: #AAAFBF
|
||||
|
||||
#add
|
||||
border: 1px solid #CDCECF
|
||||
border-radius: 2px
|
||||
width: 400px
|
||||
margin-top: 30px
|
||||
|
||||
h2
|
||||
color: #3E4457
|
||||
|
||||
p
|
||||
font-family: $serif_font
|
||||
color: #B1B6C4
|
||||
margin-top: 10px
|
||||
line-height: 20px
|
||||
text-align: justify
|
||||
text-justify: inter-word
|
||||
|
||||
a
|
||||
color: #3E4457
|
||||
|
||||
.form
|
||||
padding: 20px
|
||||
|
||||
table
|
||||
width: 100%
|
||||
|
||||
tr
|
||||
td
|
||||
&:first-child
|
||||
width: 100%
|
||||
|
||||
input
|
||||
box-sizing: border-box
|
||||
padding: 10px
|
||||
width: 100%
|
||||
border-radius: 2px 0 0 2px
|
||||
border: 1px solid #DDE1ED
|
||||
border-right: 0
|
||||
box-shadow: inset 0 1px 2px rgba(#000, 20%)
|
||||
|
||||
a
|
||||
margin-left: -2px
|
||||
font-family: $serif_font
|
||||
padding: 11px 20px
|
||||
border-radius: 0 2px 2px 0
|
||||
display: inline-block
|
||||
font-weight: bold
|
||||
background: $strong_color
|
||||
color: #FFF
|
||||
|
||||
.header, .footer
|
||||
padding: 20px 30px
|
||||
|
||||
.header
|
||||
box-shadow: 0 1px 2px rgba(#DDE1ED, 50%)
|
||||
margin-bottom: 2px
|
||||
border-bottom: 1px solid #DDE1ED
|
||||
|
||||
a
|
||||
font-family: $serif_font
|
||||
|
||||
.footer
|
||||
background: #F9FAFB
|
||||
color: #AAAFBF
|
||||
box-shadow: inset 0 1px 2px rgba(#DDE1ED, 20%)
|
||||
border-top: 1px solid #DDE1ED
|
||||
text-align: center
|
||||
font-family: $serif_font
|
||||
|
||||
.icon
|
||||
display: inline-block
|
||||
color: #AAAFBF
|
||||
|
||||
#footer
|
||||
border-top: 1px solid #F3F4F8
|
||||
text-align: center
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<div id="add">
|
||||
<div class="header">
|
||||
<h2>Add a Project</h2>
|
||||
<p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href="#">Sign In</a> first.</p>
|
||||
</div>
|
||||
|
||||
<div class="form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" placeholder="user/repo" autocomplete="off">
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Add</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="icon spin6"></span> Connecting to your repo.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
{{#user.displayName}}
|
||||
{{user.displayName}} logged in
|
||||
{{else}}
|
||||
<a href="#" class="github" on-click="login"><span class="icon github"></span> Sign In</a>
|
||||
<a href="#" class="github" on-click="!login"><span class="icon github"></span> Sign In</a>
|
||||
{{/user.displayName}}
|
||||
</div>
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="#" class="add"><span class="icon plus-circled"></span> Add a Project</a></li>
|
||||
<li><a href="#project/add" class="add"><span class="icon plus-circled"></span> Add a Project</a></li>
|
||||
<li><a href="#" class="faq">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,115 +1,7 @@
|
|||
<Header/>
|
||||
|
||||
<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 id="add">
|
||||
<div class="header">
|
||||
<h2>Add a Project</h2>
|
||||
<p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href="#">Sign In</a> first.</p>
|
||||
</div>
|
||||
|
||||
<div class="form">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" placeholder="user/repo" autocomplete="off">
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Add</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span class="icon spin6"></span> Connecting to your repo.
|
||||
</div>
|
||||
</div>
|
||||
<div id="page">
|
||||
<!-- content loaded from a router -->
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<div id="content" class="wrap">
|
||||
<AddProjectForm/>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<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="#project/add" 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>
|
||||
Loading…
Reference in New Issue