Refactoring with compass, hooray!
This commit is contained in:
Samuel Cochran
parent
56a82f5b46
commit
72a761c198
|
|
@ -16,14 +16,20 @@ GEM
|
|||
remote: http://rubygems.org/
|
||||
specs:
|
||||
activesupport (3.0.7)
|
||||
chunky_png (1.2.0)
|
||||
coffee-script (2.2.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.1.1)
|
||||
compass (0.11.1)
|
||||
chunky_png (~> 1.1)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
daemons (1.1.3)
|
||||
eventmachine (0.12.10)
|
||||
execjs (1.0.0)
|
||||
multi_json (~> 1.0)
|
||||
fssm (0.2.7)
|
||||
haml (3.1.1)
|
||||
i18n (0.6.0)
|
||||
json (1.5.1)
|
||||
|
|
@ -56,5 +62,6 @@ PLATFORMS
|
|||
|
||||
DEPENDENCIES
|
||||
coffee-script (~> 2.2)
|
||||
compass (~> 0.11.1)
|
||||
mailcatcher!
|
||||
sass (~> 3.1)
|
||||
|
|
|
|||
|
|
@ -39,5 +39,6 @@ Gem::Specification.new do |s|
|
|||
s.add_dependency "json", "~> 1.0"
|
||||
|
||||
s.add_development_dependency "sass", "~> 3.1"
|
||||
s.add_development_dependency "compass", "~> 0.11.1"
|
||||
s.add_development_dependency "coffee-script", "~> 2.2"
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
class MailCatcher
|
||||
constructor: ->
|
||||
$('#mail tr').live 'click', (e) =>
|
||||
$('#messages tr').live 'click', (e) =>
|
||||
@loadMessage $(e.currentTarget).attr 'data-message-id'
|
||||
|
||||
$('#message .actions ul li.tab').live 'click', (e) =>
|
||||
@loadMessageBody $('#mail tr.selected').attr('data-message-id'), $(e.currentTarget).attr 'data-message-format'
|
||||
$('#message .views .tab').live 'click', (e) =>
|
||||
@loadMessageBody $('#messages tr.selected').attr('data-message-id'), $(e.currentTarget).attr 'data-message-format'
|
||||
|
||||
@refresh()
|
||||
@subscribe()
|
||||
|
|
@ -22,10 +22,10 @@ class MailCatcher
|
|||
|
||||
haveMessage: (message) ->
|
||||
message = message.id if message.id?
|
||||
$("#mail tbody tr[data-message-id=\"#{message}\"]").length > 0
|
||||
$("#messages tbody tr[data-message-id=\"#{message}\"]").length > 0
|
||||
|
||||
addMessage: (message) ->
|
||||
$('#mail tbody').append \
|
||||
$('#messages tbody').append \
|
||||
$('<tr />').attr('data-message-id', message.id.toString())
|
||||
.append($('<td/>').text(message.sender))
|
||||
.append($('<td/>').text((message.recipients || []).join(', ')))
|
||||
|
|
@ -34,18 +34,18 @@ class MailCatcher
|
|||
|
||||
loadMessage: (id) ->
|
||||
id = id.id if id?.id?
|
||||
id ||= $('#mail tr.selected').attr 'data-message-id'
|
||||
id ||= $('#messages tr.selected').attr 'data-message-id'
|
||||
|
||||
if id?
|
||||
$('#mail tbody tr:not([data-message-id="'+id+'"])').removeClass 'selected'
|
||||
$('#mail tbody tr[data-message-id="'+id+'"]').addClass 'selected'
|
||||
$('#messages tbody tr:not([data-message-id="'+id+'"])').removeClass 'selected'
|
||||
$('#messages tbody tr[data-message-id="'+id+'"]').addClass 'selected'
|
||||
|
||||
$.getJSON '/messages/' + id + '.json', (message) =>
|
||||
$('#message .received span').text @formatDate message.created_at
|
||||
$('#message .from span').text message.sender
|
||||
$('#message .to span').text (message.recipients || []).join(', ')
|
||||
$('#message .subject span').text message.subject
|
||||
$('#message .actions ul li.format').each (i, el) ->
|
||||
$('#message .metadata dd.created_at').text @formatDate message.created_at
|
||||
$('#message .metadata dd.from').text message.sender
|
||||
$('#message .metadata dd.to').text (message.recipients || []).join(', ')
|
||||
$('#message .metadata dd.subject').text message.subject
|
||||
$('#message .views .tab.format').each (i, el) ->
|
||||
$el = $(el)
|
||||
format = $el.attr 'data-message-format'
|
||||
if $.inArray(format, message.formats) >= 0
|
||||
|
|
@ -53,29 +53,29 @@ class MailCatcher
|
|||
else
|
||||
$el.hide()
|
||||
|
||||
if $("#message .actions ul li.tab.selected:not(:visible)").length
|
||||
$("#message .actions ul li.tab.selected").removeClass "selected"
|
||||
$("#message .actions ul li.tab:visible:first").addClass "selected"
|
||||
if $("#message .views .tab.selected:not(:visible)").length
|
||||
$("#message .views .tab.selected").removeClass "selected"
|
||||
$("#message .views .tab:visible:first").addClass "selected"
|
||||
|
||||
if message.attachments.length
|
||||
$('#message .metadata .attachments ul').empty()
|
||||
$('#message .metadata dd.attachments ul').empty()
|
||||
$.each message.attachments, (i, attachment) ->
|
||||
$('#message .metadata .attachments ul').append($('<li>').append($('<a>').attr('href', attachment['href']).addClass(attachment['type'].split('/', 1)[0]).addClass(attachment['type'].replace('/', '-')).text(attachment['filename'])));
|
||||
$('#message .metadata dd.attachments ul').append($('<li>').append($('<a>').attr('href', attachment['href']).addClass(attachment['type'].split('/', 1)[0]).addClass(attachment['type'].replace('/', '-')).text(attachment['filename'])));
|
||||
$('#message .metadata .attachments').show()
|
||||
else
|
||||
$('#message .metadata .attachments').hide()
|
||||
|
||||
$('#message .actions ul li.download a').attr 'href', "/messages/#{id}.eml"
|
||||
$('#message .actions .download a').attr 'href', "/messages/#{id}.eml"
|
||||
|
||||
@loadMessageBody()
|
||||
|
||||
loadMessageBody: (id, format) ->
|
||||
id ||= $('#mail tr.selected').attr 'data-message-id'
|
||||
format ||= $('#message .actions ul li.format.selected').attr 'data-message-format'
|
||||
id ||= $('#messages tr.selected').attr 'data-message-id'
|
||||
format ||= $('#message .views .tab.format.selected').attr 'data-message-format'
|
||||
format ||= 'html'
|
||||
|
||||
$("#message .actions ul li.tab[data-message-format=\"#{format}\"]:not(.selected)").addClass 'selected'
|
||||
$("#message .actions ul li.tab:not([data-message-format=\"#{format}\"]).selected").removeClass 'selected'
|
||||
$("#message .views .tab[data-message-format=\"#{format}\"]:not(.selected)").addClass 'selected'
|
||||
$("#message .views .tab:not([data-message-format=\"#{format}\"]).selected").removeClass 'selected'
|
||||
|
||||
if id?
|
||||
$('#message iframe').attr "src", "/messages/#{id}.#{format}"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
|
||||
MailCatcher = (function() {
|
||||
function MailCatcher() {
|
||||
$('#mail tr').live('click', __bind(function(e) {
|
||||
$('#messages tr').live('click', __bind(function(e) {
|
||||
return this.loadMessage($(e.currentTarget).attr('data-message-id'));
|
||||
}, this));
|
||||
$('#message .actions ul li.tab').live('click', __bind(function(e) {
|
||||
return this.loadMessageBody($('#mail tr.selected').attr('data-message-id'), $(e.currentTarget).attr('data-message-format'));
|
||||
$('#message .views .tab').live('click', __bind(function(e) {
|
||||
return this.loadMessageBody($('#messages tr.selected').attr('data-message-id'), $(e.currentTarget).attr('data-message-format'));
|
||||
}, this));
|
||||
this.refresh();
|
||||
this.subscribe();
|
||||
|
|
@ -29,25 +29,25 @@
|
|||
if (message.id != null) {
|
||||
message = message.id;
|
||||
}
|
||||
return $("#mail tbody tr[data-message-id=\"" + message + "\"]").length > 0;
|
||||
return $("#messages tbody tr[data-message-id=\"" + message + "\"]").length > 0;
|
||||
};
|
||||
MailCatcher.prototype.addMessage = function(message) {
|
||||
return $('#mail tbody').append($('<tr />').attr('data-message-id', message.id.toString()).append($('<td/>').text(message.sender)).append($('<td/>').text((message.recipients || []).join(', '))).append($('<td/>').text(message.subject)).append($('<td/>').text(this.formatDate(message.created_at))));
|
||||
return $('#messages tbody').append($('<tr />').attr('data-message-id', message.id.toString()).append($('<td/>').text(message.sender)).append($('<td/>').text((message.recipients || []).join(', '))).append($('<td/>').text(message.subject)).append($('<td/>').text(this.formatDate(message.created_at))));
|
||||
};
|
||||
MailCatcher.prototype.loadMessage = function(id) {
|
||||
if ((id != null ? id.id : void 0) != null) {
|
||||
id = id.id;
|
||||
}
|
||||
id || (id = $('#mail tr.selected').attr('data-message-id'));
|
||||
id || (id = $('#messages tr.selected').attr('data-message-id'));
|
||||
if (id != null) {
|
||||
$('#mail tbody tr:not([data-message-id="' + id + '"])').removeClass('selected');
|
||||
$('#mail tbody tr[data-message-id="' + id + '"]').addClass('selected');
|
||||
$('#messages tbody tr:not([data-message-id="' + id + '"])').removeClass('selected');
|
||||
$('#messages tbody tr[data-message-id="' + id + '"]').addClass('selected');
|
||||
return $.getJSON('/messages/' + id + '.json', __bind(function(message) {
|
||||
$('#message .received span').text(this.formatDate(message.created_at));
|
||||
$('#message .from span').text(message.sender);
|
||||
$('#message .to span').text((message.recipients || []).join(', '));
|
||||
$('#message .subject span').text(message.subject);
|
||||
$('#message .actions ul li.format').each(function(i, el) {
|
||||
$('#message .metadata dd.created_at').text(this.formatDate(message.created_at));
|
||||
$('#message .metadata dd.from').text(message.sender);
|
||||
$('#message .metadata dd.to').text((message.recipients || []).join(', '));
|
||||
$('#message .metadata dd.subject').text(message.subject);
|
||||
$('#message .views .tab.format').each(function(i, el) {
|
||||
var $el, format;
|
||||
$el = $(el);
|
||||
format = $el.attr('data-message-format');
|
||||
|
|
@ -57,30 +57,30 @@
|
|||
return $el.hide();
|
||||
}
|
||||
});
|
||||
if ($("#message .actions ul li.tab.selected:not(:visible)").length) {
|
||||
$("#message .actions ul li.tab.selected").removeClass("selected");
|
||||
$("#message .actions ul li.tab:visible:first").addClass("selected");
|
||||
if ($("#message .views .tab.selected:not(:visible)").length) {
|
||||
$("#message .views .tab.selected").removeClass("selected");
|
||||
$("#message .views .tab:visible:first").addClass("selected");
|
||||
}
|
||||
if (message.attachments.length) {
|
||||
$('#message .metadata .attachments ul').empty();
|
||||
$('#message .metadata dd.attachments ul').empty();
|
||||
$.each(message.attachments, function(i, attachment) {
|
||||
return $('#message .metadata .attachments ul').append($('<li>').append($('<a>').attr('href', attachment['href']).addClass(attachment['type'].split('/', 1)[0]).addClass(attachment['type'].replace('/', '-')).text(attachment['filename'])));
|
||||
return $('#message .metadata dd.attachments ul').append($('<li>').append($('<a>').attr('href', attachment['href']).addClass(attachment['type'].split('/', 1)[0]).addClass(attachment['type'].replace('/', '-')).text(attachment['filename'])));
|
||||
});
|
||||
$('#message .metadata .attachments').show();
|
||||
} else {
|
||||
$('#message .metadata .attachments').hide();
|
||||
}
|
||||
$('#message .actions ul li.download a').attr('href', "/messages/" + id + ".eml");
|
||||
$('#message .actions .download a').attr('href', "/messages/" + id + ".eml");
|
||||
return this.loadMessageBody();
|
||||
}, this));
|
||||
}
|
||||
};
|
||||
MailCatcher.prototype.loadMessageBody = function(id, format) {
|
||||
id || (id = $('#mail tr.selected').attr('data-message-id'));
|
||||
format || (format = $('#message .actions ul li.format.selected').attr('data-message-format'));
|
||||
id || (id = $('#messages tr.selected').attr('data-message-id'));
|
||||
format || (format = $('#message .views .tab.format.selected').attr('data-message-format'));
|
||||
format || (format = 'html');
|
||||
$("#message .actions ul li.tab[data-message-format=\"" + format + "\"]:not(.selected)").addClass('selected');
|
||||
$("#message .actions ul li.tab:not([data-message-format=\"" + format + "\"]).selected").removeClass('selected');
|
||||
$("#message .views .tab[data-message-format=\"" + format + "\"]:not(.selected)").addClass('selected');
|
||||
$("#message .views .tab:not([data-message-format=\"" + format + "\"]).selected").removeClass('selected');
|
||||
if (id != null) {
|
||||
return $('#message iframe').attr("src", "/messages/" + id + "." + format);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,186 +1,234 @@
|
|||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
outline: 0px;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
background: #eee;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: Helvetica, Arial, sans-serif; }
|
||||
line-height: 1; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0px; }
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal; }
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
body {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
box-orient: vertical; }
|
||||
|
||||
#message {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
box-flex: 1; }
|
||||
background: #eee;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: Helvetica, sans-serif; }
|
||||
body body {
|
||||
font-size: 75%;
|
||||
line-height: 2em; }
|
||||
body html > body {
|
||||
font-size: 12px; }
|
||||
|
||||
#message iframe {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
box-flex: 1; }
|
||||
body > header {
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
border-bottom: 1px solid #ccc; }
|
||||
body > header h1 {
|
||||
float: left;
|
||||
padding: 6px;
|
||||
font-size: 18px;
|
||||
font-weight: bold; }
|
||||
body > header h1 a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 white;
|
||||
-moz-transition-property: 0.1s ease;
|
||||
-webkit-transition-property: 0.1s ease;
|
||||
-o-transition-property: 0.1s ease;
|
||||
transition-property: 0.1s ease;
|
||||
-moz-transition-duration: 1s;
|
||||
-webkit-transition-duration: 1s;
|
||||
-o-transition-duration: 1s;
|
||||
transition-duration: 1s; }
|
||||
body > header h1 a:hover {
|
||||
color: #4183C4; }
|
||||
body > header nav {
|
||||
padding: 0 5px; }
|
||||
body > header nav.project {
|
||||
float: left; }
|
||||
body > header nav.app {
|
||||
float: right; }
|
||||
body > header nav li {
|
||||
padding: 10px 5px;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto; }
|
||||
body > header nav li {
|
||||
*display: inline; }
|
||||
|
||||
#mail {
|
||||
#messages {
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #ccc; }
|
||||
#messages table {
|
||||
width: 100%; }
|
||||
#messages table thead tr {
|
||||
background: #eee;
|
||||
color: #333; }
|
||||
#messages table thead tr th {
|
||||
padding: .25em;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 white; }
|
||||
#messages table tbody tr:nth-child(even) {
|
||||
background: #f0f0f0; }
|
||||
#messages table tbody tr.selected {
|
||||
background: Highlight;
|
||||
color: HighlightText; }
|
||||
#messages table tbody tr td {
|
||||
padding: .25em; }
|
||||
|
||||
#mail table {
|
||||
width: 100%; }
|
||||
|
||||
#mail table thead tr {
|
||||
background: #eee;
|
||||
color: #333; }
|
||||
|
||||
#mail table thead tr th {
|
||||
padding: .25em;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
-moz-text-shadow: 0 1px 0 #fff;
|
||||
-webkit-text-shadow: 0 1px 0 #fff;
|
||||
text-shadow: 0 1px 0 #fff; }
|
||||
|
||||
#mail table tbody tr:nth-child(even) {
|
||||
background: #f0f0f0;
|
||||
color: #333; }
|
||||
|
||||
#mail table tbody tr.selected {
|
||||
background: Highlight;
|
||||
color: HighlightText; }
|
||||
|
||||
#mail table tbody tr td {
|
||||
padding: .25em; }
|
||||
|
||||
#message .metadata {
|
||||
padding: 1em; }
|
||||
|
||||
#message .metadata div {
|
||||
padding: .25em; }
|
||||
|
||||
#message .metadata div label {
|
||||
display: inline-block;
|
||||
width: 8em;
|
||||
margin-right: .5em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
-moz-text-shadow: 0 1px 0 #fff;
|
||||
-webkit-text-shadow: 0 1px 0 #fff;
|
||||
text-shadow: 0 1px 0 #fff; }
|
||||
|
||||
#message .metadata .subject span {
|
||||
font-weight: bold; }
|
||||
|
||||
#message .metadata .attachments {
|
||||
display: none; }
|
||||
|
||||
#message .metadata .attachments ul {
|
||||
display: inline; }
|
||||
|
||||
#message .metadata .attachments ul li {
|
||||
display: inline-block;
|
||||
margin-right: .5em; }
|
||||
|
||||
#message .actions ul {
|
||||
border-bottom: 1px solid #999;
|
||||
padding: 0 .5em; }
|
||||
|
||||
#message .actions ul li.tab {
|
||||
display: inline-block;
|
||||
padding: .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
border-width: 1px 1px 0 1px;
|
||||
cursor: pointer;
|
||||
-moz-text-shadow: 0 1px 0 #eee;
|
||||
-webkit-text-shadow: 0 1px 0 #eee;
|
||||
text-shadow: 0 1px 0 #eee; }
|
||||
|
||||
#message .actions ul li.tab:not(.selected):hover {
|
||||
background-color: #ddd; }
|
||||
|
||||
#message .actions ul li.tab.selected {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: 13px;
|
||||
-moz-box-shadow: 1px 1px 0 #ccc;
|
||||
-webkit-box-shadow: 1px 1px 0 #ccc;
|
||||
box-shadow: 1px 1px 0 #ccc;
|
||||
margin-bottom: -2px; }
|
||||
|
||||
#message .actions ul li.button {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0 .25em; }
|
||||
|
||||
#message .actions ul li.button a {
|
||||
display: inline-block;
|
||||
padding: .25em .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
-moz-text-shadow: 1px 1px 0 #eee;
|
||||
-webkit-text-shadow: 1px 1px 0 #eee;
|
||||
text-shadow: 1px 1px 0 #eee;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: 1px 1px 0 #ccc; }
|
||||
|
||||
#message .actions ul li.button a:hover {
|
||||
background: #fff;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
|
||||
#message .actions ul li.button a:active {
|
||||
margin: 1px -1px -1px 1px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
|
||||
#message .body {
|
||||
width: 100%;
|
||||
min-height: 20em;
|
||||
height: 100%;
|
||||
background: #fff; }
|
||||
#message {
|
||||
display: -moz-box;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
-moz-box-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1;
|
||||
border-top: 1px solid #fff; }
|
||||
#message > header {
|
||||
overflow: hidden;
|
||||
*zoom: 1; }
|
||||
#message > header .metadata {
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
padding: .5em; }
|
||||
#message > header .metadata dt, #message > header .metadata dd {
|
||||
padding: .25em; }
|
||||
#message > header .metadata dt {
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 8em;
|
||||
margin-right: .5em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 white; }
|
||||
#message > header .metadata dd.subject {
|
||||
font-weight: bold; }
|
||||
#message > header .metadata .attachments {
|
||||
display: none; }
|
||||
#message > header .metadata .attachments ul {
|
||||
display: inline; }
|
||||
#message > header .metadata .attachments ul li {
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
margin-right: .5em; }
|
||||
#message > header .metadata .attachments ul li {
|
||||
*display: inline; }
|
||||
#message > header .views ul {
|
||||
padding: 0 .5em;
|
||||
border-bottom: 1px solid #999; }
|
||||
#message > header .views .tab {
|
||||
display: inline-block;
|
||||
padding: .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
border-width: 1px 1px 0 1px;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #eeeeee; }
|
||||
#message > header .views .tab:not(.selected):hover {
|
||||
background-color: #ddd; }
|
||||
#message > header .views .tab.selected {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: 13px;
|
||||
-moz-box-shadow: 1px 1px 0 #cccccc;
|
||||
-webkit-box-shadow: 1px 1px 0 #cccccc;
|
||||
-o-box-shadow: 1px 1px 0 #cccccc;
|
||||
box-shadow: 1px 1px 0 #cccccc;
|
||||
margin-bottom: -2px; }
|
||||
#message > header .views .button {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0 .25em; }
|
||||
#message > header .views .button a {
|
||||
display: inline-block;
|
||||
padding: .25em .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
text-shadow: 1px 1px 0 #eeeeee;
|
||||
-moz-box-shadow: 1px 1px 0 #cccccc;
|
||||
-webkit-box-shadow: 1px 1px 0 #cccccc;
|
||||
-o-box-shadow: 1px 1px 0 #cccccc;
|
||||
box-shadow: 1px 1px 0 #cccccc; }
|
||||
#message > header .views .button a:hover {
|
||||
background: #fff;
|
||||
text-shadow: none; }
|
||||
#message > header .views .button a:active {
|
||||
margin: 1px -1px -1px 1px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-o-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
#message .body {
|
||||
display: -moz-box;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
-moz-box-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1;
|
||||
width: 100%;
|
||||
background: #fff; }
|
||||
|
|
|
|||
|
|
@ -1,138 +1,201 @@
|
|||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
|
||||
|
||||
body { line-height: 1; background: #eee; color: #000; font-size: 12px; font-family: Helvetica, Arial, sans-serif; }
|
||||
ol, ul { list-style: none; }
|
||||
table { border-collapse: separate; border-spacing: 0px; }
|
||||
caption, th, td { text-align: left; font-weight: normal; }
|
||||
@import "compass";
|
||||
@import "compass/reset";
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -webkit-box; display: -moz-box; display: box;
|
||||
-webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
|
||||
}
|
||||
#message {
|
||||
display: -webkit-box; display: -moz-box; display: box;
|
||||
-webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
|
||||
-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
|
||||
}
|
||||
#message iframe {
|
||||
display: -webkit-box; display: -moz-box; display: box;
|
||||
-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
|
||||
@include establish-baseline(12px);
|
||||
@include display-box;
|
||||
@include box-orient(vertical);
|
||||
|
||||
background: #eee;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#mail {
|
||||
body > header {
|
||||
@include clearfix;
|
||||
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
h1 {
|
||||
float: left;
|
||||
padding: 6px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
@include text-shadow(0 1px 0 #fff);
|
||||
@include transition(0.1s ease);
|
||||
|
||||
&:hover {
|
||||
color: #4183C4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 5px;
|
||||
&.project { float: left; }
|
||||
&.app { float: right; }
|
||||
|
||||
li {
|
||||
padding: 10px 5px;
|
||||
@include inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#messages {
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
#mail table {
|
||||
width: 100%;
|
||||
}
|
||||
#mail table thead tr {
|
||||
background: #eee;
|
||||
color: #333;
|
||||
}
|
||||
#mail table thead tr th {
|
||||
padding: .25em;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
-moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
#mail table tbody tr:nth-child(even) {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
#mail table tbody tr.selected {
|
||||
background: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
#mail table tbody tr td {
|
||||
padding: .25em;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
thead tr {
|
||||
background: #eee;
|
||||
color: #333;
|
||||
|
||||
th {
|
||||
padding: .25em;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
|
||||
@include text-shadow(0 1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
&:nth-child(even) {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: Highlight;
|
||||
color: HighlightText;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#message .metadata {
|
||||
padding: 1em;
|
||||
}
|
||||
#message .metadata div {
|
||||
padding: .25em;
|
||||
}
|
||||
#message .metadata div label {
|
||||
display: inline-block;
|
||||
width: 8em;
|
||||
margin-right: .5em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
-moz-text-shadow: 0 1px 0 #fff; -webkit-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
#message .metadata .subject span {
|
||||
font-weight: bold;
|
||||
}
|
||||
#message .metadata .attachments {
|
||||
display: none;
|
||||
}
|
||||
#message .metadata .attachments ul {
|
||||
display: inline;
|
||||
}
|
||||
#message .metadata .attachments ul li {
|
||||
display: inline-block;
|
||||
margin-right: .5em;
|
||||
}
|
||||
#message {
|
||||
@include display-box;
|
||||
@include box-orient(vertical);
|
||||
@include box-flex(1);
|
||||
|
||||
#message .actions ul {
|
||||
border-bottom: 1px solid #999;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
#message .actions ul li.tab {
|
||||
display: inline-block;
|
||||
padding: .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
border-width: 1px 1px 0 1px;
|
||||
cursor: pointer;
|
||||
-moz-text-shadow: 0 1px 0 #eee; -webkit-text-shadow: 0 1px 0 #eee; text-shadow: 0 1px 0 #eee;
|
||||
}
|
||||
#message .actions ul li.tab:not(.selected):hover {
|
||||
background-color: #ddd; }
|
||||
#message .actions ul li.tab.selected {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: 13px;
|
||||
-moz-box-shadow: 1px 1px 0 #ccc; -webkit-box-shadow: 1px 1px 0 #ccc; box-shadow: 1px 1px 0 #ccc;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
#message .actions ul li.button {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0 .25em;
|
||||
}
|
||||
#message .actions ul li.button a {
|
||||
display: inline-block;
|
||||
padding: .25em .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
-moz-text-shadow: 1px 1px 0 #eee; -webkit-text-shadow: 1px 1px 0 #eee; text-shadow: 1px 1px 0 #eee;
|
||||
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: 1px 1px 0 #ccc;
|
||||
}
|
||||
#message .actions ul li.button a:hover {
|
||||
background: #fff;
|
||||
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
|
||||
}
|
||||
#message .actions ul li.button a:active {
|
||||
margin: 1px -1px -1px 1px;
|
||||
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
|
||||
}
|
||||
border-top: 1px solid #fff;
|
||||
|
||||
> header {
|
||||
@include clearfix;
|
||||
|
||||
.metadata {
|
||||
@include clearfix;
|
||||
|
||||
padding: .5em;
|
||||
|
||||
#message .body {
|
||||
width: 100%;
|
||||
min-height: 20em;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
dt, dd {
|
||||
padding: .25em;
|
||||
}
|
||||
dt {
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 8em;
|
||||
margin-right: .5em;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
@include text-shadow(0 1px 0 #fff);
|
||||
}
|
||||
|
||||
dd.subject {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: none;
|
||||
|
||||
ul {
|
||||
display: inline;
|
||||
|
||||
li {
|
||||
@include inline-block;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.views {
|
||||
ul {
|
||||
padding: 0 .5em;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
.tab {
|
||||
display: inline-block;
|
||||
padding: .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
border-width: 1px 1px 0 1px;
|
||||
cursor: pointer;
|
||||
@include text-shadow(0 1px 0 #eee);
|
||||
}
|
||||
.tab:not(.selected):hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.tab.selected {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
height: 13px;
|
||||
@include box-shadow(1px 1px 0 #ccc);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin: 0 .25em;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: .25em .5em;
|
||||
border: 1px solid #999;
|
||||
background: #ddd;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
@include text-shadow(1px 1px 0 #eee);
|
||||
@include box-shadow(1px 1px 0 #ccc);
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
@include text-shadow(none);
|
||||
}
|
||||
&:active {
|
||||
margin: 1px -1px -1px 1px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
@include display-box;
|
||||
@include box-flex(1);
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,16 @@
|
|||
%script{:src => "/javascripts/date.js"}
|
||||
%script{:src => "/javascripts/application.js"}
|
||||
%body
|
||||
#mail
|
||||
%header
|
||||
%h1
|
||||
%a{:href => "http://mailcatcher.me", :target => '_blank'} MailCatcher
|
||||
%nav.app
|
||||
%ul
|
||||
%li.clear
|
||||
%a{:href => '#', :title => 'Clear all messages'} Clear
|
||||
%li.quit
|
||||
%a{:href => '#', :title => 'Quit MailCatcher'} Quit
|
||||
%nav#messages
|
||||
%table
|
||||
%thead
|
||||
%tr
|
||||
|
|
@ -16,29 +25,26 @@
|
|||
%th Subject
|
||||
%th Received
|
||||
%tbody
|
||||
#message
|
||||
.metadata
|
||||
.received
|
||||
%label Received
|
||||
%span
|
||||
.from
|
||||
%label From
|
||||
%span
|
||||
.to
|
||||
%label To
|
||||
%span
|
||||
.subject
|
||||
%label Subject
|
||||
%span
|
||||
.attachments
|
||||
%label Attachments
|
||||
%article#message
|
||||
%header
|
||||
%dl.metadata
|
||||
%dt.created_at Received
|
||||
%dd.created_at
|
||||
%dt.from From
|
||||
%dd.from
|
||||
%dt.to To
|
||||
%dd.to
|
||||
%dt.subject Subject
|
||||
%dd.subject
|
||||
%dt.attachments Attachments
|
||||
%dd.attachments
|
||||
%ul
|
||||
%nav.views
|
||||
%ul
|
||||
.actions
|
||||
%ul
|
||||
%li.format.tab.html.selected{'data-message-format' => 'html'} HTML
|
||||
%li.format.tab.plain{'data-message-format' => 'plain'} Plain Text
|
||||
%li.format.tab.source{'data-message-format' => 'source'} Source
|
||||
%li.button.download
|
||||
%a{:href => '#'}
|
||||
%span Download
|
||||
%li.format.tab.html.selected{'data-message-format' => 'html'} HTML
|
||||
%li.format.tab.plain{'data-message-format' => 'plain'} Plain Text
|
||||
%li.format.tab.source{'data-message-format' => 'source'} Source
|
||||
%li.button.download
|
||||
%a{:href => '#'}
|
||||
%span Download
|
||||
%iframe.body
|
||||
|
|
|
|||
Loading…
Reference in New Issue