Mirrors/go-inbucket
1
0
Fork 0
mirror of https://github.com/jhillyerd/inbucket.git synced 2025-12-18 01:57:02 +00:00
Code Issues Releases Wiki Activity

Bootstrap navbar and message list

Browse Source
This commit is contained in:
James Hillyerd
2015-08-16 23:05:13 -07:00
parent 7b8b872ef0
commit f48704b6a6
5 changed files with 225 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
etc/devel.conf
View File

@@ -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
View 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;
}

83
themes/bootstrap/templates/_base.html
View File

@@ -1,39 +1,55 @@
<!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">
<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> </ul>
<form id="search" action="{{reverse "MailboxIndex"}}" method="GET"> <form class="navbar-form navbar-right" action="{{reverse "MailboxIndex"}}" method="GET">
<fieldset> <div class="form-group">
<input name="name" type="text" id="input1" /> <div class="input-group">
<input name="submit" type="submit" id="input2" value="Go" /> <input name="name"
</fieldset> 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> </form>
</div><!--/.nav-collapse -->
</div> </div>
<div id="content"> </nav>
<div id="colOne">
{{template "menu" .}} <div class="container">
</div>
<div id="colTwo">
{{with .ctx.Session.Flashes "errors"}} {{with .ctx.Session.Flashes "errors"}}
<div class="errors"> <div class="alert alert-danger">
<p>Please fix the following errors and resubmit:<p> <p>Please fix the following errors and resubmit:<p>
<ul> <ul>
{{range .}} {{range .}}
@@ -42,13 +58,18 @@ Released for free under a Creative Commons Attribution 2.5 License
</ul> </ul>
</div> </div>
{{end}} {{end}}
{{template "content" .}} {{template "content" .}}
</div> </div>
</div>
<div id="footer"> <footer class="footer">
<p><a href="http://www.inbucket.org/">Inbucket</a> is an open source project hosted at <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>. <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> </div>
</footer>
</body> </body>
</html> </html>

16
themes/bootstrap/templates/mailbox/_list.html
View File

@@ -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}}

54
themes/bootstrap/templates/mailbox/index.html
View File

@@ -13,18 +13,12 @@
} }
function listLoaded() { function listLoaded() {
$('.listEntry').hover( $('.listEntry').click(
function() { function() {
$(this).addClass("listEntryHover") $('.listEntry').removeClass("disabled")
}, $(this).addClass("disabled")
function() {
$(this).removeClass("listEntryHover")
}
).click(
function() {
$('.listEntry').removeClass("listEntrySelected")
$(this).addClass("listEntrySelected")
$('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded) $('#emailContent').load('/mailbox/{{.name}}/' + this.id, messageLoaded)
selected = this.id
} }
) )
$("#messageList").slideDown() $("#messageList").slideDown()
@@ -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">
<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> <p>Select a message at left, or enter a different username into the box on upper right.</p>
</div>
</div> </div>
{{end}} {{end}}