mirror of
https://github.com/jhillyerd/inbucket.git
synced 2025-12-18 18:17:03 +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
|
ip4.port=9000
|
||||||
|
|
||||||
# Name of web theme to use
|
# Name of web theme to use
|
||||||
theme=integral
|
theme=bootstrap
|
||||||
|
|
||||||
# Path to the selected themes template files
|
# Path to the selected themes template files
|
||||||
template.dir=%(install.dir)s/themes/%(theme)s/templates
|
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,54 +1,75 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
<!DOCTYPE html>
|
||||||
<!--
|
<html lang="en">
|
||||||
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">
|
|
||||||
<head>
|
<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>
|
<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">
|
<link href="public/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
|
||||||
<script src="/public/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
|
<link href="public/inbucket.css" rel="stylesheet">
|
||||||
<script src="/public/jquery.color.js" type="text/javascript" charset="utf-8"></script>
|
<script src="public/bower_components/jquery/dist/jquery.js"></script>
|
||||||
|
<script src="public/bower_components/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
{{template "script" .}}
|
{{template "script" .}}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||||
<ul id="menu">
|
<div class="container">
|
||||||
<li><a href="/" accesskey="1" title="">Home</a></li>
|
<div class="navbar-header">
|
||||||
<li><a href="/status" accesskey="2" title="">Status</a></li>
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||||
</ul>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<form id="search" action="{{reverse "MailboxIndex"}}" method="GET">
|
<span class="icon-bar"></span>
|
||||||
<fieldset>
|
<span class="icon-bar"></span>
|
||||||
<input name="name" type="text" id="input1" />
|
<span class="icon-bar"></span>
|
||||||
<input name="submit" type="submit" id="input2" value="Go" />
|
</button>
|
||||||
</fieldset>
|
<a class="navbar-brand" href="/">@ inbucket</a>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
<div id="navbar" class="collapse navbar-collapse">
|
||||||
<div id="content">
|
<ul class="nav navbar-nav">
|
||||||
<div id="colOne">
|
<li class="active"><a href="/" accesskey="1">Home</a></li>
|
||||||
{{template "menu" .}}
|
<li><a href="/status" accesskey="2">Status</a></li>
|
||||||
|
</ul>
|
||||||
|
<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>
|
||||||
<div id="colTwo">
|
</nav>
|
||||||
{{with .ctx.Session.Flashes "errors"}}
|
|
||||||
<div class="errors">
|
<div class="container">
|
||||||
<p>Please fix the following errors and resubmit:<p>
|
{{with .ctx.Session.Flashes "errors"}}
|
||||||
<ul>
|
<div class="alert alert-danger">
|
||||||
{{range .}}
|
<p>Please fix the following errors and resubmit:<p>
|
||||||
<li>{{.}}</li>
|
<ul>
|
||||||
{{end}}
|
{{range .}}
|
||||||
</ul>
|
<li>{{.}}</li>
|
||||||
</div>
|
{{end}}
|
||||||
{{end}}
|
</ul>
|
||||||
{{template "content" .}}
|
|
||||||
</div>
|
</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">
|
||||||
<a href="http://github.com/jhillyerd/inbucket">github</a>.
|
<div class="container">
|
||||||
Design by <a href="http://www.freecsstemplates.org/">FCT</a>.</p>
|
<p class="text-muted">
|
||||||
</div>
|
<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://getbootstrap.com/">Bootstrap</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
{{$name := .name}}
|
{{$name := .name}}
|
||||||
{{range .messages}}
|
{{range .messages}}
|
||||||
<div class="box listEntry" id="{{.Id}}">
|
<button id="{{.Id}}" type="button" class="listEntry list-group-item">
|
||||||
<div class="subject">{{.Subject}}</div>
|
<div class="row">
|
||||||
<div class="from">{{.From}}</div>
|
<div class="col-sm-4 col-md-12 text-primary">{{.Subject}}</div>
|
||||||
<div class="date">{{friendlyTime .Date}}</div>
|
<div class="col-sm-4 col-md-12 small">{{.From}}</div>
|
||||||
</div>
|
<div class="col-sm-4 col-md-12 small">{{friendlyTime .Date}}</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="box">
|
<div class="list-group-item disabled">No messages!</div>
|
||||||
<p style="height: 30px; padding-left: 10px;">No messages!</p>
|
|
||||||
</div>
|
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|||||||
@@ -13,19 +13,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function listLoaded() {
|
function listLoaded() {
|
||||||
$('.listEntry').hover(
|
$('.listEntry').click(
|
||||||
function() {
|
function() {
|
||||||
$(this).addClass("listEntryHover")
|
$('.listEntry').removeClass("disabled")
|
||||||
},
|
$(this).addClass("disabled")
|
||||||
function() {
|
$('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
|
||||||
$(this).removeClass("listEntryHover")
|
selected = this.id
|
||||||
}
|
}
|
||||||
).click(
|
|
||||||
function() {
|
|
||||||
$('.listEntry').removeClass("listEntrySelected")
|
|
||||||
$(this).addClass("listEntrySelected")
|
|
||||||
$('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
$("#messageList").slideDown()
|
$("#messageList").slideDown()
|
||||||
if (selected != "") {
|
if (selected != "") {
|
||||||
@@ -73,20 +67,36 @@
|
|||||||
</script>
|
</script>
|
||||||
{{end}}
|
{{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"}}
|
{{define "content"}}
|
||||||
<div id="emailContent">
|
<div class="panel panel-primary">
|
||||||
<p>Select a message at left, or enter a different username into the box on upper right.</p>
|
<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>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user