@@ -10,7 +10,8 @@ var endpoints = { | |||
//General files | |||
"/favicon.ico": "favicon.ico", | |||
"/bootstrap.css": "bootstrap.css", | |||
"/global.css": "global.css", | |||
"/global.js": "global.js", | |||
"/404": "404.html", | |||
//Index files |
@@ -36,5 +36,30 @@ module.exports.prototype = { | |||
throw new Error("No such view: "+name); | |||
return templatify(str, args); | |||
}, | |||
getPostData: function(cb) { | |||
if (this.req.method != "POST") | |||
return cb(new Error("Expected POST request, got "+this.req.method)); | |||
if (this._postData) | |||
return cb(null, this._postData); | |||
var str = ""; | |||
this.req.on("data", function(data) { | |||
str += data; | |||
}); | |||
this.req.on("end", function() { | |||
try { | |||
var obj = JSON.parse(str); | |||
} catch (err) { | |||
return cb(err); | |||
} | |||
this._postData = obj; | |||
cb(null, obj); | |||
}); | |||
} | |||
} |
@@ -0,0 +1,16 @@ | |||
<div class="navbar navbar-default navbar-fixed-top"> | |||
<div class="navbar-inner"> | |||
<div class="container-fluid"> | |||
<a class="navbar-brand" href="/">Mimg</a> | |||
<ul class="nav navbar-nav navbar-right"> | |||
{{profile}} | |||
</ul> | |||
</div> | |||
</div> | |||
</div> | |||
<div id="notify-box"> | |||
<a href="#" class="close" onclick="this.parentNode.className = ''">Close</a> | |||
<div class="title"></div> | |||
<div class="body"></div> | |||
</div> |
@@ -0,0 +1,7 @@ | |||
<meta charset="utf-8"> | |||
<meta name="viewport" content="width=device-width"> | |||
<link rel="stylesheet" href="/global.css"> | |||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |||
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> | |||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |||
<script src="/global.js"></script> |
@@ -1,9 +0,0 @@ | |||
<div class="navbar navbar-fixed-top"> | |||
<div class="navbar-inner"> | |||
<div class="container"> | |||
<div class="pull-right"> | |||
Log In | |||
</div> | |||
</div> | |||
</div> | |||
</div> |
@@ -0,0 +1,22 @@ | |||
<li class="dropdown" id="login-dropdown"> | |||
<a href="#" data-toggle="dropdown" class="dropdown-toggle" style="float: right"> | |||
Log In | |||
<b class="caret"></b> | |||
</a> | |||
<ul class="dropdown-menu"><li> | |||
<form id="login-form"> | |||
<div class="form-group"> | |||
<label>Username<br> | |||
<input type="text"> | |||
</label> | |||
</div> | |||
<div class="form-group"> | |||
<label>Password<br> | |||
<input type="password"> | |||
</label> | |||
</div> | |||
<div class="submit-container"> | |||
<button type="submit" class="btn btn-default">Log In</button> | |||
</div> | |||
</li></ul> | |||
</li> |
@@ -1,10 +1,10 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<link rel="stylesheet" href="/bootstrap.css"> | |||
{{head}} | |||
</head> | |||
<body> | |||
{{header}} | |||
{{global}} | |||
<script src="/index/script.js"></script> | |||
</body> | |||
</html> |
@@ -1,10 +1,9 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>{{title}}</title> | |||
{{head}} | |||
</head> | |||
<body> | |||
{{header}} | |||
{{global}} | |||
</body> | |||
</html> |
@@ -0,0 +1,60 @@ | |||
.navbar .navbar-nav { | |||
margin-bottom: 0px; | |||
} | |||
#login-dropdown .dropdown-menu { | |||
padding: 10px; | |||
} | |||
#login-dropdown label, | |||
#login-dropdown input { | |||
width: 100%; | |||
} | |||
#login-dropdown .submit-container { | |||
text-align: right; | |||
} | |||
#notify-box { | |||
transition: max-height 0.2s; | |||
max-height: 0px; | |||
background-color: #F8F8F8; | |||
border: 1px solid #E7E7E7; | |||
overflow: hidden; | |||
line-height: 48px; | |||
position: fixed; | |||
bottom: 0px; | |||
width: 100%; | |||
} | |||
#notify-box .close { | |||
height: 48px; | |||
line-height: 48px; | |||
float: right; | |||
padding: 0px; | |||
position: absolute; | |||
top: 0px; | |||
bottom: 0px; | |||
margin: auto; | |||
right: 12px; | |||
} | |||
#notify-box .title, | |||
#notify-box .body { | |||
line-height: 48px; | |||
margin-left: 12px; | |||
width: calc(100% - 42px); | |||
} | |||
#notify-box .title { | |||
font-weight: bold; | |||
} | |||
#notify-box.active { | |||
max-height: 48px; | |||
} | |||
#notify-box.active:hover { | |||
transition: max-height 0.6s; | |||
max-height: 200px; | |||
} |
@@ -0,0 +1,24 @@ | |||
$(document).ready(function() { | |||
window.util = {}; | |||
util.notify = function notify(title, body) { | |||
var elem = $("#notify-box"); | |||
elem.children(".title").html(title); | |||
elem.children(".body").html(body || ""); | |||
elem.addClass("active"); | |||
notify.timeout = setTimeout(function() { | |||
elem.removeClass("active"); | |||
}, 5000); | |||
} | |||
$("#notify-box").on("mouseenter", function() { | |||
clearTimeout(util.notify.timeout); | |||
}); | |||
$("#login-form").on("submit", function(evt) { | |||
evt.stopPropagation(); | |||
evt.preventDefault(); | |||
util.notify("Feature Not Implemented", "This feature is not implemented."); | |||
}); | |||
}); |
@@ -1,5 +1,8 @@ | |||
module.exports = function(ctx) { | |||
ctx.end(ctx.view("index", { | |||
header: ctx.template("header") | |||
head: ctx.template("head"), | |||
global: ctx.template("global", { | |||
profile: ctx.template("navbar-profile-login") | |||
}) | |||
})); | |||
} |
@@ -1,5 +1,8 @@ | |||
module.exports = function(ctx) { | |||
ctx.end(ctx.view("viewer", { | |||
header: ctx.template("header") | |||
head: ctx.template("head"), | |||
global: ctx.template("global", { | |||
profile: ctx.template("navbar-profile-login") | |||
}) | |||
})); | |||
} |