diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css index a14cd57..69abc02 100644 --- a/client/css/bootstrap.css +++ b/client/css/bootstrap.css @@ -240,14 +240,14 @@ img { height: auto; } .img-rounded { - border-radius: 6px; + border-radius: 2px; } .img-thumbnail { padding: 4px; line-height: 1.42857143; background-color: #ffffff; border: 1px solid #dddddd; - border-radius: 4px; + border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display: inline-block; @@ -286,7 +286,7 @@ hr { padding: 6px 12px; font-size: 14px; line-height: 1.42857143; - border-radius: 4px; + border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -604,19 +604,19 @@ fieldset[disabled] .btn-link:focus { padding: 10px 16px; font-size: 18px; line-height: 1.33; - border-radius: 6px; + border-radius: 2px; } .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; } .btn-block { display: block; @@ -644,7 +644,7 @@ input[type="button"].btn-block { white-space: nowrap; text-align: center; background-color: #999999; - border-radius: 10px; + border-radius: 2px; } .badge:empty { display: none; @@ -684,13 +684,13 @@ a.list-group-item.active > .badge, border: 1px solid #dddddd; } .list-group-item:first-child { - border-top-right-radius: 4px; - border-top-left-radius: 4px; + border-top-right-radius: 2px; + border-top-left-radius: 2px; } .list-group-item:last-child { margin-bottom: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; } .list-group-item > .badge { float: right; diff --git a/client/css/style.css b/client/css/style.css index 717e202..fbb66d0 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -3,13 +3,6 @@ body { font: 12px Consolas, monospace; height: 100%; } -a { - color: inherit; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} ul, li { list-style: none; @@ -31,6 +24,14 @@ h2 { margin: 10px 0; padding: 0 10px; } +#sidebar .list-group-item { + padding: 10px 12px; +} +#sidebar .list-group-item .badge { + font-size: 11px; + font-weight: normal; + margin-top: -1px; +} #chat { bottom: 0; left: 200px; @@ -103,7 +104,7 @@ h2 { position: absolute; right: 0px; top: 43px; - width: 159px; + width: 160px; } #chat .users .user { clear: both; diff --git a/client/index.html b/client/index.html index f9ce0b3..025d4cd 100644 --- a/client/index.html +++ b/client/index.html @@ -19,6 +19,7 @@
{{#channels}} + {{name}} {{/channels}} diff --git a/client/js/chat.js b/client/js/chat.js index 6b6e5e9..a664a0e 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -86,11 +86,22 @@ $(function() { }); }); + chat.on("append", ".window", function() { + var id = $(this).data("id"); + var badge = sidebar.find(".channel[data-id='" + id + "']:not(.active) .badge"); + badge.html((parseInt(badge.html()) + 1) || "1"); + }); + sidebar.on("click", ".channel", function(e) { e.preventDefault(); sidebar.find(".active").removeClass("active"); - $(this).addClass("active"); - chat.find(".window[data-id='" + $(this).data("id") + "']") + var item = $(this) + .addClass("active") + .find(".badge") + .html("") + .end(); + var id = item.data("id"); + chat.find(".window[data-id='" + id + "']") .bringToTop(); }); });