//General files | //General files | ||||
"/favicon.ico": "favicon.ico", | "/favicon.ico": "favicon.ico", | ||||
"/bootstrap.css": "bootstrap.css", | |||||
"/global.css": "global.css", | |||||
"/global.js": "global.js", | |||||
"/404": "404.html", | "/404": "404.html", | ||||
//Index files | //Index files |
throw new Error("No such view: "+name); | throw new Error("No such view: "+name); | ||||
return templatify(str, args); | 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); | |||||
}); | |||||
} | } | ||||
} | } |
<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> |
<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> |
<div class="navbar navbar-fixed-top"> | |||||
<div class="navbar-inner"> | |||||
<div class="container"> | |||||
<div class="pull-right"> | |||||
Log In | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> |
<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> |
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html> | <html> | ||||
<head> | <head> | ||||
<meta charset="utf-8"> | |||||
<link rel="stylesheet" href="/bootstrap.css"> | |||||
{{head}} | |||||
</head> | </head> | ||||
<body> | <body> | ||||
{{header}} | |||||
{{global}} | |||||
<script src="/index/script.js"></script> | |||||
</body> | </body> | ||||
</html> | </html> |
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html> | <html> | ||||
<head> | <head> | ||||
<meta charset="utf-8"> | |||||
<title>{{title}}</title> | |||||
{{head}} | |||||
</head> | </head> | ||||
<body> | <body> | ||||
{{header}} | |||||
{{global}} | |||||
</body> | </body> | ||||
</html> | </html> |
.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; | |||||
} |
$(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."); | |||||
}); | |||||
}); |
module.exports = function(ctx) { | module.exports = function(ctx) { | ||||
ctx.end(ctx.view("index", { | ctx.end(ctx.view("index", { | ||||
header: ctx.template("header") | |||||
head: ctx.template("head"), | |||||
global: ctx.template("global", { | |||||
profile: ctx.template("navbar-profile-login") | |||||
}) | |||||
})); | })); | ||||
} | } |
module.exports = function(ctx) { | module.exports = function(ctx) { | ||||
ctx.end(ctx.view("viewer", { | ctx.end(ctx.view("viewer", { | ||||
header: ctx.template("header") | |||||
head: ctx.template("head"), | |||||
global: ctx.template("global", { | |||||
profile: ctx.template("navbar-profile-login") | |||||
}) | |||||
})); | })); | ||||
} | } |