Визуально упрощаем сайдбар

Сейчас он акцентирует аватары юзеров и даёт кучу слабо нужной инфы.
А нужно делать акцент на топиках.

assets/css/layout.css

@@ -208,3 +208,50 @@ details.details_shim_closed > summary,
 details.details_shim_open   > summary {display: block;}
 details.details_shim_closed > summary:before {display: inline-block; content: "\25b6"; padding: 0 0.1em; margin-right: 0.4em; font-size: 0.9em;}
 details.details_shim_open > summary:before {display: inline-block; content: "\25bc"; padding: 0; margin-right: 0.35em;}
+.hidden {
+    display: none;
+}
+.ls-block--primary {
+    border: none;
+}
+.ls-block .ls-tab-list {
+    border-bottom: none;
+}
+.ls-tab.active {
+    -moz-box-shadow:    inset 0 0 4px #0c3151;
+    -webkit-box-shadow: inset 0 0 4px #0c3151;
+    box-shadow:         inset 0 0 4px #0c3151;
+}
+.ls-activity-block-recent-info {
+    width: 5em;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+/**
+ * Делаем кнопку комментов чуть больше, чтобы легче её нажимать
+ */
+.ls-activity-block-recent-info .ls-activity-block-recent-comments {
+    padding: 5px;
+}
+.shortinfo {
+    width: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+.ls-item-group .ls-item {
+    border-bottom: 0;
+    padding-bottom: 7px;
+    padding-top: 7px;
+}
+.ls-block--activity-recent .ls-tab-pane .ls-item-body {
+    width: 100%;
+    display: flex;
+}
+.ls-tab-pane .ls-item-description {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+.ls-block--activity-recent .ls-block-header {
+    display: none;
+}

components/activity/blocks/block.activity-recent.tpl

@@ -20,7 +20,7 @@
     tabs     = [
         'classes' => 'js-tabs-block js-activity-block-recent-tabs',
         'tabs' => [
-            [ 'text' => {lang 'activity.block_recent.topics'},   'url' => "{router page='ajax'}stream/topic", 'list' => $content ],
-            [ 'text' => {lang 'activity.block_recent.comments'}, 'url' => "{router page='ajax'}stream/comment" ]
+            [ 'text' => 'Новые топики',   'url' => "{router page='ajax'}stream/topic", 'list' => $content ],
+            [ 'text' => 'Свежие комментарии', 'url' => "{router page='ajax'}stream/comment" ]
         ]
     ]}

components/activity/blocks/recent-comment.tpl

@@ -1,26 +1,29 @@
 {component_define_params params=[ 'user', 'topic', 'date', 'commentN' ]}
 
 {capture 'item_content'}
-    <a href="{$user->getUserWebPath()}" class="ls-activity-block-recent-user">{$user->getDisplayName()}</a> &rarr;
-    <a href="{$topic->getUrl()}#comment{$commentN}">{$topic->getTitle()|escape}</a>
+    <time class="hidden" datetime="{date_format date=$date format='c'}" class="ls-activity-block-recent-time">
+        {date_format date=$date hours_back="12" minutes_back="60" now="60" day="day H:i" format="j.m.Y"}
+    </time>
 
-    <p class="ls-activity-block-recent-info">
-        <time datetime="{date_format date=$date format='c'}" class="ls-activity-block-recent-time">
-            {date_format date=$date hours_back="12" minutes_back="60" now="60" day="day H:i" format="j F Y"}
-        </time>
+    <div class="shortinfo">
+        <a href="{$user->getUserWebPath()}" class="ls-activity-block-recent-user">{$user->getDisplayName()}</a>
+        комментирует
+        <br>
+        <a href="{$topic->getUrl()}#comment{$commentN}">{$topic->getTitle()|escape}</a>
+    </div>
 
+    <div class="ls-activity-block-recent-info">
         <a href="{$topic->getUrl()}#comments" class="ls-activity-block-recent-comments">
             {component 'icon' icon='comments'}
-            {lang 'comments.comments_declension' count=$topic->getCountComment() plural=true}
+            {$topic->getCountComment()}
+            <span class="sr-only">
+                {lang 'comments.comments_short' count=$topic->getCountComment() plural=true}
+            </span>
         </a>
-    </p>
+    </div>
 {/capture}
 
 {component 'item'
     element = 'li'
-    mods = 'image-rounded'
     desc = $smarty.capture.item_content
-    image=[
-        'path' => $user->getProfileAvatarPath(48),
-        'url' => $user->getUserWebPath()
-    ]}
+}

components/activity/blocks/recent-topic.tpl

@@ -0,0 +1,28 @@
+{component_define_params params=[ 'user', 'topic', 'date', 'commentN' ]}
+
+{capture 'item_content'}
+    <time class="hidden" datetime="{date_format date=$date format='c'}" class="ls-activity-block-recent-time">
+        {date_format date=$date hours_back="12" minutes_back="60" now="60" day="day H:i" format="j.m.Y"}
+    </time>
+
+    <div class="shortinfo">
+        <a href="{$user->getUserWebPath()}" class="ls-activity-block-recent-user">{$user->getDisplayName()}</a>
+        <br>
+        <a href="{$topic->getUrl()}#comment{$commentN}">{$topic->getTitle()|escape}</a>
+    </div>
+
+    <div class="ls-activity-block-recent-info">
+        <a href="{$topic->getUrl()}#comments" class="ls-activity-block-recent-comments">
+            {component 'icon' icon='comments'}
+            {$topic->getCountComment()}
+            <span class="sr-only">
+                {lang 'comments.comments_short' count=$topic->getCountComment() plural=true}
+            </span>
+        </a>
+    </div>
+{/capture}
+
+{component 'item'
+    element = 'li'
+    desc = $smarty.capture.item_content
+}

components/activity/blocks/recent-topics.tpl

@@ -0,0 +1,19 @@
+{**
+ * Последняя активность
+ * Последние топики
+ *}
+
+{component_define_params params=[ 'topics' ]}
+
+{capture 'items'}
+    {foreach $topics as $topic}
+        {component 'activity' template='blocks/recent-topic'
+            user     = $topic->getUser()
+            topic    = $topic
+            date     = $topic->getDatePublish()}
+    {foreachelse}
+        {component 'blankslate' text={lang 'common.empty'} mods='no-background'}
+    {/foreach}
+{/capture}
+
+{component 'item' template='group' items=$smarty.capture.items}