From 6aba36460d4a42934c0beeb44929580ba1a72229 Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Sun, 28 Sep 2014 14:51:24 -0700 Subject: [PATCH] Fix 'Show More' button --- client/css/style.css | 32 +++++++++++++++++++++++++------- client/js/shout.js | 11 ++++------- client/js/shout.templates.js | 20 +++++++------------- client/templates/chat.tpl | 14 +++++--------- package.json | 2 +- 5 files changed, 42 insertions(+), 37 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 18386eaa..4e3b6d41 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -397,7 +397,7 @@ button { padding: 0 20px; } #windows .header .title { - font: 16px Lato; + font: 14px Lato; } #windows .header .topic { /* Hidden for now */ @@ -423,6 +423,9 @@ button { line-height: 0; padding: 0 10px; } +#windows .header .button:hover { + opacity: 1; +} #windows .window .header { display: none; } @@ -470,15 +473,30 @@ button { display: none; } #chat .show-more { - background: #fff; - border-bottom: 1px solid #e7e7e7; - color: #b1c3ce; - height: 48px; - line-height: 50px; + display: none; + padding: 10px; position: absolute; width: 100%; } -#chat .show-more:hover { +#chat .show-more.show + .messages .msg:first-child { + padding-top: 47px !important; +} +#chat .show-more.show + .messages .msg:first-child > span { + padding-top: 52px !important; +} +#chat .show-more-button { + background: #f4f4f4; + background-image: linear-gradient(#f4f4f4, #ececec); + border: 1px solid #d7d7d7; + border-bottom-color: #b7b7b7; + border-radius: 2px; + color: #555; + font: 12px Lato, sans-serif; + height: 34px; + line-height: 0; + width: 100%; +} +#chat .show-more-button:hover { opacity: 1; } #chat .messages { diff --git a/client/js/shout.js b/client/js/shout.js index a99a416d..101868b7 100644 --- a/client/js/shout.js +++ b/client/js/shout.js @@ -199,9 +199,7 @@ $(function() { .prepend(render("msg", {messages: data.messages})) .end(); if (data.messages.length != 100) { - var more = chan - .find(".show-more") - .addClass("hidden"); + chan.find(".show-more").removeClass("show"); } }); @@ -569,12 +567,11 @@ $(function() { } }); - chat.on("click", ".show-more", function() { + chat.on("click", ".show-more-button", function() { var self = $(this); - var id = self.data("id"); - var count = self.next(".messages").children().length; + var count = self.parent().next(".messages").children().length; socket.emit("more", { - target: id, + target: self.data("id"), count: count }); }); diff --git a/client/js/shout.templates.js b/client/js/shout.templates.js index 5adf997e..886fdb67 100644 --- a/client/js/shout.templates.js +++ b/client/js/shout.templates.js @@ -42,10 +42,12 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) { + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper))) + "\n " + escapeExpression(((helper = (helper = helpers.type || (depth0 != null ? depth0.type : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"type","hash":{},"data":data}) : helper))) - + " \n \n
\n"; - stack1 = ((helpers.equal || (depth0 && depth0.equal) || helperMissing).call(depth0, ((stack1 = (depth0 != null ? depth0.messages : depth0)) != null ? stack1.length : stack1), 100, {"name":"equal","hash":{},"fn":this.program(6, data),"inverse":this.program(8, data),"data":data})); + + " \n
\n
\n
\n " + return buffer + "\">\n \n
\n
\n " + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data}))) + "\n
\n
\n