clones/friendica
1
0
Fork 0
Code Issues Pull Requests Projects Releases 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-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>

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

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

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

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

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

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

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

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

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

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

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

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

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