Tweak conversation list style

Styled the conversation list items so that:
 - Timestamp is on the same line as the name
 - The message text on an unread conversation is ligher than the rest of
   the text

Resolves: #379
This commit is contained in:
Odysseas 2015-10-24 00:43:51 +03:00
parent e68b84ad9a
commit cafbc0f5df
4 changed files with 8 additions and 6 deletions

View file

@ -122,8 +122,8 @@
{{> avatar }}
<div class='contact-details'>
{{> contact_name_and_number }}
<p class='last-message'> {{ last_message }} </p>
<span class='last-timestamp'> {{ last_message_timestamp }} </span>
<p class='last-message'> {{ last_message }} </p>
</div>
</script>
<script type="text/x-tmpl-mustache" id="phone-number">

View file

@ -307,6 +307,7 @@ $avatar-size: 44px;
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden;
display: inline-block;
}
.number {

View file

@ -119,6 +119,7 @@ input.search {
.last-timestamp {
font-size: smaller;
float: right;
}
.new-contact {
@ -172,7 +173,6 @@ input.search {
.conversations .unread .contact-details {
.name,
.last-message,
.last-timestamp {
font-weight: bold;
}

View file

@ -247,7 +247,8 @@ img.emoji {
font-size: 1em;
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden; }
overflow-x: hidden;
display: inline-block; }
.contact .number {
color: #616161;
font-size: small; }
@ -450,7 +451,7 @@ img.emoji {
display: block; }
.conversation-header {
border-bottom: solid 1px #d9d9d9;
border-bottom: solid 1px #dadada;
margin-bottom: 4px; }
.menu.conversation-menu button.drop-down {
@ -487,7 +488,8 @@ input.search {
color: #ccc; }
.last-timestamp {
font-size: smaller; }
font-size: smaller;
float: right; }
.new-contact {
display: none;
@ -527,7 +529,6 @@ input.search {
display: block; }
.conversations .unread .contact-details .name,
.conversations .unread .contact-details .last-message,
.conversations .unread .contact-details .last-timestamp {
font-weight: bold; }