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

Fix for issue #13710 - [frio] long handles prevent a clean display of common contacts

diff --git a/view/templates/widget/remote_friends_common.tpl b/view/templates/widget/remote_friends_common.tpl
index 74d8e668049e911761ead4a6b3cbe2b5d07b3826..27728fec6a4b67ecd677c57061a666f13c2456a6 100644 (file)
--- a/view/templates/widget/remote_friends_common.tpl
+++ b/view/templates/widget/remote_friends_common.tpl
@@ -1,18 +1,20 @@
-<div id="remote-friends-in-common" class="bigwidget">
-       <div id="rfic-desc">{{$desc nofilter}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{if $linkmore}}<a href="profile/{{$nickname}}/contacts/common">{{$more}}</a>{{/if}}</div>
-       {{foreach $contacts as $contact}}
-       <div class="profile-match-wrapper">
-               <div class="profile-match-photo">
-                       <a href="{{$contact.url}}">
-                               <img src="{{$contact.photo}}" width="80" height="80" alt="{{$contact.name}}" title="{{$contact.name}}" />
-                       </a>
+<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="remote-friends-in-common-wrapper">
+               <div id="remote-friends-in-common" class="bigwidget" >
+                       {{foreach $contacts as $contact}}
+                       <div class="profile-match-wrapper">
+                               <div class="profile-match-photo">
+                                       <a href="{{$contact.url}}">
+                                               <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 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>

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 74fc0001cafbc8edd8278e0d8ab3f64957d66d45..be71399a86ea085ed5d97ab43551c3c6976390fe 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2231,6 +2231,8 @@ img.acpopup-img {
 /* Birthday and Event Reminders  */
 #birthday-notice,
 #birthday-wrapper,
+#rfic-desc,
+#remote-friends-in-common,
 #event-notice,
 #event-wrapper {
        margin-bottom: 5px;
@@ -2241,6 +2243,20 @@ img.acpopup-img {
        -webkit-box-shadow: 0 0 3px #dadada;
        -moz-box-shadow: 0 0 3px #dadada;
        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 */
@@ -3489,10 +3505,32 @@ body .tread-wrapper .hovercard:hover .hover-card-content a {
  * some temporary workarounds until this will solved
  * elsewhere (e.g. new templates)
  */
+
 section .profile-match-wrapper {
        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
  */

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index b2ef72f5f5d2a0784cff86cc80a0566b9cdafbf9..3231c7a703d1f75ccb76fd8075b1d9e9f801a022 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -221,12 +221,20 @@ div.pager {
        margin-bottom: 5px; */
 }
 
-.birthday-notice, .event-notice {
+.birthday-notice, .event-notice, #rfic-desc {
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #F5F5F5;
 }
 
+#remote-friends-in-common-wrapper {
+       display: none;
+}
+
+#rfic-desc {
+       cursor: pointer;
+}
+
 #live-network {
        /* border-bottom: 1px solid #BDCDD4; */
        border-bottom: 1px solid #D2D2D2;