Merge pull request #75 from maxpoulin64/badge-fade

Fade long channel names in sidebar

client/css/style.css

@@ -277,7 +277,7 @@ button,
 #sidebar .chan-placeholder {
 	display: block;
 	margin: 1px -10px;
-	padding: 6px 10px 8px;
+	padding: 6px 10px 8px 36px;
 	position: relative;
 	text-align: left;
 	transition: color .2s;
@@ -309,6 +309,12 @@ button,
 	text-align: center;
 }
 
+#sidebar .chan:before {
+	position: absolute;
+	top: 4px;
+	left: 10px;
+}
+
 #chat .title:before {
 	margin-top: 17px;
 }
@@ -330,22 +336,49 @@ button,
 
 #sidebar .chan:hover .badge {
 	opacity: 0;
+	position: absolute;
+	z-index: 1;
+	right: 10px;
 }
 
 #sidebar .chan:hover .close {
 	opacity: .2;
 }
 
+#sidebar .chan:hover .name {
+	margin-right: 16px;
+}
+
+#sidebar .chan .name {
+	position: relative;
+	z-index: 0;
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+	margin-right: 5px;
+}
+
+#sidebar .chan .name:after {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 20px;
+	background: linear-gradient(to right, rgba(69, 81, 100, 0) 0%, rgba(69, 81, 100, 1) 100%);
+	content: " ";
+}
+
 #sidebar .badge {
 	background: rgba(255, 255, 255, .06);
 	border-radius: 3px;
 	color: #afb6c0;
 	font-size: 10px;
 	margin-top: 1px;
+	margin-right: -5px;
+	margin-left: 5px;
 	padding: 3px 6px;
-	position: absolute;
-	right: 5px;
-	transition: all .2s;
+	float: right;
+	transition: opacity .2s;
 }
 
 #sidebar .badge.highlight {
@@ -362,6 +395,7 @@ button,
 	margin-right: 5px;
 	opacity: 0;
 	position: absolute;
+	z-index: 2;
 	right: 0;
 	transition: all .2s;
 }

client/views/chan.tpl

@@ -2,6 +2,6 @@
 <div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}}">
 	<span class="badge" data-count="{{unread}}">{{#if unread}}{{unread}}{{/if}}</span>
 	<span class="close"></span>
-	<span class="name">{{name}}</span>
+	<span class="name" title="{{name}}">{{name}}</span>
 </div>
 {{/each}}