template rework: multi-row view for the other themes

diff --git a/view/templates/contact_template.tpl b/view/templates/contact_template.tpl
index 39502c9..75f4965 100644 (file)
--- 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 7220b4c..4db523c 100644 (file)
--- 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 ef030c5..46fe48c 100644 (file)
--- a/view/theme/frost-mobile/style.css
+++ b/view/theme/frost-mobile/style.css
@@ -1110,8 +1110,13 @@ input#dfrn-url {
        height: 120px;*/\r
        padding-left: 15px;\r
        padding-right: 15px; \r
-       width: 95px;\r
-       height: 200px;\r
+       max-width: 262px;\r
+       height: 90px;\r
+       margin: 0 10px 10px 0px;\r
+}\r
+.contact-entry-wrapper .contact-entry-photo-wrapper {\r
+       float: left;\r
+       margin-right: 10px;\r
 }\r
 #contacts-search-end {\r
        margin-bottom: 10px;\r
@@ -1130,8 +1135,10 @@ input#dfrn-url {
 .contact-entry-photo-end {\r
        clear: both;\r
 }\r
+.contact-entry-desc {\r
+       overflow: hidden;\r
+}\r
 .contact-entry-name {\r
-       float: left;\r
        margin-left: 0px;\r
        margin-right: 10px;\r
        padding-bottom: 5px;\r
@@ -1143,6 +1150,9 @@ input#dfrn-url {
        font-style: italic;\r
        font-size: 10px;\r
        font-weight: 500;\r
+       white-space: nowrap;\r
+       overflow: hidden;\r
+       text-overflow: ellipsis;\r
 }\r
 .contact-entry-network {\r
        font-size: 10px;\r
@@ -2137,7 +2147,7 @@ input#profile-jot-email {
        border: 1px solid #AAA;\r
        background: #FFFFFF;\r
        position: absolute;\r
-       left: -30px; top: 80px;\r
+       /*left: -30px;*/ top: 80px;\r
        display: none;\r
        z-index: 101;\r
        -moz-box-shadow: 3px 3px 5px #555;\r

diff --git a/view/theme/frost-mobile/templates/contact_template.tpl b/view/theme/frost-mobile/templates/contact_template.tpl
index 42f4b73..198b247 100644 (file)
--- 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 94e9afb..f776222 100644 (file)
--- 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 (file)
index 3b68410..0000000
--- 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 66121ba..b35c414 100644 (file)
--- 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 1ed1471..777ed50 100644 (file)
--- 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 3fe04c0..ae670cf 100644 (file)
--- 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;