From acb24e38a62f8948aa132b6b102a68113d29c972 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Mon, 21 Nov 2022 10:27:28 +0700
Subject: [PATCH] add tag cloud to video page, short rating

---
 tubearchivist/home/templates/home/video.html | 13 +++++++++++--
 tubearchivist/static/css/style.css           | 12 ++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/tubearchivist/home/templates/home/video.html b/tubearchivist/home/templates/home/video.html
index a5fc0444..e3096fa0 100644
--- a/tubearchivist/home/templates/home/video.html
+++ b/tubearchivist/home/templates/home/video.html
@@ -69,15 +69,24 @@
                     <p class="thumb-icon"><img class="dislike" src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-down">: {{ video.stats.dislike_count|intcomma }}</p>
                 {% endif %}
                 {% if video.stats.average_rating %}
-                    <p class="rating-stars">Rating:
+                    <div class="rating-stars">
                         {% for star in video.stats.average_rating %}
                             <img src="/static/img/icon-star-{{ star }}.svg" alt="{{ star }}">
                         {% endfor %}
-                    </p>
+                    </div>
                 {% endif %}
             </div>
         </div>
     </div>
+    {% if video.tags %}
+        <div class="description-box">
+            <div class="video-tag-box">
+                {% for tag in video.tags %}
+                    <span class="video-tag">{{ tag }}</span>
+                {% endfor %}
+            </div>
+        </div>
+    {% endif %}
     {% if video.description %}
         <div class="description-box">
             <p id="text-expand" class="description-text">
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index bc641b84..7c2c491a 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -783,6 +783,18 @@ video:-webkit-full-screen {
     display: flex;
 }
 
+.video-tag-box {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.video-tag {
+    padding: 5px 10px;
+    margin: 5px;
+    border: 1px solid var(--accent-font-light);
+}
+
 .thumb-icon img,
 .rating-stars img {
     width: 20px;