From ecf36cf4e51a2cfc6a67e8226afc32a13c4107d2 Mon Sep 17 00:00:00 2001 From: Tiberiu Chibici Date: Tue, 20 Aug 2019 00:01:06 +0300 Subject: [PATCH] Improved video list UI. --- .../static/YtManagerApp/css/style.css | 79 +++++++++++++------ .../static/YtManagerApp/css/style.css.map | 2 +- .../static/YtManagerApp/css/style.scss | 57 +++++++++++-- .../templates/YtManagerApp/index_videos.html | 79 ++++++++++--------- 4 files changed, 149 insertions(+), 68 deletions(-) diff --git a/app/YtManagerApp/static/YtManagerApp/css/style.css b/app/YtManagerApp/static/YtManagerApp/css/style.css index 2d6215a..58fcaa6 100644 --- a/app/YtManagerApp/static/YtManagerApp/css/style.css +++ b/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 { - padding: .75rem; } -.video-gallery .card .card-text { - font-size: 10pt; - margin-bottom: .5rem; } -.video-gallery .card .card-title { - font-size: 11pt; - margin-bottom: .5rem; } - .video-gallery .card .card-title .badge { - font-size: 8pt; } -.video-gallery .card .card-footer { - padding: .5rem .75rem; } -.video-gallery .card .card-more { - margin-right: -0.25rem; } - .video-gallery .card .card-more:hover { - text-decoration: none; } -.video-gallery .card .progress { - width: 100px; } -.video-gallery .video-icon-yes { - color: #007bff; } -.video-gallery .video-icon-no { - color: #dddddd; } + .video-gallery .card-wrapper:hover { + background-color: #fafafa; } +.video-gallery .card { + border: none; + background: none; } + .video-gallery .card .card-body { + margin-top: .5em; + padding: 0; } + .video-gallery .card .card-text { + font-size: 10pt; + margin-bottom: .5rem; } + .video-gallery .card .card-title { + font-size: 11pt; + margin-bottom: .5rem; + line-height: 1.2rem; } + .video-gallery .card .card-title .badge { + font-size: 8pt; } + .video-gallery .card .card-footer { + padding: .5rem .75rem; } + .video-gallery .card .card-more { + margin-right: -0.25rem; + 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 */ diff --git a/app/YtManagerApp/static/YtManagerApp/css/style.css.map b/app/YtManagerApp/static/YtManagerApp/css/style.css.map index 932f8e0..1857bfa 100644 --- a/app/YtManagerApp/static/YtManagerApp/css/style.css.map +++ b/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" diff --git a/app/YtManagerApp/static/YtManagerApp/css/style.scss b/app/YtManagerApp/static/YtManagerApp/css/style.scss index 4e2e1f0..7d020ff 100644 --- a/app/YtManagerApp/static/YtManagerApp/css/style.scss +++ b/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 { - color: $accent-color; - } - .video-icon-no { - color: #dddddd; +.video-badges { + position: absolute; + top: .6em; + left: 0; + 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; } \ No newline at end of file diff --git a/app/YtManagerApp/templates/YtManagerApp/index_videos.html b/app/YtManagerApp/templates/YtManagerApp/index_videos.html index 22d5ed3..5f472fa 100644 --- a/app/YtManagerApp/templates/YtManagerApp/index_videos.html +++ b/app/YtManagerApp/templates/YtManagerApp/index_videos.html @@ -7,13 +7,51 @@
- Thumbnail +
+ Thumbnail +
+ {% if video.new and not video.watched %} +
New
+ {% endif %} + {% if video.watched %} +
Watched
+ {% endif %} + {% if video.downloaded_path %} +
Downloaded
+ {% endif %} +
+
+
+ +
+ {% if video.watched %} + + Mark not watched + + {% else %} + + Mark watched + + {% endif %} + + {% if video.downloaded_path %} + + Delete downloaded + + {% else %} + + Download + + {% endif %} +
+
- {% if video.new and not video.watched %} - New - {% endif %} {{ video.name }} @@ -25,39 +63,6 @@

{{ video.description | truncatechars:120 }}

-
- - - {{ video.publish_date }} - -
- {% if video.watched %} - - Mark not watched - - {% else %} - - Mark watched - - {% endif %} - - {% if video.downloaded_path %} - - Delete downloaded - - {% else %} - - Download - - {% endif %} -
-
{% endfor %}