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

See issue (#5497)[https://github.com/friendica/friendica/issues/5497] for details.
This commit is contained in:
Andreas Neustifter 2018-07-25 22:12:30 +02:00 committed by Hypolite Petovan
parent 32a8702bd7
commit e8effeb3ae
3 changed files with 70 additions and 63 deletions

View file

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

View file

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

View file

@ -1,10 +1,12 @@
<div class="vcard h-card widget">
<div class="vcard widget h-card"> <div id="profile-photo-wrapper">
{{if $url}} {{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> <a href="{{$url}}"><img class="photo u-photo" src="{{$photo}}" alt="{{$name}}" /></a>
{{else}} {{else}}
<div id="profile-photo-wrapper" class="thumbnail"><img class="vcard-photo photo u-photo" src="{{$photo}}" alt="{{$name}}" /></div> <img class="photo u-photo" src="{{$photo}}" alt="{{$name}}" />
{{/if}} {{/if}}
</div>
{{* The short information which will appended to the second navbar by scrollspy *}} {{* 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-wrapper" style="display: none;">
@ -21,12 +23,14 @@
</div> </div>
<div class="panel-body"> <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 $addr}}<div class="p-addr">{{$addr}}</div>{{/if}}
{{if $pdesc}}<div class="title">{{$pdesc}}</div>{{/if}} {{if $pdesc}}<div class="title">{{$pdesc}}</div>{{/if}}
{{if $account_type}}<div class="account-type">{{$account_type}}</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}} {{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>
</div> </div>