Feed: Redesign news a little bit

The global news switch is now more prominent, as it has become a tab. Also, the switch for number of posts per page now looks nicer.

Web/Presenters/templates/Wall/Feed.xml

@@ -3,53 +3,54 @@
 
 {block header}
     {_"feed"}
-    
-    <div style="float: right;">
-        <span>
-            <b>
-                {if !isset($globalFeed)}
-                    <a href="/feed/all">{_"all_news"}</a>
-                {else}
-                    <a href="/feed">{_"my_feed"}</a>
-                {/if}
-            </b>
-        </span>
-    </div>
 {/block}
 
 {block content}
-    <div class="postFeedWrapper">
+    <div class="tabs">
+        <div n:attr="id => (isset($globalFeed) ? 'ki' : 'activetabs')" class="tab">
+            <a n:attr="id => (isset($globalFeed) ? 'ki' : 'act_tab_a')" href="/feed">{_my_news}</a>
+        </div>
+        <div n:attr="id => (isset($globalFeed) ? 'activetabs' : 'ki')" class="tab">
+            <a n:attr="id => (isset($globalFeed) ? 'act_tab_a' : 'ki')" href="/feed/all">{_all_news}</a>
+        </div>
+    </div>
+
+    <div n:class="postFeedWrapper, $thisUser->hasMicroblogEnabled() ? postFeedWrapperMicroblog">
         {include "../components/textArea.xml", route => "/wall" . $thisUser->getId() . "/makePost"}
     </div>
-    <br/>
     
-    <center>
+    {foreach $posts as $post}
-        {foreach $posts as $post}
+        <a name="postGarter={$post->getId()}"></a>
-            <a name="postGarter={$post->getId()}"></a>
+        {include "../components/post.xml", post => $post, onWallOf => true, commentSection => true}
-            
+    {/foreach}
-            {include "../components/post.xml", post => $post, onWallOf => true, commentSection => true}
+
-        {/foreach}
+    <div class="postFeedBottom">
-        {include "../components/paginator.xml", conf => $paginatorConf}
+        <div class="postFeedPaginator">
-        <br/>
+            {include "../components/paginator.xml", conf => $paginatorConf}
-        {_"posts_per_page"}:
+        </div>
-        <select id="pageSelect">
+        <div class="postFeedPageSelect">
-            <option value="1">1</option>
+            {_"posts_per_page"}:
-            <option value="5">5</option>
+            <br />
-            <option value="10">10</option>
+            <select id="pageSelect">
-            <option value="20">20</option>
+                <option value="1">1</option>
-            <option value="30">30</option>
+                <option value="5">5</option>
-            <option value="40">40</option>
+                <option value="10">10</option>
-            <option value="50">50</option>
+                <option value="20">20</option>
-        </select>
+                <option value="30">30</option>
-        <script>
+                <option value="40">40</option>
-            u("#pageSelect").nodes[0].value = {$paginatorConf->perPage};
+                <option value="50">50</option>
-            
+            </select>
-            u("#pageSelect").on("change", function(e) {
+        </div>
-                let url = "?" + {http_build_query(array_merge($_GET, ['posts' => '__padding']))};
+    </div>
-                window.location.assign(url.replace("__padding", e.target.value));
+
-            });
+    <script>
-        </script>
+        u("#pageSelect").nodes[0].value = {$paginatorConf->perPage};
-    </center>
+        
+        u("#pageSelect").on("change", function(e) {
+            let url = "?" + {http_build_query(array_merge($_GET, ['posts' => '__padding']))};
+            window.location.assign(url.replace("__padding", e.target.value));
+        });
+    </script>
 
     {if isset($thisUser) && $thisUser->hasMicroblogEnabled()}
         {script "js/al_comments.js"}

Web/static/css/style.css

@@ -1611,6 +1611,26 @@ body.scrolled .toTop:hover {
     background-color: rgb(240, 240, 240);
     border-bottom: 1px solid #ccc;
     border-top: 1px solid #ccc;
+    margin-left: -10px;
+    margin-bottom: 10px;
+    width: 611px;
+}
+
+.postFeedWrapperMicroblog {
+    margin-bottom: 5px;
+}
+
+.postFeedBottom .postFeedPaginator {
+    float: right;
+}
+
+.postFeedBottom .postFeedPageSelect {
+    float: left;
+    padding-top: 8px;
+}
+
+#pageSelect {
+    width: 200px;
 }
 
 .user-alert {

locales/en.strings

@@ -168,6 +168,7 @@
 
 "no_comments" = "No comments";
 
+"my_news" = "My news";
 "all_news" = "All news";
 "posts_per_page" = "Number of posts per page";
 

locales/ru.strings

@@ -176,6 +176,7 @@
 
 "no_comments" = "Комментарии отсутствуют";
 
+"my_news" = "Мои новости";
 "all_news" = "Все новости";
 "posts_per_page" = "Количество записей на странице";