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
+1 -1
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">
+1
View File
@@ -307,6 +307,7 @@ $avatar-size: 44px;
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden;
display: inline-block;
}
.number {
+1 -1
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;
}
+5 -4
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; }