Merge pull request #13771 from Raroun/fix_for_issue_#13710_frio]_Long_handles_prevent_a_clean_display_of_common_contacts

Fix for issue #13710 - [frio] long handles prevent a clean display of common contacts
This commit is contained in:
Hypolite Petovan 2023-12-26 19:17:15 -05:00 committed by GitHub
commit ac1ebac112
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 17 deletions

View File

@ -1,18 +1,20 @@
<div id="remote-friends-in-common" class="bigwidget"> <div id="rfic-desc" onclick="openClose('remote-friends-in-common-wrapper');">{{$desc nofilter}}&emsp;&emsp;{{if $linkmore}}<a href="profile/{{$nickname}}/contacts/common">{{$more}}</a>{{/if}}</div>
<div id="rfic-desc">{{$desc nofilter}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{if $linkmore}}<a href="profile/{{$nickname}}/contacts/common">{{$more}}</a>{{/if}}</div> <div id="remote-friends-in-common-wrapper">
{{foreach $contacts as $contact}} <div id="remote-friends-in-common" class="bigwidget" >
<div class="profile-match-wrapper"> {{foreach $contacts as $contact}}
<div class="profile-match-photo"> <div class="profile-match-wrapper">
<a href="{{$contact.url}}"> <div class="profile-match-photo">
<img src="{{$contact.photo}}" width="80" height="80" alt="{{$contact.name}}" title="{{$contact.name}}" /> <a href="{{$contact.url}}">
</a> <img src="{{$contact.photo}}" width="80" height="80" alt="{{$contact.name}}" title="{{$contact.name}}" />
</a>
</div>
<div class="profile-match-break"></div>
<div class="profile-match-name">
<a href="{{$contact.url}}" title="{{$contact.name}}">{{$contact.name}}</a>
</div>
<div class="profile-match-end"></div>
</div>
{{/foreach}}
<div id="rfic-end" class="clear"></div>
</div> </div>
<div class="profile-match-break"></div>
<div class="profile-match-name">
<a href="{{$contact.url}}" title="{{$contact.name}}">{{$contact.name}}</a>
</div>
<div class="profile-match-end"></div>
</div> </div>
{{/foreach}}
<div id="rfic-end" class="clear"></div>
</div>

View File

@ -2231,6 +2231,8 @@ img.acpopup-img {
/* Birthday and Event Reminders */ /* Birthday and Event Reminders */
#birthday-notice, #birthday-notice,
#birthday-wrapper, #birthday-wrapper,
#rfic-desc,
#remote-friends-in-common,
#event-notice, #event-notice,
#event-wrapper { #event-wrapper {
margin-bottom: 5px; margin-bottom: 5px;
@ -2241,6 +2243,20 @@ img.acpopup-img {
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada;
-moz-box-shadow: 0 0 3px #dadada; -moz-box-shadow: 0 0 3px #dadada;
border-radius: 4px; border-radius: 4px;
cursor: pointer;
}
#remote-friends-in-common {
background-color: rgba(247, 247, 247, $contentbg_transp)
border-radius: 4px;
color: #444;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
margin-bottom: 15px;
padding: 10px;
}
#remote-friends-in-common-wrapper{
display: none;
} }
/* Menubar Tabs */ /* Menubar Tabs */
@ -3489,10 +3505,32 @@ body .tread-wrapper .hovercard:hover .hover-card-content a {
* some temporary workarounds until this will solved * some temporary workarounds until this will solved
* elsewhere (e.g. new templates) * elsewhere (e.g. new templates)
*/ */
section .profile-match-wrapper { section .profile-match-wrapper {
float: left; float: left;
} }
.profile-match-photo {
align-items: center;
display: flex;
justify-content: center;
}
.profile-match-name {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.profile-match-break {
display: none;
}
.profile-match-end {
display: none;
}
/** /**
* Login page * Login page
*/ */

View File

@ -221,12 +221,20 @@ div.pager {
margin-bottom: 5px; */ margin-bottom: 5px; */
} }
.birthday-notice, .event-notice { .birthday-notice, .event-notice, #rfic-desc {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
#remote-friends-in-common-wrapper {
display: none;
}
#rfic-desc {
cursor: pointer;
}
#live-network { #live-network {
/* border-bottom: 1px solid #BDCDD4; */ /* border-bottom: 1px solid #BDCDD4; */
border-bottom: 1px solid #D2D2D2; border-bottom: 1px solid #D2D2D2;