From bcdf4c652421ed555c7b8acd3feacd15180494de Mon Sep 17 00:00:00 2001
From: Maxim Leshchenko <cnmaks90@gmail.com>
Date: Sat, 6 Nov 2021 16:47:53 +0200
Subject: [PATCH] Redesign of the list of administrators

---
 Web/Presenters/templates/Group/View.xml | 75 ++++++++++++++-----------
 Web/static/css/style.css                | 44 +++++++++++++++
 locales                                 |  2 +-
 3 files changed, 88 insertions(+), 33 deletions(-)

diff --git a/Web/Presenters/templates/Group/View.xml b/Web/Presenters/templates/Group/View.xml
index 098fdec5..af761183 100644
--- a/Web/Presenters/templates/Group/View.xml
+++ b/Web/Presenters/templates/Group/View.xml
@@ -109,45 +109,56 @@
         <div class="content_title_expanded" onclick="hidePanel(this);">
             {_"creator"}
         </div>
-        <div style="padding:4px">
+        <div class="avatar-list-item" style="padding: 8px;">
             {var author = $club->getOwner()}
-            <ul>
-                <li>
-                    <a href="{$author->getURL()}"><b>{$author->getCanonicalName()}</b></a>
-                    {if !empty($club->getOwnerComment())}
-                        <br>
-                        <b>{$club->getOwnerComment()}</b>
-                    {/if}
-                </li>
-            </ul>
+            <div class="avatar">
+                <a href="{$author->getURL()}">
+                    <img class="ava" src="{$author->getAvatarUrl()}" />
+                </a>
+            </div>
+            <div class="info info-without-subtitle-centered" n:if="empty($club->getOwnerComment())">
+                <a href="{$author->getURL()}" class="title">{$author->getCanonicalName()}</a>
+            </div>
+            <div class="info" n:if="!empty($club->getOwnerComment())">
+                <a href="{$author->getURL()}" class="title">{$author->getCanonicalName()}</a>
+                <div class="subtitle">{$club->getOwnerComment()}</div>
+            </div>
         </div>
     </div>
     <div n:if="$club->getAdministratorsListDisplay() == 1">
         <div class="content_title_expanded" onclick="hidePanel(this);">
             {_"administrators"}
         </div>
-        <div style="padding:4px">
-            {var author = $club->getOwner()}
-            <ul>
-                <li>
-                    <a href="{$author->getURL()}"><b>{$author->getCanonicalName()}</b></a>
-                    {if !empty($club->getOwnerComment())}
-                        <br>
-                        <b>{$club->getOwnerComment()}</b>
-                    {/if}
-                </li>
-                <li n:foreach="$club->getManagers(1) as $manager">
-                    <a href="{$manager->getUser()->getURL()}"><b>{$manager->getUser()->getCanonicalName()}</b></a>
-                    {if !empty($manager->getComment())}
-                        <br>
-                        <b>{$manager->getComment()}</b>
-                    {/if}
-                </li>
-                {var managersCount = $club->getManagersCount()}
-                <li n:if="$managersCount > 7">
-                    <b>{tr("and_more", $managersCount - 7)}</b>
-                </li>
-            </ul>
+        <div>
+            <div class="content_subtitle">
+                {tr("administrators", $club->getManagersCount() + 1)}
+            </div>
+            <div class="avatar-list">
+                <div class="avatar-list-item">
+                    {var author = $club->getOwner()}
+                    <div class="avatar">
+                        <a href="{$author->getURL()}">
+                            <img class="ava" src="{$author->getAvatarUrl()}" />
+                        </a>
+                    </div>
+                    <div class="info">
+                        <a href="{$author->getURL()}" class="title">{$author->getCanonicalName()}</a>
+                        <div class="subtitle" n:if="!empty($club->getOwnerComment())">{$club->getOwnerComment()}</div>
+                    </div>
+                </div>
+                <div class="avatar-list-item" n:foreach="$club->getManagers(1) as $manager">
+                    {var user = $manager->getUser()}
+                    <div class="avatar">
+                        <a href="{$user->getURL()}">
+                            <img height="32" class="ava" src="{$user->getAvatarUrl()}" />
+                        </a>
+                    </div>
+                    <div class="info">
+                        <a href="{$user->getURL()}" class="title">{$user->getCanonicalName()}</a>
+                        <div class="subtitle" n:if="!empty($manager->getComment())">{$manager->getComment()}</div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <div n:if="$albumsCount > 0">
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 587078b5..9453e99c 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -1444,3 +1444,47 @@ body.scrolled .toTop:hover {
     background-color: #f3ddbd;
     color: #58462a;
 }
+
+.avatar-list {
+    padding: 4px 8px 4px 8px;
+}
+
+.avatar-list-item {
+    padding: 4px 0 4px 0;
+}
+
+.avatar-list-item::after {
+    content: '.';
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+
+.avatar-list-item .avatar {
+    float: left;
+}
+
+.avatar-list-item .avatar img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+}
+
+.avatar-list-item .info {
+    float: left;
+    padding-left: 8px;
+}
+
+.avatar-list-item .info-without-subtitle-centered {
+    padding-top: 8px;
+}
+
+.avatar-list-item .info .title {
+    font-size: 11px;
+}
+
+.avatar-list-item .info .subtitle {
+    color: rgb(128, 128, 128);
+    font-size: 10px;
+}
diff --git a/locales b/locales
index dc078637..ef1b7ab8 160000
--- a/locales
+++ b/locales
@@ -1 +1 @@
-Subproject commit dc078637401a673476ef294e5fdf020948dcaba8
+Subproject commit ef1b7ab803b56a02df670d91d7c22b3e509e6779