Videos: Redesign preview and list

Web/Presenters/templates/Videos/List.xml

@@ -33,9 +33,11 @@
 {/block}
 
 {block preview}
+    <div class="video-preview">
         <img src="{$x->getThumbnailURL()}"
             alt="{$x->getName()}"
-         style="max-height: 43pt; max-width: 140px; height: unset; width: unset; border-radius: unset;" />
+            style="max-width: 170px; max-height: 127px; margin: auto;" />
+    </div>
 {/block}
 
 {block name}
@@ -43,7 +45,13 @@
 {/block}
 
 {block description}
-    <span>{$x->getDescription() ?? ""}</span><br/>
+    <p>
+        <span>{$x->getDescription() ?? ""}</span>
+    </p>
     <span style="color: grey;">{_"video_uploaded"} {$x->getPublicationTime()}</span><br/>
     <span style="color: grey;">{_"video_updated"} {$x->getEditTime() ?? $x->getPublicationTime()}</span>
+    <p>
+        <a href="/video{$x->getPrettyId()}">{_view_video}</a>
+        {if $x->getCommentsCount() > 0}| <a href="/video{$x->getPrettyId()}#comments">{_"comments"} ({$x->getCommentsCount()})</a>{/if}
+    </p>
 {/block}

Web/static/css/style.css

@@ -35,6 +35,10 @@ a {
     cursor: pointer;
 }
 
+p {
+    margin: 5px 0;
+}
+
 .layout {
     width: 791px;
     margin: 0 auto;
@@ -1559,13 +1563,14 @@ body.scrolled .toTop:hover {
     padding: 0 6px;
 }
 
-.ovk-video>.preview {
+.ovk-video>.preview, .video-preview {
     width: 170px;
     height: 127px;
-    border: 1px solid #ccc;
     align-content: center;
     display: flex;
-    padding: 1px;
+    padding: 2px;
+    box-shadow: inset 0 0 0px 1px #ccc, inset 0 0 0px 2px #fff;
+    background-color: #000;
 }
 
 #wallAttachmentMenu {

locales/en.strings

@@ -513,6 +513,8 @@
 "videos_one" = "$1 video";
 "videos_other" = "$1 videos";
 
+"view_video" = "View";
+
 /* Notifications */
 
 "feedback" = "Feedback";

locales/ru.strings

@@ -543,6 +543,8 @@
 "videos_many" = "$1 видеозаписей";
 "videos_other" = "$1 видеозаписей";
 
+"view_video" = "Просмотр";
+
 /* Notifications */
 
 "feedback" = "Ответы";