From a7944a1e089f2da85e83d3809ab97cd2bfba5447 Mon Sep 17 00:00:00 2001
From: veselcraft <veselcraft@icloud.com>
Date: Mon, 20 Dec 2021 18:02:49 +0300
Subject: [PATCH] User: Friends mini-list redesign

Also fixes #180
---
 Web/Presenters/templates/Group/View.xml | 33 ++++++----------
 Web/Presenters/templates/User/View.xml  | 51 ++++++++-----------------
 Web/static/css/style.css                | 42 ++++++++++++++++++++
 3 files changed, 70 insertions(+), 56 deletions(-)

diff --git a/Web/Presenters/templates/Group/View.xml b/Web/Presenters/templates/Group/View.xml
index b7a5d70d..f16c435d 100644
--- a/Web/Presenters/templates/Group/View.xml
+++ b/Web/Presenters/templates/Group/View.xml
@@ -53,27 +53,18 @@
                         <a href="/club{$club->getId()}/followers">{_all_title}</a>
                     </div>
                 </div>
-                <div style="padding-left: 5px;">
-                    <table 
-                          n:foreach="$club->getFollowers(1) as $follower"
-                          n:class="User"
-                          style="text-align:center;display:inline-block;width:62px"
-                          cellspacing=4>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <a href="{$follower->getURL()}">
-                                        <img src="{$follower->getAvatarUrl()}" width="50" />
-                                    </a>    
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <a href="{$follower->getURL()}">{$follower->getFirstName()}</a>    
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div style="padding-left: 5px;" class="content_list long">
+                    <div class="cl_element" n:foreach="$club->getFollowers(1) as $follower">
+                        <div class="cl_avatar">
+                            <a href="{$follower->getURL()}">
+                                <img class="ava" src="{$follower->getAvatarUrl()}" />
+                            </a>
+                        </div>
+                        <a href="{$follower->getURL()}" class="cl_name">
+                            <text class="cl_fname">{$follower->getFirstName()}</text>
+                            <text class="cl_lname">{$follower->getLastName()}</text>
+                        </a>    
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/Web/Presenters/templates/User/View.xml b/Web/Presenters/templates/User/View.xml
index be1dc914..b7149c7e 100644
--- a/Web/Presenters/templates/User/View.xml
+++ b/Web/Presenters/templates/User/View.xml
@@ -95,21 +95,21 @@
                 
                 {var subStatus = $user->getSubscriptionStatus($thisUser)}
                 {if $subStatus === 0}
-                    <form action="/setSub/user" method="post">
+                    <form action="/setSub/user" method="post" class="profile_link_form">
                         <input type="hidden" name="act" value="add" />
                         <input type="hidden" name="id"  value="{$user->getId()}" />
                         <input type="hidden" name="hash" value="{$csrfToken}" />
                         <input type="submit" class="profile_link" value="{_"friends_add"}" />
                     </form>
                 {elseif $subStatus === 1}
-                    <form action="/setSub/user" method="post">
+                    <form action="/setSub/user" method="post" class="profile_link_form">
                         <input type="hidden" name="act" value="add" />
                         <input type="hidden" name="id"  value="{$user->getId()}" />
                         <input type="hidden" name="hash" value="{$csrfToken}" />
                         <input type="submit" class="profile_link" value="{_"friends_accept"}" />
                     </form>
                 {elseif $subStatus === 2}
-                    <form action="/setSub/user" method="post">
+                    <form action="/setSub/user" method="post" class="profile_link_form">
                         <input type="hidden" name="act" value="rem" />
                         <input type="hidden" name="id"  value="{$user->getId()}" />
                         <input type="hidden" name="hash" value="{$csrfToken}" />
@@ -117,7 +117,7 @@
                     </form>
                 {elseif $subStatus === 3}
                     <a href="/im?sel={$user->getId()}" class="profile_link">{_"send_message"}</a>
-                    <form action="/setSub/user" method="post">
+                    <form action="/setSub/user" method="post" class="profile_link_form">
                         <input type="hidden" name="act" value="rem" />
                         <input type="hidden" name="id"  value="{$user->getId()}" />
                         <input type="hidden" name="hash" value="{$csrfToken}" />
@@ -125,6 +125,7 @@
                     </form>
                 {/if}
             {/if}
+            <a n:if="$user->getFollowersCount() > 0" href="/friends{$user->getId()}?act=incoming" class="profile_link">{tr("followers", $user->getFollowersCount())}</a>
         </div>
         <div n:if="isset($thisUser) && !$thisUser->prefersNotToSeeRating()" class="profile-hints">
             {var completeness = $user->getProfileCompletenessReport()}
@@ -196,37 +197,17 @@
                         <a href="/friends{$user->getId()}">{_"all_title"}</a>
                     </div>
                 </div>
-                <div class="ovk-avView">
-                    <div class="ovk-avView--el" n:foreach="$user->getFriends(1) as $friend">
-                        <a href="{$friend->getURL()}">
-                            <img class="ava" src="{$friend->getAvatarUrl()}" />
-                        </a>
-                        <br/>
-                        <a href="{$friend->getURL()}">{$friend->getFirstName()}</a>    
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div n:if="$user->getFollowersCount() > 0">
-            {var followersCount = $user->getFollowersCount()}
-            
-            <div class="content_title_expanded" onclick="hidePanel(this, {$followersCount});">
-                {_followers}
-            </div>
-            <div>
-                <div class="content_subtitle">
-                    {tr("followers", $followersCount)}
-                    <div style="float:right;">
-                        <a href="/friends{$user->getId()}?act=incoming">{_"all_title"}</a>
-                    </div>
-                </div>
-                <div class="ovk-avView">
-                    <div class="ovk-avView--el" n:foreach="$user->getFollowers(1) as $follower">
-                        <a href="{$follower->getURL()}">
-                            <img class="ava" src="{$follower->getAvatarUrl()}" />
-                        </a>
-                        <br/>
-                        <a href="{$follower->getURL()}">{$follower->getFirstName()}</a>    
+                <div class="content_list">
+                    <div class="cl_element" n:foreach="$user->getFriends(1) as $friend">
+                        <div class="cl_avatar">
+                            <a href="{$friend->getURL()}">
+                                <img class="ava" src="{$friend->getAvatarUrl()}" />
+                            </a>
+                        </div>
+                        <a href="{$friend->getURL()}" class="cl_name">
+                            <text class="cl_fname">{$friend->getFirstName()}</text>
+                            <text class="cl_lname">{$friend->getLastName()}</text>
+                        </a>    
                     </div>
                 </div>
             </div>
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 93eb67fb..4fdf6f8f 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -307,6 +307,10 @@ a {
     cursor: pointer;
 }
 
+.profile_link_form {
+    margin-bottom: 0;
+}
+
 #profile_links {
     margin: 10px 0;
 }
@@ -683,6 +687,44 @@ span {
     max-height: 63px;
 }
 
+.content_list {
+    display: flex;
+    width: 200px;
+    flex-wrap: wrap;
+}
+
+.content_list.long {
+    width: 397px;
+}
+
+.content_list .cl_element {
+    width: 33%;
+}
+
+.content_list.long .cl_element {
+    width: 16.5%;
+}
+
+.content_list .cl_element .cl_avatar {
+    padding: 7px 7px 0 7px;
+    text-align: center;
+}
+
+.content_list .cl_element .cl_name {
+    padding: 0 3px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.content_list .cl_element .cl_name .cl_lname {
+    font-size: 7pt;
+}
+
+.ava {
+    width: 45px;
+}
+
 table.User {
     vertical-align: text-top;
 }