mirror of
https://github.com/jhillyerd/inbucket.git
synced 2025-12-17 09:37:02 +00:00
Bootstrap navbar and message list
This commit is contained in:
James Hillyerd
@@ -70,7 +70,7 @@ ip4.address=0.0.0.0
|
||||
ip4.port=9000
|
||||
|
||||
# Name of web theme to use
|
||||
theme=integral
|
||||
theme=bootstrap
|
||||
|
||||
# Path to the selected themes template files
|
||||
template.dir=%(install.dir)s/themes/%(theme)s/templates
|
||||
|
||||
115
themes/bootstrap/public/inbucket.css
Normal file
115
themes/bootstrap/public/inbucket.css
Normal file
@@ -0,0 +1,115 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 70px;
|
||||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.mailbox-header {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
height: 70px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.container .text-muted {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#emailContent {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#emailHeader {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#emailHeader th, #emailHeader td {
|
||||
text-align: left;
|
||||
padding: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
#emailSubject {
|
||||
border-bottom: 1px #606060 solid;
|
||||
margin: 0;
|
||||
width: 617px;
|
||||
}
|
||||
|
||||
#emailBody {
|
||||
color: #555;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#emailActions {
|
||||
padding: 5px 0;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
#emailActions a {
|
||||
background: #8ac6dc;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#emailActions a:hover {
|
||||
background: #becf74;
|
||||
}
|
||||
|
||||
.errors {
|
||||
background-color: #ffa0a0;
|
||||
color: #333;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
table.metrics {
|
||||
}
|
||||
|
||||
.metrics th {
|
||||
text-align: left;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.metrics td.number {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.metrics td.sparkline {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#emailAttachments {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#emailAttachments th, #emailAttachments td {
|
||||
text-align: left;
|
||||
padding: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
#emailAttachments .fileName:before {
|
||||
content: '\203A\00A0';
|
||||
}
|
||||
|
||||
#emailAttachments a {
|
||||
background: #8ac6dc;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
#emailAttachments a:hover {
|
||||
background: #becf74;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,55 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!--
|
||||
Design by Free CSS Templates
|
||||
http://www.freecsstemplates.org
|
||||
Released for free under a Creative Commons Attribution 2.5 License
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<title>{{template "title" .}}</title>
|
||||
<link href="/public/main.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
|
||||
<script src="/public/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="/public/jquery.color.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<link href="public/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="public/inbucket.css" rel="stylesheet">
|
||||
<script src="public/bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="public/bower_components/bootstrap/dist/js/bootstrap.js"></script>
|
||||
{{template "script" .}}
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<ul id="menu">
|
||||
<li><a href="/" accesskey="1" title="">Home</a></li>
|
||||
<li><a href="/status" accesskey="2" title="">Status</a></li>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">@ inbucket</a>
|
||||
</div>
|
||||
<div id="navbar" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="/" accesskey="1">Home</a></li>
|
||||
<li><a href="/status" accesskey="2">Status</a></li>
|
||||
</ul>
|
||||
<form id="search" action="{{reverse "MailboxIndex"}}" method="GET">
|
||||
<fieldset>
|
||||
<input name="name" type="text" id="input1" />
|
||||
<input name="submit" type="submit" id="input2" value="Go" />
|
||||
</fieldset>
|
||||
<form class="navbar-form navbar-right" action="{{reverse "MailboxIndex"}}" method="GET">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input name="name"
|
||||
type="text"
|
||||
placeholder="mailbox"
|
||||
class="form-control"
|
||||
aria-describedby="at-inbucket-addon"/>
|
||||
<span class="input-group-addon" id="at-inbucket-addon">@inbucket</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">View</button>
|
||||
</form>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="colOne">
|
||||
{{template "menu" .}}
|
||||
</div>
|
||||
<div id="colTwo">
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
{{with .ctx.Session.Flashes "errors"}}
|
||||
<div class="errors">
|
||||
<div class="alert alert-danger">
|
||||
<p>Please fix the following errors and resubmit:<p>
|
||||
<ul>
|
||||
{{range .}}
|
||||
@@ -42,13 +58,18 @@ Released for free under a Creative Commons Attribution 2.5 License
|
||||
</ul>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{template "content" .}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p><a href="http://www.inbucket.org/">Inbucket</a> is an open source project hosted at
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="text-muted">
|
||||
<a href="http://www.inbucket.org/">Inbucket</a> is an open source project hosted at
|
||||
<a href="http://github.com/jhillyerd/inbucket">github</a>.
|
||||
Design by <a href="http://www.freecsstemplates.org/">FCT</a>.</p>
|
||||
Design by <a href="http://getbootstrap.com/">Bootstrap</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{{$name := .name}}
|
||||
{{range .messages}}
|
||||
<div class="box listEntry" id="{{.Id}}">
|
||||
<div class="subject">{{.Subject}}</div>
|
||||
<div class="from">{{.From}}</div>
|
||||
<div class="date">{{friendlyTime .Date}}</div>
|
||||
</div>
|
||||
<button id="{{.Id}}" type="button" class="listEntry list-group-item">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-md-12 text-primary">{{.Subject}}</div>
|
||||
<div class="col-sm-4 col-md-12 small">{{.From}}</div>
|
||||
<div class="col-sm-4 col-md-12 small">{{friendlyTime .Date}}</div>
|
||||
</div>
|
||||
</button>
|
||||
{{else}}
|
||||
<div class="box">
|
||||
<p style="height: 30px; padding-left: 10px;">No messages!</p>
|
||||
</div>
|
||||
<div class="list-group-item disabled">No messages!</div>
|
||||
{{end}}
|
||||
|
||||
@@ -13,18 +13,12 @@
|
||||
}
|
||||
|
||||
function listLoaded() {
|
||||
$('.listEntry').hover(
|
||||
$('.listEntry').click(
|
||||
function() {
|
||||
$(this).addClass("listEntryHover")
|
||||
},
|
||||
function() {
|
||||
$(this).removeClass("listEntryHover")
|
||||
}
|
||||
).click(
|
||||
function() {
|
||||
$('.listEntry').removeClass("listEntrySelected")
|
||||
$(this).addClass("listEntrySelected")
|
||||
$('.listEntry').removeClass("disabled")
|
||||
$(this).addClass("disabled")
|
||||
$('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
|
||||
selected = this.id
|
||||
}
|
||||
)
|
||||
$("#messageList").slideDown()
|
||||
@@ -73,20 +67,36 @@
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
{{define "menu"}}
|
||||
<div id="logo">
|
||||
<h1><a href="#">inbucket</a></h1>
|
||||
<h2>mail for {{.name}}</h2>
|
||||
</div>
|
||||
<div class="box" style="text-align:center; padding-bottom:10px;">
|
||||
<a href="javascript:reloadList()">Refresh List</a>
|
||||
</div>
|
||||
<div id="messageList"></div>
|
||||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div id="emailContent">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-body text-center mailbox-header">
|
||||
<span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
|
||||
{{.name}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<a href="javascript:reloadList()">
|
||||
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
|
||||
Refresh
|
||||
</a>
|
||||
</div>
|
||||
<div id="messageList" class="list-group"></div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
{{with .ctx.Session.Flashes "errors"}}
|
||||
<div class="errors">
|
||||
<p>Please fix the following errors and resubmit:<p>
|
||||
<ul>
|
||||
{{range .}}
|
||||
<li>{{.}}</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
{{end}}
|
||||
<div id="emailContent">
|
||||
<p>Select a message at left, or enter a different username into the box on upper right.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user