Improved video list UI.
This commit is contained in:
parent
c1473dd163
commit
ecf36cf4e5
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": ["style.scss"],
|
||||
"names": [],
|
||||
"file": "style.css"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue