friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

template rework: multi-row view for the other themes

This commit is contained in:
rabuzarus 2015-10-23 21:45:16 +02:00
parent 86f94570ef
commit 442d59abc4
9 changed files with 96 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
view/templates/contact_template.tpl
View File

@ -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-wrapper" id="contact-entry-wrapper-{{$contact.id}}" >
<div class="contact-entry-photo-wrapper" > <div class="contact-entry-photo-wrapper" >
@ -30,8 +28,14 @@
</div> </div>
</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 class="contact-entry-end" ></div>
</div> </div>

21
view/theme/duepuntozero/style.css
View File

@ -876,8 +876,14 @@ input#dfrn-url {
.contact-entry-wrapper { .contact-entry-wrapper {
float: left; float: left;
width: 120px; min-width: 363px;
height: 120px; 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 { #contacts-search-end {
margin-bottom: 10px; margin-bottom: 10px;
@ -899,11 +905,14 @@ input#dfrn-url {
clear: both; clear: both;
} }
.contact-entry-name { .contact-entry-name {
float: left; font-weight: bold;
margin-left: 0px; }
margin-right: 10px; .contact-entry-details {
width: 120px; font-size: 13px;
color: #999999;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
.contact-entry-edit-links { .contact-entry-edit-links {
margin-top: 6px; margin-top: 6px;

18
view/theme/frost-mobile/style.css
View File

@ -1110,8 +1110,13 @@ input#dfrn-url {
height: 120px;*/ height: 120px;*/
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
width: 95px; max-width: 262px;
height: 200px; height: 90px;
margin: 0 10px 10px 0px;
}
.contact-entry-wrapper .contact-entry-photo-wrapper {
float: left;
margin-right: 10px;
} }
#contacts-search-end { #contacts-search-end {
margin-bottom: 10px; margin-bottom: 10px;
@ -1130,8 +1135,10 @@ input#dfrn-url {
.contact-entry-photo-end { .contact-entry-photo-end {
clear: both; clear: both;
} }
.contact-entry-desc {
overflow: hidden;
}
.contact-entry-name { .contact-entry-name {
float: left;
margin-left: 0px; margin-left: 0px;
margin-right: 10px; margin-right: 10px;
padding-bottom: 5px; padding-bottom: 5px;
@ -1143,6 +1150,9 @@ input#dfrn-url {
font-style: italic; font-style: italic;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.contact-entry-network { .contact-entry-network {
font-size: 10px; font-size: 10px;
@ -2137,7 +2147,7 @@ input#profile-jot-email {
border: 1px solid #AAA; border: 1px solid #AAA;
background: #FFFFFF; background: #FFFFFF;
position: absolute; position: absolute;
left: -30px; top: 80px; /*left: -30px;*/ top: 80px;
display: none; display: none;
z-index: 101; z-index: 101;
-moz-box-shadow: 3px 3px 5px #555; -moz-box-shadow: 3px 3px 5px #555;

12
view/theme/frost-mobile/templates/contact_template.tpl
View File

@ -28,10 +28,14 @@
</div> </div>
</div> </div>
<div class="contact-entry-photo-end" ></div>
<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div><br /> <div class="contact-entry-desc">
{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}} <div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
<div class="contact-entry-network" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</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 class="contact-entry-end" ></div>
</div> </div>

3
view/theme/frost-mobile/templates/contacts-template.tpl
View File

@ -15,11 +15,10 @@
{{$tabs}} {{$tabs}}
<div id="contacts-display-wrapper">
{{foreach $contacts as $contact}} {{foreach $contacts as $contact}}
{{include file="contact_template.tpl"}} {{include file="contact_template.tpl"}}
{{/foreach}} {{/foreach}}
</div>
<div id="contact-edit-end"></div> <div id="contact-edit-end"></div>
{{$paginate}} {{$paginate}}

12
view/theme/frost-mobile/templates/viewcontact_template.tpl
View File

@ -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}}

20
view/theme/frost/style.css
View File

@ -1074,12 +1074,14 @@ input#dfrn-url {
.contact-entry-wrapper { .contact-entry-wrapper {
float: left; float: left;
/* width: 120px; width: 262px;
height: 120px;*/ height: 90px;
padding-left: 8px; padding-right: 10px;
padding-right: 8px; margin: 0 10px 10px 0px;
width: 95px; }
height: 170px; .contact-entry-wrapper .contact-entry-photo-wrapper {
float: left;
margin-right: 10px;
} }
#contacts-search-end { #contacts-search-end {
margin-bottom: 10px; margin-bottom: 10px;
@ -1100,6 +1102,9 @@ input#dfrn-url {
.contact-entry-photo-end { .contact-entry-photo-end {
clear: both; clear: both;
} }
.contact-entry-desc {
overflow: hidden;
}
.contact-entry-name { .contact-entry-name {
/*float: left;*/ /*float: left;*/
margin-left: 0px; margin-left: 0px;
@ -1113,6 +1118,9 @@ input#dfrn-url {
font-style: italic; font-style: italic;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.contact-entry-network { .contact-entry-network {
font-size: 10px; font-size: 10px;

12
view/theme/frost/templates/contact_template.tpl
View File

@ -25,10 +25,14 @@
</div> </div>
</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">
{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}} <div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >{{$contact.name}}</div>
<div class="contact-entry-network" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</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 class="contact-entry-end" ></div>
</div> </div>

35
view/theme/smoothly/style.css
View File

@ -115,6 +115,10 @@ input[type=submit]:active {
#search-save { #search-save {
} }
#directory-search-end {
clear: both;
}
.dirsearch-desc { .dirsearch-desc {
} }
@ -2753,11 +2757,10 @@ margin-left: 0px;
.view-contact-wrapper, .view-contact-wrapper,
.contact-entry-wrapper { .contact-entry-wrapper {
float: left; float: left;
margin-right: 30px; padding-right: 10px;
margin-bottom: 20px; width: 345px;
width: 88px;
height: 120px; height: 120px;
position: relative; margin: 0 10px 10px 0px;
} }
#view-contact-end { #view-contact-end {
@ -2768,6 +2771,10 @@ margin-left: 0px;
margin-top: 15px; margin-top: 15px;
} }
.contact-entry-wrapper .contact-entry-photo-wrapper {
float: left;
margin-right: 10px;
}
.contact-entry-direction-wrapper { .contact-entry-direction-wrapper {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -2784,17 +2791,27 @@ margin-left: 0px;
font-weight: bold; font-weight: bold;
} }
.contact-entry-desc {
overflow: hidden;
}
.contact-entry-name, .contact-entry-connect { .contact-entry-name, .contact-entry-connect {
width: 100px;
overflow: hidden; overflow: hidden;
font: #999; font: #999;
font-size: 12px; font-size: 12px;
text-align: center;
font-weight: bold; font-weight: bold;
margin-top: 5px; 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; position: relative;
/*border: 1px solid #7C7D7B; /*border: 1px solid #7C7D7B;
border-radius: 3px; border-radius: 3px;
@ -2805,6 +2822,10 @@ margin-left: 0px;
-webkit-box-shadow: 0 0 8px #BDBDBD;*/ -webkit-box-shadow: 0 0 8px #BDBDBD;*/
} }
.contact-entry-photo {
width: 80px;
}
.contact-entry-photo a img { .contact-entry-photo a img {
width: 80px; width: 80px;
height: 80px; height: 80px;