chibicitiberiu/ytsm
1
0
Fork 0
mirror of https://github.com/chibicitiberiu/ytsm.git synced 2024-02-24 05:43:31 +00:00
Code Issues Releases Wiki Activity

Improved video list UI.

Browse Source
This commit is contained in:
Tiberiu Chibici 2019-08-20 00:01:06 +03:00
parent c1473dd163
commit ecf36cf4e5
4 changed files with 149 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/YtManagerApp/static/YtManagerApp/css/style.css
View File

@ -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 {
.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 {
.video-gallery .card .card-title {
font-size: 11pt;
margin-bottom: .5rem; }
margin-bottom: .5rem;
line-height: 1.2rem; }
.video-gallery .card .card-title .badge {
font-size: 8pt; }
.video-gallery .card .card-footer {
.video-gallery .card .card-footer {
padding: .5rem .75rem; }
.video-gallery .card .card-more {
margin-right: -0.25rem; }
.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 {
.video-gallery .card .progress {
width: 100px; }
.video-gallery .video-icon-yes {
color: #007bff; }
.video-gallery .video-icon-no {
color: #dddddd; }
.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 */

2
app/YtManagerApp/static/YtManagerApp/css/style.css.map
View File

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

55
app/YtManagerApp/static/YtManagerApp/css/style.scss
View File

@ -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-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;
}
.video-icon-no {
color: #dddddd;
}
}
.alert-card {
max-width: 35rem;
margin: 2rem 0;
@ -170,3 +209,7 @@ $accent-color: #007bff;
line-height: normal;
}
}
img.muted {
opacity: .5;
}

49
app/YtManagerApp/templates/YtManagerApp/index_videos.html
View File

@ -7,30 +7,23 @@
<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">
<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>
</h5>
<p class="card-text small text-muted">
<span>{{ video.views | intcomma }} views</span>
<span>&#x2022;</span>
<span>{{ video.publish_date | naturaltime }}</span>
</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>
<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">
@ -58,6 +51,18 @@
{% endif %}
</div>
</div>
<h5 class="card-title">
<a href="{% url 'video' video.id %}" target="_blank">
{{ video.name }}
</a>
</h5>
<p class="card-text small text-muted">
<span>{{ video.views | intcomma }} views</span>
<span>&#x2022;</span>
<span>{{ video.publish_date | naturaltime }}</span>
</p>
<p class="card-text">{{ video.description | truncatechars:120 }}</p>
</div>
</div>
</div>
{% endfor %}