Mirrors/thelounge
2
0
Fork 0
mirror of https://github.com/thelounge/thelounge synced 2024-11-26 14:00:21 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fade long channel names in sidebar

Browse source
This commit is contained in:
Maxime Poulin 2016-02-20 20:28:45 -05:00
parent f8d8b74352
commit 867917ff6e
2 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
client/css/style.css
View file

@ -287,7 +287,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;
@ -319,6 +319,12 @@ button,
text-align: center;
}
#sidebar .chan:before {
position: absolute;
top: 4px;
left: 10px;
}
#chat .title:before {
margin-top: 17px;
}
@ -340,22 +346,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 {
@ -372,6 +405,7 @@ button,
margin-right: 5px;
opacity: 0;
position: absolute;
z-index: 2;
right: 0;
transition: all .2s;
}

2
client/views/chan.tpl
View file

@ -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}}