From: rabuzarus <>
Date: Wed, 20 Apr 2016 23:52:39 +0000 (+0200)
Subject: contacts page: change the contact-photo size according to display size
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=35eb8b043c4eb88e8fc76395c8afc30cc29c56a8;p=friendica.git

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

diff --git a/css/style.css b/css/style.css
index d457c78aef..38442741cc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1495,7 +1495,8 @@ ul.dropdown-menu li:hover {
 /* Profile-page */
 #profile-page, .photos-content-wrapper, .settings-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-bottom: 20px;
     margin-bottom: 20px;
@@ -1540,6 +1541,32 @@ ul.viewcontact_wrapper > li {
     overflow: visible;
     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 {
     color: #555;
 }
diff --git a/templates/contact_template.tpl b/templates/contact_template.tpl
index a04d8156fc..af4146f658 100644
--- a/templates/contact_template.tpl
+++ b/templates/contact_template.tpl
@@ -3,15 +3,24 @@
 
 		{{* 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 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" >
-					<div class="contact-photo-image-wrapper">
-						<img class="contact-photo media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
+					<div class="contact-photo-image-wrapper hidden-xs">
+						<img class="contact-photo media-object xl" 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"><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>
 				</a>
diff --git a/templates/contacts-template.tpl b/templates/contacts-template.tpl
index d3dde53309..d182c43d50 100644
--- a/templates/contacts-template.tpl
+++ b/templates/contacts-template.tpl
@@ -4,7 +4,7 @@
 	{{$tabs}}
 
 	{{* 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}}