updating styling for chat dropdown

main
Julian Lam 9 years ago
parent 77c33b40b4
commit d53656ba67

@ -9,9 +9,6 @@
li { li {
width: 300px; width: 300px;
text-align: left; text-align: left;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
list-style-type: none; list-style-type: none;
padding: 0.5em; padding: 0.5em;
clear: both; clear: both;
@ -67,18 +64,39 @@
.chat-list { .chat-list {
.notification-list; .notification-list;
li { > li {
.pointer; .pointer;
width: 300px; width: 300px;
padding-bottom: 1rem;
margin: 0;
a { &:hover {
position: relative; background: @gray-lighter;
}
&:not(:last-child) {
border-bottom: 1px solid @gray-lighter;
} }
&.no_active a { &.no_active a {
text-align: center; text-align: center;
white-space: normal; white-space: normal;
} }
a {
line-height: 24px;
}
.members {
padding-left: 1rem;
li {
display: inline-block;
width: 16px;
padding: 0;
margin: 0;
}
}
} }
} }
} }

@ -1,22 +1,24 @@
<!-- IF rooms.length --> <!-- IF rooms.length -->
<!-- BEGIN rooms --> <!-- BEGIN rooms -->
<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->"> <li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
<a data-ajaxify="false" data-roomid="{rooms.roomId}"> <a data-ajaxify="false" data-roomid="{rooms.roomId}">{rooms.roomName}</a>
<p>{rooms.roomName}</p>
</a>
<!-- BEGIN rooms.users --> <ul class="members">
<a href="{config.relative_path}/user/{rooms.users.userslug}" class="user-link"> <!-- BEGIN rooms.users -->
<!-- IF rooms.users.picture --> <li>
<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}"> <a href="{config.relative_path}/user/{rooms.users.userslug}" class="user-link">
<!-- ELSE --> <!-- IF rooms.users.picture -->
<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div> <img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
<!-- ENDIF rooms.users.picture --> <!-- ELSE -->
</a> <div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
<!-- END rooms.users --> <!-- ENDIF rooms.users.picture -->
<!-- IF !rooms.lastUser.uid --> </a>
[[modules:chat.no-users-in-room]] </li>
<!-- ENDIF !rooms.lastUser.uid --> <!-- END rooms.users -->
<!-- IF !rooms.lastUser.uid -->
<li>[[modules:chat.no-users-in-room]]</li>
<!-- ENDIF !rooms.lastUser.uid -->
</ul>
</li> </li>

Loading…
Cancel
Save