Groups: Update groups layout (#444)

* Groups: Update groups layot

* We don't use crowdin anymore, why it's still there?

* Locales: Delete unnecessary LICENSE

We already have COPYING in the root directory :/

* Locales: Localize strings for updated group layout

Localized strings: open_new_group, open_group_desc, search_group, search_by_groups, search_group_desc
(we already have search_for_groups but idk, I'll leave it for now)

* Global: Fix tabs

* Groups: Fix tabs and div block

I have SO many questions...

* Groups: Update layot

New counter, info and actions blocks and some stye fixes

* Global: Fix tabs

* Locales: Localize strings for updated group layout

Localized strings: check_community, groups_list

* Update Groups.xml

* Update Groups.xml

Co-authored-by: veselcraft <veselcraft@icloud.com>
Co-authored-by: Ilya Prokopenko <dsrev@protonmail.com>
Co-authored-by: celestora <kitsuruko@gmail.com>

Web/Presenters/templates/@listView.xml

@@ -6,6 +6,10 @@
             {include tabs}
         </div>
 
+        {ifset size}
+            {include size, x => $dat}
+        {/ifset}
+
         <div class="container_gray">
             {var data = is_array($iterator) ? $iterator : iterator_to_array($iterator)}
 
@@ -20,32 +24,32 @@
                                     </a>
                                 </td>
                                 <td valign="top" style="width: 100%">
-                                    <a href="{include link, x => $dat}">
-                                        <b>
-                                            {include name, x => $dat}
-                                        </b>
-                                    </a>
-                                    <br/>
-                                    
-                                    {include description, x => $dat}
+                                    {ifset infotable}
+                                        {include infotable, x => $dat}
+                                    {else}
+                                        <a href="{include link, x => $dat}">
+                                            <b>
+                                                {include name, x => $dat}
+                                            </b>
+                                        </a>
+                                        <br/>
+                                        {include description, x => $dat}
+                                    {/ifset}
                                 </td>
-                                <td n:ifset="actions" valign="top" class="action_links" style="width: 150px">
+                                <td n:ifset="actions" valign="top" class="action_links" style="width: 150px; text-transform: lowercase;">
                                     {include actions, x => $dat}
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
-                
-                <div style="padding: 8px;">
-                    {include "components/paginator.xml", conf => (object) [
-                        "page"     => $page,
-                        "count"    => $count,
-                        "amount"   => sizeof($data),
-                        "perPage"  => $perPage ?? OPENVK_DEFAULT_PER_PAGE,
-                        "atBottom" => true,
-                    ]}
-                </div>
+                {include "components/paginator.xml", conf => (object) [
+                    "page"     => $page,
+                    "count"    => $count,
+                    "amount"   => sizeof($data),
+                    "perPage"  => $perPage ?? OPENVK_DEFAULT_PER_PAGE,
+                    "atBottom" => true,
+                ]}
             {else}
                 {ifset customErrorMessage}
                     {include customErrorMessage}
@@ -54,5 +58,9 @@
                 {/ifset}
             {/if}
         </div>
+
+        {ifset bottom}
+            {include bottom}
+        {/ifset}
     </div>
 {/block}

Web/Presenters/templates/User/Groups.xml

@@ -2,37 +2,45 @@
 {var iterator = $user->getClubs($page, $admin)}
 {var count    = $user->getClubCount($admin)}
 
-{block title}{_"groups"}{/block} 
+{block title}
+    {_groups}
+{/block} 
 
 {block header}
-    <a href="{$user->getURL()}">{$user->getCanonicalName()}</a> » {_"groups"}
-    
-    <div n:if="!is_null($thisUser) && $user->getId() === $thisUser->getId()" style="float:right;">
-        <span>
-            <b>
-                <a href="/groups_create">
-                    {_"create_group"}
-                </a>
-            </b>
-        </span>
-    </div>
+    {if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
+        {_my_groups}
+    {else}
+        <a href="{$user->getURL()}">{$user->getCanonicalName()}</a> » {_groups}
+    {/if}
 {/block}
 
 {* BEGIN ELEMENTS DESCRIPTION *}
 
 {block tabs}
-	{if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
-		<div {if !$admin}id="activetabs"{/if} class="tab">
-			<a {if !$admin}id="act_tab_a"{/if} href="/groups{$user->getId()}">
-				{_groups}
-			</a>
-		</div>
-		<div {if $admin}id="activetabs"{/if} class="tab">
-			<a {if $admin}id="act_tab_a"{/if} href="/groups{$user->getId()}?act=managed">
-				{_managed}
-			</a>
-		</div>
-	{/if}
+    {if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
+        <div n:attr='id: ($admin ? false : "activetabs")' class="tab">
+            <a n:attr='id: ($admin ? false : "act_tab_a")' href="/groups{$user->getId()}">
+                {_groups}
+            </a>
+        </div>
+        <div {if $admin}id="activetabs"{/if} class="tab">
+            <a {if $admin}id="act_tab_a"{/if} href="/groups{$user->getId()}?act=managed">
+                {_managed}
+            </a>
+        </div>
+    {/if}
+{/block}
+
+{block size}
+    <div style="padding-bottom: 0px;border-bottom: 0;" class="summaryBar">
+        <div class="summary">
+            {if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
+                {tr("groups_list", $thisUser->getClubCount())}
+            {else}
+                {tr("groups", $user->getClubCount())}
+            {/if}
+        </div>
+    </div>
 {/block}
 
 {block link|strip|stripHtml}
@@ -43,8 +51,19 @@
     <img src="{$x->getAvatarUrl()}" width="75" alt="Фотография группы" />
 {/block}
 
-{block name}
-    {$x->getName()}
+{block infotable}
+    <table id="basicInfo" class="ugc-table group_info" cellspacing="0" cellpadding="0" border="0">
+        <tbody>
+            <tr>
+                <td class="label"><span class="nobold">Название: </span></td>
+                <td class="data"><a href="{$x->getURL()}">{$x->getName()}</a></td>
+            </tr>
+            <tr>
+                <td class="label"><span class="nobold">Размер:</span></td>
+                <td class="data"><a href="/club{$x->getId()}/followers">{tr("participants", $x->getFollowersCount())}</a></td>
+            </tr>
+        </tbody>
+    </table>
 {/block}
 
 {block description}
@@ -54,12 +73,47 @@
 {block actions}
     {var clubPinned = $thisUser->isClubPinned($x)}
     {if $x->canBeModifiedBy($thisUser ?? NULL) && ($clubPinned || $thisUser->getPinnedClubCount() <= 10)}
-        <a class="profile_link" href="/groups_pin?club={$x->getId()}&hash={rawurlencode($csrfToken)}" id="_pinGroup" data-group-name="{$x->getName()}" data-group-url="{$x->getUrl()}">
+        <a style="border-bottom: none; width: 140px;" class="profile_link" href="{$x->getURL()}">
+            {_check_community}
+        </a>
+        
+        <a style="border-bottom: none; width: 140px;" class="profile_link" href="/groups_pin?club={$x->getId()}&hash={rawurlencode($csrfToken)}" data-group-name="{$x->getName()}" data-group-url="{$x->getUrl()}">
             {if $clubPinned}
                 {_remove_from_left_menu}
             {else}
                 {_add_to_left_menu}
             {/if}
         </a>
+
+        <form action="/setSub/club" method="post">
+            <input type="hidden" name="act" value="rem" />
+            <input type="hidden" name="id"  value="{$x->getId()}" />
+            <input type="hidden" name="hash" value="{$csrfToken}" />
+            <input style="text-transform: lowercase; border-bottom: none; width: 140px;" type="submit" id="profile_link" value="{_leave_community}" />
+        </form>
+
+    {/if}
+{/block}
+
+{block bottom}
+    {if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
+        <div class="groups_options">
+            <div id="gp_container" style="width: 200px;margin-right: 40px;">
+                <h4>{_open_new_group}</h4>
+                <span>{_open_group_desc}</span>
+                <form action="/groups_create">
+                    <button class="button">{_create_group}</button>
+                </form>
+            </div>
+            <div id="gp_container" style="width: 344px;">
+                <h4>{_search_group}</h4>
+                <span>{_search_group_desc}</span>
+                <form action="/search">
+                    <input name="type" type="hidden" value="groups">
+                    <input name="query" class="header_search_input" value="" style="background: none;width: 155px;padding-left: 3px;">
+                    <button class="button">{_search_by_groups}</button>
+                </form>
+            </div>
+        </div>
     {/if}
 {/block}

Web/Presenters/templates/components/error.xml

@@ -1,7 +1,6 @@
-<center>
-    <img src="/assets/packages/static/openvk/img/error.png" alt="Ошибка" />
-    <h1>{$title}</h1>
-    <p>
+<center style="background: white;border: #DEDEDE solid 1px;">
+    <span style="color: #707070;margin: 60px 0;display: block;">
+        <b>{$title}</b><br><br>
         {$description}
-    </p>
+    </span>
 </center>

Web/Presenters/templates/components/paginator.xml

@@ -1,16 +1,18 @@
 {var $space = 2}
 {var $pageCount = ceil($conf->count / $conf->perPage)}
 
-<div n:if="!($conf->page === 1 && $conf->count <= $conf->perPage)" n:class="paginator, ($conf->atBottom ?? false) ? paginator-at-bottom">
-    {if $conf->page > $space}
-        <a n:attr="class => ($conf->page === 1 ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => 1]), 'k', '&', PHP_QUERY_RFC3986)}">«</a>
-    {/if}
-    {for $j = $conf->page - ($space-1); $j <= $conf->page + ($space-1); $j++}
-        {if $j > 0 && $j <= $pageCount}
-            <a n:attr="class => ($conf->page === $j ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => $j]), 'k', '&', PHP_QUERY_RFC3986)}">{$j}</a>
+<div n:if="!($conf->page === 1 && $conf->count <= $conf->perPage)" style="padding: 8px;">
+    <div n:class="paginator, ($conf->atBottom ?? false) ? paginator-at-bottom">
+        {if $conf->page > $space}
+            <a n:attr="class => ($conf->page === 1 ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => 1]), 'k', '&', PHP_QUERY_RFC3986)}">«</a>
         {/if}
-    {/for}
-    {if $conf->page <= $pageCount-$space}
-        <a n:attr="class => ($conf->page === $pageCount ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => $pageCount]), 'k', '&', PHP_QUERY_RFC3986)}">»</a>
-    {/if}
+        {for $j = $conf->page - ($space-1); $j <= $conf->page + ($space-1); $j++}
+            {if $j > 0 && $j <= $pageCount}
+                <a n:attr="class => ($conf->page === $j ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => $j]), 'k', '&', PHP_QUERY_RFC3986)}">{$j}</a>
+            {/if}
+        {/for}
+        {if $conf->page <= $pageCount-$space}
+            <a n:attr="class => ($conf->page === $pageCount ? 'active')" href="?{http_build_query(array_merge($_GET, ['p' => $pageCount]), 'k', '&', PHP_QUERY_RFC3986)}">»</a>
+        {/if}
+    </div>
 </div>

Web/static/css/style.css

@@ -1832,6 +1832,40 @@ body.scrolled .toTop:hover {
     padding: 5px 0px 0px 0px;
 }
 
+.groups_options {
+    padding: 10px 20px 20px;
+    border-top: #DEDEDE solid 1px;
+    margin-top: 12px;
+    margin-left: -12px;
+    margin-right: -12px;
+}
+
+#gp_container {
+    display: inline-block;
+}
+
+#gp_container span {
+    display: block;
+    margin: 10px 0 15px;
+}
+
+#gp_container h4 {
+    font-size: 11px;
+}
+
+.container_gray .content:last-child {
+    margin-bottom: 0;
+}
+
+.group_info {
+    padding: 0 0 0 5px !important;
+}
+
+.group_info .label {
+    width: auto !important;
+    padding-right: 5px;
+}
+
 .border-block {
     box-shadow: inset 0px 0 0px 1px #b6bfca, inset 0px 0 0px 10px #d8dfe7;
     width: 300px;

locales/en.strings

@@ -223,6 +223,7 @@
 "subscriptions" = "Subscriptions";
 "join_community" = "Join community";
 "leave_community" = "Leave community";
+"check_community" = "View community";
 "min_6_community" = "Name of the group must have more that 6 characters";
 "participants" = "Participants";
 "groups" = "Groups";
@@ -272,10 +273,20 @@
 "groups_one" = "$1 group";
 "groups_other" = "$1 groups";
 
+"groups_list_zero" = "You are not a participant in any group";
+"groups_list_one" = "You are participating in one group";
+"groups_list_other" = "You are a participant of $1 groups";
+
 "meetings_zero" = "No meetings";
 "meetings_one" = "$1 meeting";
 "meetings_other" = "$1 meetings";
 
+"open_new_group" = "Open a new group";
+"open_group_desc" = "Can't find the right group? Open your own...";
+"search_group" = "Search group";
+"search_by_groups" = "Search by groups";
+"search_group_desc" = "Here you can browse through the existing groups and choose a group to suit your needs...";
+
 /* Albums */
 
 "create" = "Create";

locales/ru.strings

@@ -232,6 +232,7 @@
 "subscriptions" = "Подписки";
 "join_community" = "Вступить в группу";
 "leave_community" = "Выйти из группы";
+"check_community" = "Просмотр группы";
 "min_6_community" = "Название должно быть не менее 6 символов";
 "participants" = "Участники";
 "groups" = "Группы";
@@ -286,12 +287,22 @@
 "groups_many" = "$1 групп";
 "groups_other" = "$1 групп";
 
+"groups_list_zero" = "Вы не состоите ни в одной группе";
+"groups_list_one" = "Вы состоите в одной группе";
+"groups_list_other" = "Вы состоите в $1 группах";
+
 "meetings_zero" = "Ни одной встречи";
 "meetings_one" = "Одна встреча";
 "meetings_few" = "$1 встречи";
 "meetings_many" = "$1 встреч";
 "meetings_other" = "$1 встреч";
 
+"open_new_group" = "Открыть новую группу";
+"open_group_desc" = "Не можете найти нужную группу? Откройте свою...";
+"search_group" = "Поиск группы";
+"search_by_groups" = "Поиск по группам";
+"search_group_desc" = "Здесь Вы можете просмотреть существующие группы и выбрать группу себе по вкусу...";
+
 /* Albums */
 
 "create" = "Создать";