From ad110a98372f4a93355f679b24c76ecfe6a51782 Mon Sep 17 00:00:00 2001
From: Loic Blot <loic.blot@unix-experience.fr>
Date: Thu, 19 May 2016 21:41:39 +0200
Subject: [PATCH] CSS style fix

---
 css/style.css      | 25 +++++++++++++++++--------
 templates/main.php |  5 +++--
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index 57f65aa..db0530c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,9 @@
 /* Navigation: folder like structure */
 #app-mailbox-peers {
-	width: 250px;
+	width: 20%;
 	height: 100%;
 	float: left;
 	-moz-box-sizing: border-box; box-sizing: border-box;
-	background-color: #f5f5f5;
 	padding-bottom: 44px;
 	border-left: 1px solid #ddd;
 	border-right: 1px solid #ddd;
@@ -30,7 +29,7 @@
 #app-mailbox-peers li:hover,
 #app-mailbox-peers .selected,
 #app-mailbox-peers .selected a {
-	background-color: #ccc;
+	background-color: #f8f8f8;
 }
 
 #app-mailbox-peers li > a, #ocsms-empty-peers {
@@ -151,12 +150,22 @@
 }
 
 .ocsms-plavatar {
-	margin-top: 2px;
-	width: 40px;
+	display: inline-block;
 	height: 40px;
-	float: left;
-	background-size: 40px;
-	background-repeat: no-repeat;
+	width: 40px;
+	line-height: 40px;
+	border-radius: 50%;
+	vertical-align: middle;
+	margin-right: 10px;
+	color: white;
+	text-align: center;
+	font-size: 1.5em;
+	text-transform: capitalize;
+	object-fit: cover;
+}
+
+.ocsms-plname {
+	display: inline-block;
 }
 
 #app-settings-content .new-button {
diff --git a/templates/main.php b/templates/main.php
index 195782c..3a7a5d4 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -10,8 +10,9 @@ use \OCA\OcSms\Lib\CountryCodes;
 	<div id="app-mailbox-peers">
 		<ul class="contact-list">
 			<li ng-repeat="contact in contacts" peer-label="{{ contact.label }}">
-				<div class="ocsms-plavatar" style="background-image: url('{{ contact.avatar }}');"></div>
-				<a style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}" ng-click="loadConversation(contact);" href="#">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
+				<div class="ocsms-plavatar" style="background-image: url('{{ contact.avatar }}');" ng-show="contact.avatar != ''"></div>
+				<div class="ocsms-plavatar" ng-show="contact.avatar == ''"></div>
+				<a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}" ng-click="loadConversation(contact);" href="#">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
 			</li>
 		</ul>
 	</div>