Improved video list UI.

app/YtManagerApp/static/YtManagerApp/css/style.css

@@ -78,30 +78,60 @@
   /* Add a pointer on hover */ }
 
 .video-gallery .card-wrapper {
-  padding: 0.4rem;
+  padding: 1rem;
   margin-bottom: .5rem; }
-.video-gallery .card .card-body {
+  .video-gallery .card-wrapper:hover {
-  padding: .75rem; }
+    background-color: #fafafa; }
-.video-gallery .card .card-text {
+.video-gallery .card {
-  font-size: 10pt;
+  border: none;
-  margin-bottom: .5rem; }
+  background: none; }
-.video-gallery .card .card-title {
+  .video-gallery .card .card-body {
-  font-size: 11pt;
+    margin-top: .5em;
-  margin-bottom: .5rem; }
+    padding: 0; }
-  .video-gallery .card .card-title .badge {
+  .video-gallery .card .card-text {
-    font-size: 8pt; }
+    font-size: 10pt;
-.video-gallery .card .card-footer {
+    margin-bottom: .5rem; }
-  padding: .5rem .75rem; }
+  .video-gallery .card .card-title {
-.video-gallery .card .card-more {
+    font-size: 11pt;
-  margin-right: -0.25rem; }
+    margin-bottom: .5rem;
-  .video-gallery .card .card-more:hover {
+    line-height: 1.2rem; }
-    text-decoration: none; }
+    .video-gallery .card .card-title .badge {
-.video-gallery .card .progress {
+      font-size: 8pt; }
-  width: 100px; }
+  .video-gallery .card .card-footer {
-.video-gallery .video-icon-yes {
+    padding: .5rem .75rem; }
-  color: #007bff; }
+  .video-gallery .card .card-more {
-.video-gallery .video-icon-no {
+    margin-right: -0.25rem;
-  color: #dddddd; }
+    margin-top: -0.27rem; }
+    .video-gallery .card .card-more:hover {
+      text-decoration: none; }
+  .video-gallery .card .progress {
+    width: 100px; }
+
+.video-badges {
+  position: absolute;
+  top: .6em;
+  left: 0;
+  width: 6.2em; }
+  .video-badges .video-badge {
+    width: 100%;
+    margin: 0 0 .6em 0;
+    padding: 0 0 0 .5em;
+    line-height: 1.65em;
+    background-color: #9af;
+    box-shadow: 0.2em 0 0.6em 0 rgba(0, 0, 0, 0.4);
+    border-radius: 0 3px 3px 0;
+    color: white;
+    text-align: center;
+    font-family: Noto Sans, Helvetica, Arial, sans-serif;
+    font-weight: 500;
+    font-size: 8pt;
+    text-transform: uppercase; }
+    .video-badges .video-badge.video-badge-new {
+      background-color: #007bff; }
+    .video-badges .video-badge.video-badge-downloaded {
+      background-color: #59b352; }
+    .video-badges .video-badge.video-badge-watched {
+      background-color: #444; }
 
 .alert-card {
   max-width: 35rem;
@@ -135,4 +165,7 @@
     margin: 0;
     line-height: normal; }
 
+img.muted {
+  opacity: .5; }
+
 /*# sourceMappingURL=style.css.map */

app/YtManagerApp/static/YtManagerApp/css/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.scss"],
 "names": [],
 "file": "style.css"

app/YtManagerApp/static/YtManagerApp/css/style.scss

@@ -78,12 +78,20 @@ $accent-color: #007bff;
 
 .video-gallery {
     .card-wrapper {
-        padding: 0.4rem;
+        padding: 1rem;
         margin-bottom: .5rem;
+
+        &:hover {
+            background-color: #fafafa;
+        }
     }
     .card {
+        border: none;
+        background: none;
+
         .card-body {
-            padding: .75rem;
+            margin-top: .5em;
+            padding: 0;
         }
         .card-text {
             font-size: 10pt;
@@ -92,6 +100,7 @@ $accent-color: #007bff;
         .card-title {
             font-size: 11pt;
             margin-bottom: .5rem;
+            line-height: 1.2rem;
 
             .badge {
                 font-size: 8pt;
@@ -103,6 +112,7 @@ $accent-color: #007bff;
 
         .card-more {
             margin-right: -0.25rem;
+            margin-top: -0.27rem;
             &:hover {
                 text-decoration: none;
             }
@@ -116,15 +126,44 @@ $accent-color: #007bff;
         }
 
     }
+}
 
-    .video-icon-yes {
+.video-badges {
-        color: $accent-color;
+    position: absolute;
-    }
+    top: .6em;
-    .video-icon-no {
+    left: 0;
-        color: #dddddd;
+    width: 6.2em;
+
+    .video-badge {
+        width: 100%;
+        margin: 0 0 .6em 0;
+        padding: 0 0 0 .5em;
+        line-height: 1.65em;
+
+        background-color: #9af;
+        box-shadow: .2em 0 .6em 0 rgba(0,0,0,0.4);
+        border-radius: 0 3px 3px 0;
+
+        color: white;
+        text-align: center;
+        font-family: Noto Sans, Helvetica, Arial, sans-serif;
+        font-weight: 500;
+        font-size: 8pt;
+        text-transform: uppercase;
+
+        &.video-badge-new {
+            background-color: $accent-color;
+        }
+        &.video-badge-downloaded {
+            background-color: #59b352;
+        }
+        &.video-badge-watched {
+            background-color: #444;
+        }
     }
 }
 
+
 .alert-card {
     max-width: 35rem;
     margin: 2rem 0;
@@ -169,4 +208,8 @@ $accent-color: #007bff;
         margin: 0;
         line-height: normal;
     }
+}
+
+img.muted {
+    opacity: .5;
 }

app/YtManagerApp/templates/YtManagerApp/index_videos.html

@@ -7,13 +7,51 @@
             <div class="card-wrapper d-flex align-items-stretch" style="width: 18rem;">
                 <div class="card mx-auto">
                     <a href="{% url 'video' video.id %}" target="_blank">
-                        <img class="card-img-top" src="{{ video.thumbnail }}" alt="Thumbnail">
+                        <div>
+                            <img class="card-img-top {% if video.watched %}muted{% endif %}" src="{{ video.thumbnail }}" alt="Thumbnail">
+                            <div class="video-badges">
+                                {% if video.new and not video.watched %}
+                                    <div class="video-badge video-badge-new">New</div>
+                                {% endif %}
+                                {% if video.watched %}
+                                    <div class="video-badge video-badge-watched">Watched</div>
+                                {% endif %}
+                                {% if video.downloaded_path %}
+                                    <div class="video-badge video-badge-downloaded">Downloaded</div>
+                                {% endif %}
+                            </div>
+                        </div>
                     </a>
                     <div class="card-body">
+                        <div class="dropdown show">
+                            <a class="card-more float-right text-muted"
+                               href="#" role="button" id="dropdownMenuLink"
+                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span class="typcn typcn-cog"></span>
+                            </a>
+                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                                {% if video.watched %}
+                                    <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_unwatched' video.id %}">
+                                        Mark not watched
+                                    </a>
+                                {% else %}
+                                    <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_watched' video.id %}">
+                                        Mark watched
+                                    </a>
+                                {% endif %}
+
+                                {% if video.downloaded_path %}
+                                    <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_delete_video_files' video.id %}">
+                                        Delete downloaded
+                                    </a>
+                                {% else %}
+                                    <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_download_video_files' video.id %}" >
+                                        Download
+                                    </a>
+                                {% endif %}
+                            </div>
+                        </div>
                         <h5 class="card-title">
-                            {% if video.new and not video.watched %}
-                            <sup class="badge badge-primary">New</sup>
-                            {% endif %}
                             <a href="{% url 'video' video.id %}" target="_blank">
                                 {{ video.name }}
                             </a>
@@ -25,39 +63,6 @@
                         </p>
                         <p class="card-text">{{ video.description | truncatechars:120 }}</p>
                     </div>
-                    <div class="card-footer dropdown show">
-                        <span class="typcn typcn-eye {{ video.watched | yesno:"video-icon-yes,video-icon-no" }}"
-                              title="{{ video.watched | yesno:"Watched,Not watched" }}"></span>
-                        <span class="typcn typcn-download {{ video.downloaded_path | yesno:"video-icon-yes,,video-icon-no" }}"
-                              title="{{ video.downloaded_path | yesno:"Downloaded,,Not downloaded" }}"></span>
-                        <small class="text-muted">{{ video.publish_date }}</small>
-                        <a class="card-more float-right text-muted"
-                           href="#" role="button" id="dropdownMenuLink"
-                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <span class="typcn typcn-cog"></span>
-                        </a>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                            {% if video.watched %}
-                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_unwatched' video.id %}">
-                                    Mark not watched
-                                </a>
-                            {% else %}
-                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_watched' video.id %}">
-                                    Mark watched
-                                </a>
-                            {% endif %}
-
-                            {% if video.downloaded_path %}
-                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_delete_video_files' video.id %}">
-                                    Delete downloaded
-                                </a>
-                            {% else %}
-                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_download_video_files' video.id %}" >
-                                    Download
-                                </a>
-                            {% endif %}
-                        </div>
-                    </div>
                 </div>
             </div>
         {% endfor %}