mexon/friendica
1
0
Fork 0
Code Pull requests Activity

contacts page: change the contact-photo size according to display size

Browse source
This commit is contained in:
rabuzarus 2016-04-21 01:52:39 +02:00
parent 8b5004a08f
commit 35eb8b043c
3 changed files with 42 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
css/style.css
View file

@ -1495,7 +1495,8 @@ ul.dropdown-menu li:hover {
/* Profile-page */ /* Profile-page */
#profile-page, .photos-content-wrapper, .settings-content-wrapper, #profile-page, .photos-content-wrapper, .settings-content-wrapper,
.contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper, .contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
.allfriends-content-wrapper, .match-content-wrapper { .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
.directory-content-wrapper {
padding: 15px; padding: 15px;
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 20px; margin-bottom: 20px;
@ -1540,6 +1541,32 @@ ul.viewcontact_wrapper > li {
overflow: visible; overflow: visible;
word-wrap: break-word; word-wrap: break-word;
} }
/* bootstrap hack for .media */
.contact-wrapper.media .media-body {
display: table-cell;
width: 10000px;
*width: auto;
*zoom: 1;
}
.contact-wrapper.media:before, .media:after {
content: "";
display: table;
}
.contact-wrapper.media:after {
clear: both;
}
.contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl {
height: 80px;
width: 80px;
}
.contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs {
height: 48px;
width: 48px;
}
.contact-wrapper .contact-photo-overlay-content.xl {
font-size: 48px;
}
.contact-entry-desc { .contact-entry-desc {
color: #555; color: #555;
} }

17
templates/contact_template.tpl
View file

@ -3,15 +3,24 @@
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}} {{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
<div class="contact-photo-wrapper dropdown pull-left" > <div class="contact-photo-wrapper dropdown pull-left" >
<div class="contact-photo mframe" id="contact-entry-photo-{{$contact.id}}" > <div class="contact-entry-photo mframe" id="contact-entry-photo-{{$contact.id}}" >
<a class="dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > <a class="dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
<div class="contact-photo-image-wrapper"> <div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" /> <img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}} {{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay"> <div class="contact-photo-overlay">
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span> <span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<div class="contact-photo-image-wrapper hidden-lg hidden-md">
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
<span class="contact-photo-overlay-content overlay-xs"><i class="fa fa-angle-down"></i></span>
</div> </div>
</div> </div>
</a> </a>

2
templates/contacts-template.tpl
View file

@ -4,7 +4,7 @@
{{$tabs}} {{$tabs}}
{{* The page headding with it's contacts counter *}} {{* The page headding with it's contacts counter *}}
<h3 class="headding">{{$header}} {{if $total}} ({{$total}}) {{/if}}</h3> <h2 class="headding">{{$header}} {{if $total}} ({{$total}}) {{/if}}</h2>
{{if $finding}}<h4>{{$finding}}</h4>{{/if}} {{if $finding}}<h4>{{$finding}}</h4>{{/if}}