From 442d59abc4c7c54abfee6b0d1d6583634b04ccf1 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Fri, 23 Oct 2015 21:45:16 +0200
Subject: [PATCH] template rework: multi-row view for the other themes

---
 view/templates/contact_template.tpl           | 12 ++++---
 view/theme/duepuntozero/style.css             | 21 +++++++----
 view/theme/frost-mobile/style.css             | 18 +++++++---
 .../templates/contact_template.tpl            | 12 ++++---
 .../templates/contacts-template.tpl           |  3 +-
 .../templates/viewcontact_template.tpl        | 12 -------
 view/theme/frost/style.css                    | 20 +++++++----
 .../frost/templates/contact_template.tpl      | 12 ++++---
 view/theme/smoothly/style.css                 | 35 +++++++++++++++----
 9 files changed, 96 insertions(+), 49 deletions(-)
 delete mode 100644 view/theme/frost-mobile/templates/viewcontact_template.tpl

diff --git a/view/templates/contact_template.tpl b/view/templates/contact_template.tpl
index 39502c91af..75f49653b0 100644
--- a/view/templates/contact_template.tpl
+++ b/view/templates/contact_template.tpl
@@ -1,5 +1,3 @@
-{{* todo: better layout and implement $contact.details and other variables *}}
-
 
 <div class="contact-entry-wrapper" id="contact-entry-wrapper-{{$contact.id}}" >
 	<div class="contact-entry-photo-wrapper" >
@@ -30,8 +28,14 @@
 		</div>
 			
 	</div>
-	<div class="contact-entry-photo-end" ></div>
-	<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+
+	<div class="contact-entry-desc">
+		<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+		{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
+		{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
+		{{if $contact.network}}<div class="contact-entry-details" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
+		{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
+	</div>
 
 	<div class="contact-entry-end" ></div>
 </div>
diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 7220b4c47f..4db523c5ba 100644
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -876,8 +876,14 @@ input#dfrn-url {
 
 .contact-entry-wrapper {
 	float: left;
-	width: 120px;
-	height: 120px;
+	min-width: 363px;
+	height: 90px;
+	padding-right: 10px;
+	margin: 0 10px 10px 0px;
+}
+.contact-entry-wrapper .contact-entry-photo-wrapper {
+	float: left;
+	margin-right: 10px;
 }
 #contacts-search-end {
 	margin-bottom: 10px;
@@ -899,11 +905,14 @@ input#dfrn-url {
 	clear: both;
 }
 .contact-entry-name {
-	float: left;
-	margin-left: 0px;
-	margin-right: 10px;
-	width: 120px;
+	font-weight: bold;
+}
+.contact-entry-details {
+	font-size: 13px;
+	color: #999999;
+	white-space: nowrap;
 	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .contact-entry-edit-links {
 	margin-top: 6px;
diff --git a/view/theme/frost-mobile/style.css b/view/theme/frost-mobile/style.css
index ef030c5f3a..46fe48caf3 100644
--- a/view/theme/frost-mobile/style.css
+++ b/view/theme/frost-mobile/style.css
@@ -1110,8 +1110,13 @@ input#dfrn-url {
 	height: 120px;*/
 	padding-left: 15px;
 	padding-right: 15px; 
-	width: 95px;
-	height: 200px;
+	max-width: 262px;
+	height: 90px;
+	margin: 0 10px 10px 0px;
+}
+.contact-entry-wrapper .contact-entry-photo-wrapper {
+	float: left;
+	margin-right: 10px;
 }
 #contacts-search-end {
 	margin-bottom: 10px;
@@ -1130,8 +1135,10 @@ input#dfrn-url {
 .contact-entry-photo-end {
 	clear: both;
 }
+.contact-entry-desc {
+	overflow: hidden;
+}
 .contact-entry-name {
-	float: left;
 	margin-left: 0px;
 	margin-right: 10px;
 	padding-bottom: 5px;
@@ -1143,6 +1150,9 @@ input#dfrn-url {
 	font-style: italic;
 	font-size: 10px;
 	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .contact-entry-network {
 	font-size: 10px;
@@ -2137,7 +2147,7 @@ input#profile-jot-email {
 	border: 1px solid #AAA;
 	background: #FFFFFF;
 	position: absolute;
-	left: -30px; top: 80px;
+	/*left: -30px;*/ top: 80px;
 	display: none;
 	z-index: 101;
 	-moz-box-shadow: 3px 3px 5px #555;
diff --git a/view/theme/frost-mobile/templates/contact_template.tpl b/view/theme/frost-mobile/templates/contact_template.tpl
index 42f4b7372a..198b24746f 100644
--- a/view/theme/frost-mobile/templates/contact_template.tpl
+++ b/view/theme/frost-mobile/templates/contact_template.tpl
@@ -28,10 +28,14 @@
 		</div>
 			
 	</div>
-	<div class="contact-entry-photo-end" ></div>
-	<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div><br />
-	{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
-	<div class="contact-entry-network" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>
+
+	<div class="contact-entry-desc">
+		<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+		{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
+		{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
+		{{if $contact.network}}<div class="contact-entry-network" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
+		{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
+	</div>
 
 	<div class="contact-entry-end" ></div>
 </div>
diff --git a/view/theme/frost-mobile/templates/contacts-template.tpl b/view/theme/frost-mobile/templates/contacts-template.tpl
index 94e9afbe56..f776222f32 100644
--- a/view/theme/frost-mobile/templates/contacts-template.tpl
+++ b/view/theme/frost-mobile/templates/contacts-template.tpl
@@ -15,11 +15,10 @@
 {{$tabs}}
 
 
-<div id="contacts-display-wrapper">
+
 {{foreach $contacts as $contact}}
 	{{include file="contact_template.tpl"}}
 {{/foreach}}
-</div>
 <div id="contact-edit-end"></div>
 
 {{$paginate}}
diff --git a/view/theme/frost-mobile/templates/viewcontact_template.tpl b/view/theme/frost-mobile/templates/viewcontact_template.tpl
deleted file mode 100644
index 3b68410f95..0000000000
--- a/view/theme/frost-mobile/templates/viewcontact_template.tpl
+++ /dev/null
@@ -1,12 +0,0 @@
-
-{{include file="section_title.tpl"}}
-
-<div id="contacts-display-wrapper">
-{{foreach $contacts as $contact}}
-	{{include file="contact_template.tpl"}}
-{{/foreach}}
-</div>
-
-<div id="view-contact-end"></div>
-
-{{$paginate}}
diff --git a/view/theme/frost/style.css b/view/theme/frost/style.css
index 66121baf34..b35c414053 100644
--- a/view/theme/frost/style.css
+++ b/view/theme/frost/style.css
@@ -1074,12 +1074,14 @@ input#dfrn-url {
 
 .contact-entry-wrapper {
 	float: left;
-/*	width: 120px;
-	height: 120px;*/
-	padding-left: 8px;
-	padding-right: 8px; 
-	width: 95px;
-	height: 170px;
+	width: 262px;
+	height: 90px;
+	padding-right: 10px;
+	margin: 0 10px 10px 0px;
+}
+.contact-entry-wrapper .contact-entry-photo-wrapper {
+	float: left;
+	margin-right: 10px;
 }
 #contacts-search-end {
 	margin-bottom: 10px;
@@ -1100,6 +1102,9 @@ input#dfrn-url {
 .contact-entry-photo-end {
 	clear: both;
 }
+.contact-entry-desc {
+	overflow: hidden;
+}
 .contact-entry-name {
 	/*float: left;*/
 	margin-left: 0px;
@@ -1113,6 +1118,9 @@ input#dfrn-url {
 	font-style: italic;
 	font-size: 10px;
 	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .contact-entry-network {
 	font-size: 10px;
diff --git a/view/theme/frost/templates/contact_template.tpl b/view/theme/frost/templates/contact_template.tpl
index 1ed1471a6e..777ed50179 100644
--- a/view/theme/frost/templates/contact_template.tpl
+++ b/view/theme/frost/templates/contact_template.tpl
@@ -25,10 +25,14 @@
 		</div>
 			
 	</div>
-	<div class="contact-entry-photo-end" ></div>
-	<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
-	{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
-	<div class="contact-entry-network" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>
+
+	<div class="contact-entry-desc">
+		<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
+		{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
+		{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
+		{{if $contact.network}}<div class="contact-entry-network" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
+		{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
+	</div>
 
 	<div class="contact-entry-end" ></div>
 </div>
diff --git a/view/theme/smoothly/style.css b/view/theme/smoothly/style.css
index 3fe04c0649..ae670cf3ad 100644
--- a/view/theme/smoothly/style.css
+++ b/view/theme/smoothly/style.css
@@ -115,6 +115,10 @@ input[type=submit]:active {
 #search-save {
 }
 
+#directory-search-end {
+	clear: both;
+}
+
 .dirsearch-desc {
 }
 
@@ -2753,11 +2757,10 @@ margin-left: 0px;
 .view-contact-wrapper,
 .contact-entry-wrapper {
 	float: left;
-	margin-right: 30px;
-	margin-bottom: 20px;
-	width: 88px;
+	padding-right: 10px;
+	width: 345px;
 	height: 120px;
-	position: relative;
+	margin: 0 10px 10px 0px;
 }
 
 #view-contact-end {
@@ -2768,6 +2771,10 @@ margin-left: 0px;
 	margin-top: 15px;
 }
 
+.contact-entry-wrapper .contact-entry-photo-wrapper {
+	float: left;
+	margin-right: 10px;
+}
 .contact-entry-direction-wrapper {
 	position: absolute;
 	top: 20px;
@@ -2784,17 +2791,27 @@ margin-left: 0px;
 	font-weight: bold;
 }
 
+.contact-entry-desc {
+	overflow: hidden;
+}
+
 .contact-entry-name, .contact-entry-connect {
-	width: 100px;
 	overflow: hidden;
 	font: #999;
 	font-size: 12px;
-	text-align: center;
 	font-weight: bold;
 	margin-top: 5px;
 }
 
-.contact-entry-photo {
+.contact-entry-details {
+	font-size: 13px;
+	color: #999999;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.contact-entry-photo-wrapper {
 	position: relative;
 	/*border: 1px solid #7C7D7B;
 	border-radius: 3px;
@@ -2805,6 +2822,10 @@ margin-left: 0px;
 		-webkit-box-shadow: 0 0 8px #BDBDBD;*/
 }
 
+.contact-entry-photo {
+	width: 80px;
+}
+
 .contact-entry-photo a img {
 	width: 80px;
 	height: 80px;