diff --git a/public/javascripts/application.coffee b/public/javascripts/application.coffee index c37fa9e..4a915de 100644 --- a/public/javascripts/application.coffee +++ b/public/javascripts/application.coffee @@ -6,6 +6,18 @@ class MailCatcher $('#message .views .tab').live 'click', (e) => @loadMessageBody $('#messages tr.selected').attr('data-message-id'), $(e.currentTarget).attr 'data-message-format' + $('#resizer').live + mousedown: (e) -> + e.preventDefault() + $(window).bind events = + mouseup: (e) -> + e.preventDefault() + $(window).unbind events + mousemove: (e) -> + e.preventDefault() + $('#messages').css + height: e.clientY - $('#messages').offset().top + $('nav.app .clear a').live 'click', (e) => if confirm "You will lose all your received messages.\n\nAre you sure you want to clear all messages?" $.ajax diff --git a/public/javascripts/application.js b/public/javascripts/application.js index 9054064..c1c3bd3 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -9,6 +9,24 @@ $('#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)); + $('#resizer').live({ + mousedown: function(e) { + var events; + e.preventDefault(); + return $(window).bind(events = { + mouseup: function(e) { + e.preventDefault(); + return $(window).unbind(events); + }, + mousemove: function(e) { + e.preventDefault(); + return $('#messages').css({ + height: e.clientY - $('#messages').offset().top + }); + } + }); + } + }); $('nav.app .clear a').live('click', __bind(function(e) { if (confirm("You will lose all your received messages.\n\nAre you sure you want to clear all messages?")) { return $.ajax({ diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 0d45982..129a0a3 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1,4 +1,3 @@ -/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -17,60 +16,40 @@ time, mark, audio, video { border: 0; font-size: 100%; font: inherit; - vertical-align: baseline; -} + vertical-align: baseline; } -/* line 20, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ body { - line-height: 1; -} + line-height: 1; } -/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ ol, ul { - list-style: none; -} + list-style: none; } -/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; - border-spacing: 0; -} + border-spacing: 0; } -/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; - vertical-align: middle; -} + vertical-align: middle; } -/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q, blockquote { - quotes: none; -} -/* line 101, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ -q:before, q:after, blockquote:before, blockquote:after { - content: ""; - content: none; -} + quotes: none; } + q:before, q:after, blockquote:before, blockquote:after { + content: ""; + content: none; } -/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ a img { - border: none; -} + border: none; } -/* line 115, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; -} + display: block; } -/* line 4, application.sass */ html, body { width: 100%; - height: 100%; -} + height: 100%; } -/* line 8, application.sass */ body { display: -moz-box; display: -webkit-box; @@ -81,19 +60,13 @@ body { background: #eeeeee; color: black; font-size: 12px; - font-family: Helvetica, sans-serif; -} -/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */ -body body { - font-size: 75%; - line-height: 2em; -} -/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */ -body html > body { - font-size: 12px; -} + font-family: Helvetica, sans-serif; } + body body { + font-size: 75%; + line-height: 2em; } + body html > body { + font-size: 12px; } -/* line 17, application.sass */ .button { padding: 0.5em 1em; border: 1px solid #cccccc; @@ -110,194 +83,153 @@ body html > body { background: linear-gradient(#f4f4f4, #ececec), #ececec; color: #666666; text-shadow: 1px 1px 0 white; - text-decoration: none; -} -/* line 25, application.sass */ -.button:hover, .button:focus { - border-color: #999999; - border-bottom-color: #666666; - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd; - background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd; - background: -moz-linear-gradient(#eeeeee, #dddddd), #dddddd; - background: -o-linear-gradient(#eeeeee, #dddddd), #dddddd; - background: linear-gradient(#eeeeee, #dddddd), #dddddd; - color: #333333; - text-decoration: none; -} -/* line 31, application.sass */ -.button:active, .button.active { - border-color: #666666; - border-bottom-color: #999999; - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee)), #eeeeee; - background: -webkit-linear-gradient(#dddddd, #eeeeee), #eeeeee; - background: -moz-linear-gradient(#dddddd, #eeeeee), #eeeeee; - background: -o-linear-gradient(#dddddd, #eeeeee), #eeeeee; - background: linear-gradient(#dddddd, #eeeeee), #eeeeee; - color: #333333; - text-decoration: none; - text-shadow: -1px -1px 0 #eeeeee; -} + text-decoration: none; } + .button:hover, .button:focus { + border-color: #999999; + border-bottom-color: #666666; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd; + background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd; + background: -moz-linear-gradient(#eeeeee, #dddddd), #dddddd; + background: -o-linear-gradient(#eeeeee, #dddddd), #dddddd; + background: linear-gradient(#eeeeee, #dddddd), #dddddd; + color: #333333; + text-decoration: none; } + .button:active, .button.active { + border-color: #666666; + border-bottom-color: #999999; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee)), #eeeeee; + background: -webkit-linear-gradient(#dddddd, #eeeeee), #eeeeee; + background: -moz-linear-gradient(#dddddd, #eeeeee), #eeeeee; + background: -o-linear-gradient(#dddddd, #eeeeee), #eeeeee; + background: linear-gradient(#dddddd, #eeeeee), #eeeeee; + color: #333333; + text-decoration: none; + text-shadow: -1px -1px 0 #eeeeee; } -/* line 39, application.sass */ body > header { overflow: hidden; *zoom: 1; - border-bottom: 1px solid #cccccc; -} -/* line 42, application.sass */ -body > header h1 { - float: left; - margin-left: 6px; - padding: 6px; - padding-left: 30px; - background: url(/images/logo.png) left no-repeat; - font-size: 18px; - font-weight: bold; -} -/* line 50, application.sass */ -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; -} -/* line 55, application.sass */ -body > header h1 a:hover { - color: #4183c4; -} -/* line 57, application.sass */ -body > header nav { - border-left: 1px solid #cccccc; -} -/* line 58, application.sass */ -body > header nav.project { - float: left; -} -/* line 60, application.sass */ -body > header nav.app { - float: right; -} -/* line 63, application.sass */ -body > header nav li { - display: inline; -} -/* line 65, application.sass */ -body > header nav li a { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: middle; - *vertical-align: auto; - float: left; - padding: 9px; - border-left: 1px solid white; - border-right: 1px solid #cccccc; - text-decoration: none; - text-shadow: 0 1px 0 white; - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #ececec)), #ececec; - background: -webkit-linear-gradient(#f4f4f4, #ececec), #ececec; - background: -moz-linear-gradient(#f4f4f4, #ececec), #ececec; - background: -o-linear-gradient(#f4f4f4, #ececec), #ececec; - background: linear-gradient(#f4f4f4, #ececec), #ececec; - color: #666666; - text-shadow: 1px 1px 0 white; - text-decoration: none; -} -/* line 7, ../../../../.rvm/gems/ruby-1.9.2-p180@mailcatcher/gems/compass-0.11.1/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */ -body > header nav li a { - *display: inline; -} -/* line 77, application.sass */ -body > header nav li a:hover, body > header nav li a:focus { - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd; - background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd; - background: -moz-linear-gradient(#eeeeee, #dddddd), #dddddd; - background: -o-linear-gradient(#eeeeee, #dddddd), #dddddd; - background: linear-gradient(#eeeeee, #dddddd), #dddddd; - color: #333333; - text-decoration: none; -} -/* line 81, application.sass */ -body > header nav li a:active, body > header nav li a.active { - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee)), #eeeeee; - background: -webkit-linear-gradient(#dddddd, #eeeeee), #eeeeee; - background: -moz-linear-gradient(#dddddd, #eeeeee), #eeeeee; - background: -o-linear-gradient(#dddddd, #eeeeee), #eeeeee; - background: linear-gradient(#dddddd, #eeeeee), #eeeeee; - color: #333333; - text-decoration: none; - text-shadow: -1px -1px 0 #eeeeee; -} + border-bottom: 1px solid #cccccc; } + body > header h1 { + float: left; + margin-left: 6px; + padding: 6px; + padding-left: 30px; + background: url(/images/logo.png) left no-repeat; + 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 { + border-left: 1px solid #cccccc; } + body > header nav.project { + float: left; } + body > header nav.app { + float: right; } + body > header nav li { + display: inline; } + body > header nav li a { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + float: left; + padding: 9px; + border-left: 1px solid white; + border-right: 1px solid #cccccc; + text-decoration: none; + text-shadow: 0 1px 0 white; + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f4f4), color-stop(100%, #ececec)), #ececec; + background: -webkit-linear-gradient(#f4f4f4, #ececec), #ececec; + background: -moz-linear-gradient(#f4f4f4, #ececec), #ececec; + background: -o-linear-gradient(#f4f4f4, #ececec), #ececec; + background: linear-gradient(#f4f4f4, #ececec), #ececec; + color: #666666; + text-shadow: 1px 1px 0 white; + text-decoration: none; } + body > header nav li a { + *display: inline; } + body > header nav li a:hover, body > header nav li a:focus { + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)), #dddddd; + background: -webkit-linear-gradient(#eeeeee, #dddddd), #dddddd; + background: -moz-linear-gradient(#eeeeee, #dddddd), #dddddd; + background: -o-linear-gradient(#eeeeee, #dddddd), #dddddd; + background: linear-gradient(#eeeeee, #dddddd), #dddddd; + color: #333333; + text-decoration: none; } + body > header nav li a:active, body > header nav li a.active { + background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee)), #eeeeee; + background: -webkit-linear-gradient(#dddddd, #eeeeee), #eeeeee; + background: -moz-linear-gradient(#dddddd, #eeeeee), #eeeeee; + background: -o-linear-gradient(#dddddd, #eeeeee), #eeeeee; + background: linear-gradient(#dddddd, #eeeeee), #eeeeee; + color: #333333; + text-decoration: none; + text-shadow: -1px -1px 0 #eeeeee; } -/* line 87, application.sass */ #messages { width: 100%; height: 10em; + min-height: 3em; overflow: auto; background: white; - border-top: 1px solid white; - border-bottom: 1px solid #cccccc; -} -/* line 94, application.sass */ -#messages table { - width: 100%; -} -/* line 96, application.sass */ -#messages table thead tr { - background: #eeeeee; - color: #333333; -} -/* line 99, application.sass */ -#messages table thead tr th { - padding: 0.25em; - font-weight: bold; - color: #666666; - text-shadow: 0 1px 0 white; -} -/* line 104, application.sass */ -#messages table tbody tr { - cursor: pointer; - -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; - color: #333333; -} -/* line 108, application.sass */ -#messages table tbody tr:hover { - color: black; -} -/* line 110, application.sass */ -#messages table tbody tr:nth-child(even) { - background: #f0f0f0; -} -/* line 112, application.sass */ -#messages table tbody tr.selected { - background: Highlight; - color: HighlightText; -} -/* line 115, application.sass */ -#messages table tbody tr td { - padding: 0.25em; -} -/* line 117, application.sass */ -#messages table tbody tr td.blank { - color: #666666; - font-style: italic; -} + border-top: 1px solid white; } + #messages table { + overflow: hidden; + *zoom: 1; + width: 100%; } + #messages table thead tr { + background: #eeeeee; + color: #333333; } + #messages table thead tr th { + padding: 0.25em; + font-weight: bold; + color: #666666; + text-shadow: 0 1px 0 white; } + #messages table tbody tr { + cursor: pointer; + -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; + color: #333333; } + #messages table tbody tr:hover { + color: black; } + #messages table tbody tr:nth-child(even) { + background: #f0f0f0; } + #messages table tbody tr.selected { + background: Highlight; + color: HighlightText; } + #messages table tbody tr td { + padding: 0.25em; } + #messages table tbody tr td.blank { + color: #666666; + font-style: italic; } + +#resizer { + padding-bottom: 5px; + cursor: ns-resize; } + #resizer .ruler { + border-top: 1px solid #cccccc; + border-bottom: 1px solid white; } -/* line 121, application.sass */ #message { display: -moz-box; display: -webkit-box; diff --git a/public/stylesheets/application.sass b/public/stylesheets/application.sass index 1b26b74..cda0ff4 100644 --- a/public/stylesheets/application.sass +++ b/public/stylesheets/application.sass @@ -87,11 +87,13 @@ body > header #messages width: 100% height: 10em + // Two rows with padding: + min-height: (2 * (1em + .5em)) overflow: auto background: #fff border-top: 1px solid #fff - border-bottom: 1px solid #ccc table + +clearfix width: 100% thead tr background: #eee @@ -117,17 +119,24 @@ body > header &.blank color: #666 font-style: italic +#resizer + padding-bottom: 5px + cursor: ns-resize + .ruler + border-top: 1px solid #ccc + border-bottom: 1px solid #fff #message +display-box +box-orient(vertical) +box-flex(1) - border-top: 1px solid #fff > header +clearfix .metadata +clearfix padding: .5em + // This is already padded by resizer + padding-top: 0 dt, dd padding: .25em dt diff --git a/views/index.haml b/views/index.haml index 313949a..6b50ef9 100644 --- a/views/index.haml +++ b/views/index.haml @@ -26,6 +26,8 @@ %th Subject %th Received %tbody + #resizer + .ruler %article#message %header %dl.metadata