User: Friends mini-list redesign

Also fixes #180

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;">
+                <div style="padding-left: 5px;" class="content_list long">
-                    <table 
+                    <div class="cl_element" n:foreach="$club->getFollowers(1) as $follower">
-                          n:foreach="$club->getFollowers(1) as $follower"
+                        <div class="cl_avatar">
-                          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" />
+                                <img class="ava" src="{$follower->getAvatarUrl()}" />
                             </a>
-                                </td>
+                        </div>
-                            </tr>
+                        <a href="{$follower->getURL()}" class="cl_name">
-                            <tr>
+                            <text class="cl_fname">{$follower->getFirstName()}</text>
-                                <td>
+                            <text class="cl_lname">{$follower->getLastName()}</text>
-                                    <a href="{$follower->getURL()}">{$follower->getFirstName()}</a>    
+                        </a>    
-                                </td>
+                    </div>
-                            </tr>
-                        </tbody>
-                    </table>
                 </div>
             </div>
         </div>

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="content_list">
-                    <div class="ovk-avView--el" n:foreach="$user->getFriends(1) as $friend">
+                    <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>
-                        <br/>
-                        <a href="{$friend->getURL()}">{$friend->getFirstName()}</a>    
                         </div>
-                </div>
+                        <a href="{$friend->getURL()}" class="cl_name">
-            </div>
+                            <text class="cl_fname">{$friend->getFirstName()}</text>
-        </div>
+                            <text class="cl_lname">{$friend->getLastName()}</text>
-        <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>
                 </div>
             </div>

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;
 }