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;
--
2.39.5