Merge pull request #482 from openvk/similartovk

Layout: Update friends, groups, videos and albums lists. And some style fixes

Web/Presenters/templates/@listView.xml

@@ -1,8 +1,10 @@
 {extends "@layout.xml"}
 
 {block wrap}
-    <div class="page_wrap">
+<div class="wrap2">
-        <div n:ifset="tabs" n:ifcontent class="tabs">
+    <div class="wrap1">
+        <div class="page_wrap padding_top">
+            <div n:ifset="tabs" class="tabs">
                 {include tabs}
             </div>
 
@@ -27,8 +29,8 @@
                                             </a>
                                         </td>
                                         <td valign="top" style="width: 100%">
-                                        {ifset infoTable}
+                                            {ifset infotable}
-                                            {include infoTable, x => $dat}
+                                                {include infotable, x => $dat}
                                             {else}
                                             <a href="{include link, x => $dat}">
                                                 <b>
@@ -67,4 +69,6 @@
                 {include bottom}
             {/ifset}
         </div>
+    </div>
+</div>
 {/block}

Web/Presenters/templates/Photos/AlbumList.xml

@@ -5,12 +5,29 @@
 {block title}{_"albums"} {$owner->getCanonicalName()}{/block}
 
 {block header}
-    <a href="{$owner->getURL()}">{$owner->getCanonicalName()}</a>
+        {if isset($thisUser) && $thisUser->getId() == $owner->getId()}
-    » {_"albums"}
+            {_my_photos}
+        {else}
+            <a href="{$owner->getURL()}">
+            {$owner->getCanonicalName()}</a>
+            »
+            {_albums}
+        {/if}
+{/block}
 
-    <div n:if="$canEdit" style="float: right;">
+{block size}
-        {var isClub = ($owner instanceof openvk\Web\Models\Entities\Club)}
+    <div style="padding-bottom: 0px; padding-top: 0;" class="summaryBar">
-        <a href="/albums/create{$isClub ? '?gpid=' . $owner->getId() : ''}">{_"create_album"}</a>
+        <div class="summary">
+                {if !is_null($thisUser) && $owner->getId() === $thisUser->getId()}
+                    {tr("albums_list", $count)}
+                {else}
+                    {tr("albums", $count)}
+                {/if}
+                <span n:if="isset($thisUser) && $thisUser->getId() == $owner->getId()">
+                    &nbsp;|&nbsp;
+                    <a href="/albums/create">{_create_album}</a>
+                </span>
+        </div>
     </div>
 {/block}
 

Web/Presenters/templates/User/Friends.xml

@@ -25,6 +25,9 @@
 {/block} 
 
 {block header}
+    {if isset($thisUser) && $thisUser->getId() == $user->getId()}
+        {_my_friends}
+    {else}
         <a href="{$user->getURL()}">{$user->getCanonicalName()}</a> »
         {if $act == "incoming"}
             {_"incoming_req"}
@@ -33,17 +36,45 @@
         {else}
             {_"friends"}
         {/if}
+    {/if}
 {/block}
 
 {block tabs}
     <div n:attr="id => ($act === 'friends' ? 'activetabs' : 'ki')" class="tab">
         <a n:attr="id => ($act === 'friends' ? 'act_tab_a' : 'ki')" href="?">{_friends}</a>
     </div>
-    <div n:attr="id => ($act === 'incoming' ? 'activetabs' : 'ki')" class="tab">
+    <div n:attr="id => ($act === 'incoming' || $act === 'outcoming' ? 'activetabs' : 'ki')" class="tab">
-        <a n:attr="id => ($act === 'incoming' ? 'act_tab_a' : 'ki')" href="?act=incoming">{_incoming_req}</a>
+        <a n:attr="id => ($act === 'incoming' || $act === 'outcoming' ? 'act_tab_a' : 'ki')" href="?act=incoming">{_req}</a>
+    </div>
+{/block}
+
+{block size}
+    <div n:if="$act === 'incoming' || $act === 'outcoming'" class="mb_tabs">
+        <div n:attr="id => ($act === 'incoming' ? 'active' : 'ki')" class="mb_tab">
+            <div>
+                <a href="?act=incoming">Входящие</a>
+            </div>
+        </div>
+        <div n:attr="id => ($act === 'outcoming' ? 'active' : 'ki')" class="mb_tab">
+            <div>
+                <a href="?act=outcoming">Исходящие</a>
+            </div>
+        </div>
+    </div>
+    <div style="padding-bottom: 0px;" class="summaryBar">
+        <div class="summary">
+            {if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
+                {if $act == "incoming"}
+                    {tr("req", $count)}
+                {elseif $act == "outcoming"}
+                    {tr("req", $count)}
+                {else}
+                    {tr("friends_list", $count)}
+                {/if}
+            {else}
+                {tr("friends", $count)}
+            {/if}
         </div>
-    <div n:attr="id => ($act === 'outcoming' ? 'activetabs' : 'ki')" class="tab">
-        <a n:attr="id => ($act === 'outcoming' ? 'act_tab_a' : 'ki')" href="?act=outcoming">{_outcoming_req}</a>
     </div>
 {/block}
 

Web/Presenters/templates/User/Groups.xml

@@ -32,7 +32,7 @@
 {/block}
 
 {block size}
-    <div n:if="!is_null($thisUser) && $user->getId() === $thisUser->getId()" style="padding-bottom: 0px; border-bottom: 0;" class="summaryBar">
+    <div style="padding-bottom: 0px;" class="summaryBar">
         <div class="summary">
             {if !is_null($thisUser) && $user->getId() === $thisUser->getId()}
                 {tr("groups_list", $thisUser->getClubCount())}
@@ -75,11 +75,12 @@
 {block actions}
     {var clubPinned = $thisUser->isClubPinned($x)}
     {if $x->canBeModifiedBy($thisUser ?? NULL)}
-        <a style="width: 140px;" class="profile_link" href="{$x->getURL()}">
+        <div class="navigation" style="width: 140px;">
+            <a class="link" href="{$x->getURL()}">
                 {_check_community}
             </a>
             {if ($clubPinned || $thisUser->getPinnedClubCount() <= 10)}
-            <a style="width: 140px;" 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 class="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}
@@ -91,8 +92,9 @@
                 <input type="hidden" name="act" value="rem" />
                 <input type="hidden" name="id"  value="{$x->getId()}" />
                 <input type="hidden" name="hash" value="{$csrfToken}" />
-            <input style="width: 140px; text-transform: lowercase;" type="submit" id="profile_link" value="{_leave_community}" />
+                <input style="text-transform: lowercase; width: 100%;" class="link" type="submit" value="{_"leave_community"}" />
             </form>
+        </div>
     {/if}
 {/block}
 

Web/Presenters/templates/Videos/List.xml

@@ -11,7 +11,7 @@
 {/block}
 
 {block size}
-    <div style="padding-bottom: 0px;border-bottom: 0; padding-top: 0;" class="summaryBar">
+    <div style="padding-bottom: 0px; padding-top: 0;" class="summaryBar">
         <div class="summary">
                 {tr("videos", $count)}
                 <span n:if="isset($thisUser) && $thisUser->getId() == $user->getId()">

Web/Presenters/templates/components/error.xml

@@ -1,6 +1,6 @@
 <center style="background: white;border: #DEDEDE solid 1px;">
     <span style="color: #707070;margin: 60px 0;display: block;">
-        <b>{$title}</b><br><br>
+        <b n:if="!empty($title)">{$title}<br><br></b>
         {$description}
     </span>
 </center>

Web/Presenters/templates/components/nothing.xml

@@ -1 +1 @@
-{include "error.xml", title => tr("no_data"), description => tr("no_data_description")}
+{include "error.xml", description => tr("no_data_description")}

Web/static/css/style.css

@@ -226,9 +226,10 @@ a {
     border-bottom: solid 1px #c3cad2;
     border-left: solid 1px #d5dde6;
     border-right: solid 1px #d5dde6;
-    padding: 12px;
+  }
-    width: 604px;
+  
-    margin-left: 1px;
+  .page_wrap.padding_top {
+    padding-top: 12px;
   }
   
   .content-main-tile {
@@ -768,12 +769,8 @@ table.User {
   }
   
   .container_gray {
-    background: #F7F7F7;
+    background: #F6F6F6;
-    width: 604px;
     padding: 12px;
-    border-top: #EBEBEB solid 1px;
-    margin-left: -12px;
-    margin-bottom: -12px;
   }
   
   .container_gray.bottom {
@@ -795,13 +792,11 @@ table.User {
   
   .tabs {
     border-bottom: 1px solid #707070;
-    margin-right: -12px;
+    padding: 0 10px;
-    margin-left: -12px;
   }
   
   #activetabs {
       background: #707070;
-    border-radius: 3px 3px 0px 0px;
   }
   
   
@@ -811,8 +806,13 @@ table.User {
   
   .tab {
     display: inline-block;
-    padding: 4px 6px;
+    padding: 5px 10px;
-    margin-left: 15px;
+    margin-right: 3px;
+    border-radius: 3px 3px 0px 0px;
+  }
+  
+  .tab:hover {
+    background: #E4E4E4;
   }
   
   #act_tab_a {
@@ -1787,14 +1787,11 @@ body.scrolled .toTop:hover {
   }
   
   .summaryBar {
-    border-bottom: 1px solid #DAE2E8;
+    border-bottom: #DEDEDE solid 1px;
     clear: both;
     padding: 11px 10px;
-    color: black;
+      padding-bottom: 11px;
-    font-weight: normal;
     line-height: normal;
-    margin-left: -12px;
-    margin-right: -12px;
   }
   
   .summaryBar .summary {
@@ -1835,9 +1832,6 @@ body.scrolled .toTop:hover {
   .groups_options {
     padding: 10px 20px 20px;
     border-top: #DEDEDE solid 1px;
-    margin-top: 12px;
-    margin-left: -12px;
-    margin-right: -12px;
   }
   
   #gp_container {
@@ -1877,6 +1871,58 @@ table td[width="120"] {
       vertical-align: top;
   }
  
+  .mb_tabs {
+    background-color: #F6F6F6;
+    border-bottom: #DEDEDE solid 1px;
+    padding: 10px;
+  }
+
+  .mb_tab {
+    cursor: pointer;
+    font-weight: bold;
+    margin-right: 10px;
+    display: inline-block;
+  }
+
+  .mb_tab div {
+    padding: 5px 7px;
+}
+
+#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;
+}
+
+  .mb_tab#active {
+    background-color: #898989;
+  }
+
+  .mb_tab#active div {
+    border: 2px solid #5f5f5f;
+  }
+
+  .mb_tab#active a {
+    color: white;
+  }
+.profile_thumb {
+    padding: 0px 10px 0px 0px;
+    width: 50px;
+    display: inline-block;
+    vertical-align: top;
+}
+
 .border-block {
     box-shadow: inset 0px 0 0px 1px #b6bfca, inset 0px 0 0px 10px #d8dfe7;
     width: 300px;

locales/ru.strings

@@ -202,16 +202,28 @@
 "friends_reject" = "Отменить заявку";
 "friends_accept" = "Принять заявку";
 "send_message" = "Отправить сообщение";
-"incoming_req" = "Подписчики";
+"incoming_req" = "Входящие";
-"outcoming_req" = "Заявки";
+"outcoming_req" = "Исходящие";
 "req" = "Заявки";
 
-"firends_zero" = "Ни одного друга";
+"req_zero" = "Не найдено ни одной заявки...";
+"req_one" = "Найдена $1 заявка";
+"req_few" = "Найлено $1 заявки";
+"req_many" = "Найдено $1 заявки";
+"req_other" = "Найдено $1 заявок";
+
+"friends_zero" = "Ни одного друга";
 "friends_one" = "$1 друг";
 "friends_few" = "$1 друга";
 "friends_many" = "$1 друзей";
 "friends_other" = "$1 друзей";
 
+"friends_list_zero" = "У Вас пока нет друзей";
+"friends_list_one" = "У Вас $1 друг";
+"friends_list_few" = "У Вас $1 друга";
+"friends_list_many" = "У Вас $1 друзей";
+"friends_list_other" = "У Вас $1 друзей";
+
 "followers_zero" = "Ни одного подписчика";
 "followers_one" = "$1 подписчик";
 "followers_few" = "$1 подписчика";
@@ -326,6 +338,12 @@
 "albums_many" = "$1 альбомов";
 "albums_other" = "$1 альбомов";
 
+"albums_list_zero" = "У Вас нет ни одного альбома";
+"albums_list_one" = "У Вас один альбом";
+"albums_list_few" = "У Вас $1 альбома";
+"albums_list_many" = "У Вас $1 альбомов";
+"albums_list_other" = "У Вас $1 альбомов";
+
 /* Notes */
 
 "notes" = "Заметки";
@@ -784,7 +802,7 @@
 "information_-2" = "Вход выполнен успешно";
 
 "no_data" = "Нет данных";
-"no_data_description" = "В этом представлении отсутствуют данные.";
+"no_data_description" = "Тут ничего нет... Пока...";
 
 "error" = "Ошибка";
 "error_shorturl" = "Данный короткий адрес уже занят.";