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

diff --git a/css/style.css b/css/style.css
index d457c78aeffb0a3f75dafaf7e1e354e7c1660560..38442741cc6189d5eb04710c65c29eeeb8387f59 100644 (file)
--- 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 a04d8156fc57ab16ba40cfb67902c1e5dad55076..af4146f6584b2cec6e76cbcb7d6809912476f094 100644 (file)
--- 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 d3dde53309ecc8c664b5f593692402c41ad9de35..d182c43d50483df7bbeaec9607ed2cb7a3b5c83f 100644 (file)
--- 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}}