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

view/templates/widget/remote_friends_common.tpl

@@ -1,5 +1,6 @@
+<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" >
-	<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">
@@ -16,3 +17,4 @@
 			{{/foreach}}
 			<div id="rfic-end" class="clear"></div>
 		</div>
+	</div>

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
  */

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;