Fix 'Show More' button

This commit is contained in:
Mattias Erming 2014-09-28 14:51:24 -07:00
parent 5eb6f09b12
commit 6aba36460d
5 changed files with 42 additions and 37 deletions

View File

@ -397,7 +397,7 @@ button {
padding: 0 20px; padding: 0 20px;
} }
#windows .header .title { #windows .header .title {
font: 16px Lato; font: 14px Lato;
} }
#windows .header .topic { #windows .header .topic {
/* Hidden for now */ /* Hidden for now */
@ -423,6 +423,9 @@ button {
line-height: 0; line-height: 0;
padding: 0 10px; padding: 0 10px;
} }
#windows .header .button:hover {
opacity: 1;
}
#windows .window .header { #windows .window .header {
display: none; display: none;
} }
@ -470,15 +473,30 @@ button {
display: none; display: none;
} }
#chat .show-more { #chat .show-more {
background: #fff; display: none;
border-bottom: 1px solid #e7e7e7; padding: 10px;
color: #b1c3ce;
height: 48px;
line-height: 50px;
position: absolute; position: absolute;
width: 100%; 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; opacity: 1;
} }
#chat .messages { #chat .messages {

View File

@ -199,9 +199,7 @@ $(function() {
.prepend(render("msg", {messages: data.messages})) .prepend(render("msg", {messages: data.messages}))
.end(); .end();
if (data.messages.length != 100) { if (data.messages.length != 100) {
var more = chan chan.find(".show-more").removeClass("show");
.find(".show-more")
.addClass("hidden");
} }
}); });
@ -569,12 +567,11 @@ $(function() {
} }
}); });
chat.on("click", ".show-more", function() { chat.on("click", ".show-more-button", function() {
var self = $(this); var self = $(this);
var id = self.data("id"); var count = self.parent().next(".messages").children().length;
var count = self.next(".messages").children().length;
socket.emit("more", { socket.emit("more", {
target: id, target: self.data("id"),
count: count count: count
}); });
}); });

View File

@ -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))) + 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)))
+ "</span>\n <span class=\"topic\">" + "</span>\n <span class=\"topic\">"
+ 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))) + 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)))
+ " </span>\n </div>\n <div class=\"chat\">\n"; + " </span>\n </div>\n <div class=\"chat\">\n <div class=\"show-more ";
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})); 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.noop,"data":data}));
if (stack1 != null) { buffer += stack1; } if (stack1 != null) { buffer += stack1; }
return buffer + " <div class=\"messages\">\n " return buffer + "\">\n <button class=\"show-more-button\" data-id=\""
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\">\n Show more\n </button>\n </div>\n <div class=\"messages\">\n "
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data}))) + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "msg", {"name":"partial","hash":{},"data":data})))
+ "\n </div>\n </div>\n <aside class=\"sidebar\">\n <div class=\"users\">\n " + "\n </div>\n </div>\n <aside class=\"sidebar\">\n <div class=\"users\">\n "
+ escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "user", {"name":"partial","hash":{},"data":data}))) + escapeExpression(((helpers.partial || (depth0 && depth0.partial) || helperMissing).call(depth0, "user", {"name":"partial","hash":{},"data":data})))
@ -55,16 +57,8 @@ templates['chat'] = template({"1":function(depth0,helpers,partials,data) {
},"4":function(depth0,helpers,partials,data) { },"4":function(depth0,helpers,partials,data) {
return " Leave\n"; return " Leave\n";
},"6":function(depth0,helpers,partials,data) { },"6":function(depth0,helpers,partials,data) {
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression; return "show";
return " <button class=\"show-more\" data-id=\"" },"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\">\n Show more\n </button>\n";
},"8":function(depth0,helpers,partials,data) {
var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
return " <button class=\"show-more hidden\" data-id=\""
+ escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"id","hash":{},"data":data}) : helper)))
+ "\">\n Show more\n </button>\n";
},"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
var stack1, buffer = ""; var stack1, buffer = "";
stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.channels : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data}); stack1 = helpers.each.call(depth0, (depth0 != null ? depth0.channels : depth0), {"name":"each","hash":{},"fn":this.program(1, data),"inverse":this.noop,"data":data});
if (stack1 != null) { buffer += stack1; } if (stack1 != null) { buffer += stack1; }

View File

@ -16,15 +16,11 @@
<span class="topic">{{type}} </span> <span class="topic">{{type}} </span>
</div> </div>
<div class="chat"> <div class="chat">
{{#equal messages.length 100}} <div class="show-more {{#equal messages.length 100}}show{{/equal}}">
<button class="show-more" data-id="{{id}}"> <button class="show-more-button" data-id="{{id}}">
Show more Show more
</button> </button>
{{else}} </div>
<button class="show-more hidden" data-id="{{id}}">
Show more
</button>
{{/equal}}
<div class="messages"> <div class="messages">
{{partial "msg"}} {{partial "msg"}}
</div> </div>

View File

@ -1,7 +1,7 @@
{ {
"name": "shout", "name": "shout",
"description": "The self-hosted web IRC client", "description": "The self-hosted web IRC client",
"version": "0.38.4", "version": "0.38.5",
"author": "Mattias Erming", "author": "Mattias Erming",
"preferGlobal": true, "preferGlobal": true,
"bin": { "bin": {