Added a Milestones section, populated by js via the github api.

This commit is contained in:
Marcus Whybrow 2012-06-13 19:58:17 +01:00
parent 3e38f1a70e
commit 505dfb2a45
2 changed files with 156 additions and 110 deletions

View File

@ -125,3 +125,20 @@ body {
.footer p {
margin-bottom: 0;
}
.milestones {
border-top: 1px solid #e5e5e5;
padding-top: 50px;
display: none;
}
.milestones h1 {
text-align: center;
font-weight: 300;
font-size: 40px;
margin-bottom: 10px;
}
.milestones h2 {
font-weight: 300;
}

View File

@ -15,10 +15,34 @@
<![endif]-->
<script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
var milestonesUrl = "https://api.github.com/repos/marcuswhybrow/minecraft-server-manager/milestones";
$.getJSON(milestonesUrl, function(milestones) {
$.each(milestones, function(i, milestone) {
var closedIssues = milestone.closed_issues;
var totalIssues = closedIssues + milestone.open_issues;
var milestonePercentage = closedIssues / totalIssues * 100;
var $div = $("<div>").addClass("milestone");
$("<h2>").text(milestone.title).appendTo($div);
$("<p>").text(milestone.description).appendTo($div);
var $progress = $("<div>").addClass("progress").appendTo($div);
var $bar = $("<div>").addClass("bar").css("width", milestonePercentage + "%").appendTo($progress);
$(".milestones").append($div);
});
$(".milestones").slideDown();
});
});
</script>
</head>
<body>
<div class="masthead container">
<div class="container">
<div class="masthead">
<!-- <p class="introducing">Introducing...</p> -->
<h1>Minecraft Server Manager</h1>
<p>A comprehsive start up script for Minecraft and Bukkit servers.</p>
@ -41,7 +65,7 @@
</div>
<div class="features container">
<div class="features">
<h1>Designed by admins, for admins.</h1>
<p class="byline">Reasons while you'll love MSM</p>
@ -128,11 +152,16 @@
</div>
</div>
<footer class="footer container">
<div class="milestones">
<h1>Project Milestones</h1>
</div>
<footer class="footer">
<p>Code licensed under the <a href="http://www.gnu.org/copyleft/gpl.html" target="_blank">General Public Licence v3</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>You may have noticed this design approach is a shamless reworking of <a href="http://twitter.github.com/bootstrap/">Twitter's Bootstrap</a> github page.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div>
</body>
</html>