From f2badcef554734f6a5068d351ecd49a32feba026 Mon Sep 17 00:00:00 2001
From: pluja <github_pluja@r3d.red>
Date: Sat, 10 Oct 2020 18:25:58 +0200
Subject: [PATCH] Improve video item UI and phone usage

---
 app/templates/_video_item.html | 45 +++++++++++++---------------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/app/templates/_video_item.html b/app/templates/_video_item.html
index b5be709..0234aa4 100644
--- a/app/templates/_video_item.html
+++ b/app/templates/_video_item.html
@@ -1,46 +1,35 @@
-<div class="card">
-    <div class="image">
-        {%if config.nginxVideoStream%}
-        <img alt="Thumbnail" src="{{video.videoThumb}}">
-        {%else%}
-        <img alt="Thumbnail" src="/img/{{video.videoThumb.replace('/', '~')}}">
-        {%endif%}
-    </div>
-    <div class="content">
-        {% if video.views == "Livestream" %}
-        <a class="video-title break-word" href="#">{{video.videoTitle}}</a>
-        {% else %}
-        <a class="video-title break-word" href="{{url_for('watch', v=video.id, _method='GET')}}">{{video.videoTitle}}</a>
-        {% endif %}
-        <div class="meta">
-            <a class="break-word" href="{{url_for('channel', id=video.channelId)}}">{{video.channelName}}</a>
-        </div>
-        <div class="description break-word">
-            {{video.description}}
-        </div>
+<div class="ui card">
+  <a class="image" href="{{url_for('watch', v=video.id, _method='GET')}}">
+    <img src="https://yotter.xyz{{video.videoThumb}}">
+  </a>
+  <div class="content">
+    <a class="header" href="{{url_for('watch', v=video.id, _method='GET')}}">{{video.videoTitle}}</a>
+    <div class="meta">
+      <a class="break-word" href="{{url_for('channel', id=video.channelId)}}">{{video.channelName}}</a>
     </div>
+  </div>
     <div class="extra content">
         {% if video.isLive == "Livestream" or video.isLive %}
-            <span class="right floated">
+            <span class="left floated like">
                 <i class="red circle icon"></i>
-                ‎‎{{video.views}}
+                {{video.views}}
             </span>
         {% else %}
-            <span class="right floated">
+            <span class="left floated like">
                 <i class="eye icon"></i>
-                ‎‎{{video.views}}
+                {{video.views}}
             </span>
         {% endif %}
 
         {% if video.timeStamp == "Scheduled" or video.isUpcoming %}
-            <span class="right floated">
+            <span class="right floated star">
                 <i class="blue clock icon"></i>
-                {{video.timeStamp}}‎‎‎‎            ‎‎‎
+                {{video.timeStamp}}
             </span>
         {% else %}
-            <span class="right floated">
+            <span class="right floated star">
                 <i class="clock icon"></i>
-                {{video.timeStamp}}‎‎‎‎            ‎‎‎
+                {{video.timeStamp}}
             </span>
         {% endif %}
         <span>