[frio] Fix layout of profile aside. (#5497) (#5498)

See issue (#5497)[https://github.com/friendica/friendica/issues/5497] for details.

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 0206c9d302f7a2a852a6c17e88431bac2f666a0f..84964ec6c485282c9fa6b9aac4354ae68362125f 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1115,11 +1115,11 @@ aside .vcard #profile-photo-wrapper.crop-preview {
     padding: 0;
 }
 aside .vcard .profile-header {
-    margin-bottom: 20px;
+    padding: 5px 0px 5px 0px;
 }
 aside .vcard .fn {
-    font-size: 20px;
     font-weight: bold;
+    padding: 5px 0px 5px 0px;
 }
 aside .vcard .p-addr {
     font-style: italic;
@@ -1139,9 +1139,10 @@ aside .xmpp {
 aside .vcard .icon {
     display: table-cell;
     padding-right: 10px;
+    width: 30px;
 }
 #profile-extra-links {
-    margin-bottom: 20px;
+    overflow: auto;
 }
 aside .vcard #dfrn-request-link-button,
 aside .vcard #wallmessage-link-botton {
@@ -1514,6 +1515,9 @@ section #jotOpen {
     overflow: visible;
     word-wrap: break-word;
 }
+aside .panel-body {
+    padding: 0px;
+}
 
 /* Thread hover effects */
 .wall-item-container .wall-item-content a,

diff --git a/view/theme/frio/templates/profile_vcard.tpl b/view/theme/frio/templates/profile_vcard.tpl
index 831c47171d6503b509bd61d926ae8ab786037b0e..392adc1c484435248b30fb31a6ace2823aa0f721 100644 (file)
--- a/view/theme/frio/templates/profile_vcard.tpl
+++ b/view/theme/frio/templates/profile_vcard.tpl
@@ -1,25 +1,26 @@
 <div class="vcard h-card widget">
 
-       {{if $profile.picdate}}
-               <div id="profile-photo-wrapper" class="thumbnail"><a href="{{$profile.url}}"><img class="photo u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.name}}" /></a>
-       {{else}}
-               <div id="profile-photo-wrapper" class="thumbnail"><a href="{{$profile.url}}"><img class="photo u-photo" src="{{$profile.photo}}" alt="{{$profile.name}}" /></a>
-       {{/if}}
-                       <div class="tool visible-lg visible-md">
+       <div id="profile-photo-wrapper">
+               {{if $profile.picdate}}
+               <a href="{{$profile.url}}"><img class="photo u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.name}}" /></a>
+               {{else}}
+               <a href="{{$profile.url}}"><img class="photo u-photo" src="{{$profile.photo}}" alt="{{$profile.name}}" /></a>
+               {{/if}}
 
+               <div class="tool visible-lg visible-md">
                        {{if $profile.edit}}
-                               <div class="action">
-                                       <a class="" href="{{$profile.edit.0}}" title="{{$profile.edit.3}}"><i class="fa fa-pencil-square-o"></i></a>
-                               </div>
+                       <div class="action">
+                               <a class="" href="{{$profile.edit.0}}" title="{{$profile.edit.3}}"><i class="fa fa-pencil-square-o"></i></a>
+                       </div>
                        {{else}}
                                {{if $profile.menu}}
-                                       <div class="profile-edit-side-div"><a class="profile-edit-side-link icon edit" title="{{$editprofile}}" href="profiles" ></a></div>
+                               <div class="profile-edit-side-div"><a class="profile-edit-side-link icon edit" title="{{$editprofile}}" href="profiles" ></a></div>
                                {{/if}}
                        {{/if}}
-                       </div>
-
                </div>
 
+       </div>
+
        {{* The short information which will appended to the second navbar by scrollspy *}}
        <div id="vcard-short-info-wrapper" style="display: none;">
                <div id="vcard-short-info" class="media" style="display: none">
@@ -36,7 +37,7 @@
 
        <div class="panel-body">
                <div class="profile-header">
-                       <div class="fn p-name">{{$profile.name}}</div>
+                       <h3 class="fn p-name">{{$profile.name}}</h3>
 
                        {{if $profile.addr}}<div class="p-addr">{{$profile.addr}}</div>{{/if}}
 
@@ -44,54 +45,53 @@
                </div>
 
                <div id="profile-extra-links">
-                               {{if $connect}}
-                                       <div id="dfrn-request-link-button">
-                                       {{if $remoteconnect}}
-                                               <a id="dfrn-request-link" class="btn btn-primary btn-sm" href="{{$remoteconnect}}">
-                                                       <span class=""><i class="fa fa-user-plus"></i></span>
-                                                       <span class="">{{$connect}}</span>
-                                               </a>
-                                       {{else}}
-                                               <a id="dfrn-request-link" class="btn btn-labeled btn-primary btn-sm" href="dfrn_request/{{$profile.nickname}}">
-                                                       <span class=""><i class="fa fa-user-plus"></i></span>
-                                                       <span class="">{{$connect}}</span>
-                                               </a>
-                                       {{/if}}
-                                       </div>
-                               {{/if}}
-                               {{if $wallmessage}}
-                               <div id="wallmessage-link-botton">
-                                       <button type="button" id="wallmessage-link" class="btn btn-labeled btn-primary btn-sm" onclick="openWallMessage('{{$wallmessage_link}}')">
-                                               <span class=""><i class="fa fa-envelope"></i></span>
-                                               <span class="">{{$wallmessage}}</span>
-                                       </button>
-                               </div>
+                       {{if $connect}}
+                       <div id="dfrn-request-link-button">
+                               {{if $remoteconnect}}
+                               <a id="dfrn-request-link" class="btn btn-primary btn-sm" href="{{$remoteconnect}}">
+                                       <span class=""><i class="fa fa-user-plus"></i></span>
+                                       <span class="">{{$connect}}</span>
+                               </a>
+                               {{else}}
+                               <a id="dfrn-request-link" class="btn btn-labeled btn-primary btn-sm" href="dfrn_request/{{$profile.nickname}}">
+                                       <span class=""><i class="fa fa-user-plus"></i></span>
+                                       <span class="">{{$connect}}</span>
+                               </a>
                                {{/if}}
-
+                       </div>
+                       {{/if}}
+                       {{if $wallmessage}}
+                       <div id="wallmessage-link-botton">
+                               <button type="button" id="wallmessage-link" class="btn btn-labeled btn-primary btn-sm" onclick="openWallMessage('{{$wallmessage_link}}')">
+                                       <span class=""><i class="fa fa-envelope"></i></span>
+                                       <span class="">{{$wallmessage}}</span>
+                               </button>
+                       </div>
+                       {{/if}}
                </div>
 
                <div class="clear"></div>
 
                {{if $location}}
-                       <div class="location detail">
-                               <span class="location-label icon"><i class="fa fa-map-marker"></i></span>
-                               <span class="adr">
-                                       {{if $profile.address}}<span class="street-address p-street-address">{{$profile.address}}</span>{{/if}}
-                                       <span class="city-state-zip">
-                                               <span class="locality p-locality">{{$profile.locality}}</span>{{if $profile.locality}}, {{/if}}
-                                               <span class="region p-region">{{$profile.region}}</span>
-                                               <span class="postal-code p-postal-code">{{$profile.postal_code}}</span>
-                                       </span>
-                                       {{if $profile.country_name}}<span class="country-name p-country-name">{{$profile.country_name}}</span>{{/if}}
+               <div class="location detail">
+                       <span class="location-label icon"><i class="fa fa-map-marker"></i></span>
+                       <span class="adr">
+                               {{if $profile.address}}<span class="street-address p-street-address">{{$profile.address}}</span>{{/if}}
+                               <span class="city-state-zip">
+                                       <span class="locality p-locality">{{$profile.locality}}</span>{{if $profile.locality}}, {{/if}}
+                                       <span class="region p-region">{{$profile.region}}</span>
+                                       <span class="postal-code p-postal-code">{{$profile.postal_code}}</span>
                                </span>
-                       </div>
+                               {{if $profile.country_name}}<span class="country-name p-country-name">{{$profile.country_name}}</span>{{/if}}
+                       </span>
+               </div>
                {{/if}}
 
                {{if $profile.xmpp}}
-                       <div class="xmpp">
-                               <span class="xmpp-label icon"><i class="fa fa-comments"></i></span>
-                               <span class="xmpp-data">{{$profile.xmpp}}</span>
-                       </div>
+               <div class="xmpp">
+                       <span class="xmpp-label icon"><i class="fa fa-comments"></i></span>
+                       <span class="xmpp-data">{{$profile.xmpp}}</span>
+               </div>
                {{/if}}
 
                {{if $gender}}
@@ -125,7 +125,6 @@
 
                {{include file="diaspora_vcard.tpl"}}
        </div>
-
 </div>
 
 {{if $contact_block}}

diff --git a/view/theme/frio/templates/vcard-widget.tpl b/view/theme/frio/templates/vcard-widget.tpl
index 040a6aa84a2326b45c95b936adba0690e0ac6a9a..1eb75d46791a1e7c918b40093d3131694aa6a8f1 100644 (file)
--- a/view/theme/frio/templates/vcard-widget.tpl
+++ b/view/theme/frio/templates/vcard-widget.tpl
@@ -1,10 +1,12 @@
+<div class="vcard h-card widget">
 
-<div class="vcard widget h-card">
-       {{if $url}}
-               <div id="profile-photo-wrapper" class="thumbnail"><a class="u-url" href="{{$url}}"><img class="vcard-photo photo u-photo" src="{{$photo}}" alt="{{$name}}" /></a></div>
-       {{else}}
-               <div id="profile-photo-wrapper" class="thumbnail"><img class="vcard-photo photo u-photo" src="{{$photo}}" alt="{{$name}}" /></div>
-       {{/if}}
+       <div id="profile-photo-wrapper">
+               {{if $url}}
+               <a href="{{$url}}"><img class="photo u-photo" src="{{$photo}}" alt="{{$name}}" /></a>
+               {{else}}
+               <img class="photo u-photo" src="{{$photo}}" alt="{{$name}}" />
+               {{/if}}
+       </div>
 
        {{* The short information which will appended to the second navbar by scrollspy *}}
        <div id="vcard-short-info-wrapper" style="display: none;">
@@ -21,12 +23,14 @@
        </div>
 
        <div class="panel-body">
-               <div class="fn p-name">{{$name}}</div>
+               <h3 class="fn p-name">{{$name}}</h3>
+
                {{if $addr}}<div class="p-addr">{{$addr}}</div>{{/if}}
+
                {{if $pdesc}}<div class="title">{{$pdesc}}</div>{{/if}}
 
                {{if $account_type}}<div class="account-type">{{$account_type}}</div>{{/if}}
+
                {{if $network_name}}<dl class="network"><dt class="network-label">{{$network}}</dt><dd class="x-network">{{$network_name}}</dd></dl>{{/if}}
-               <div id="profile-vcard-break"></div>
        </div>
 </div>