Improved video list UI.

This commit is contained in:
2019-08-20 00:01:06 +03:00
parent c1473dd163
commit ecf36cf4e5
4 changed files with 149 additions and 68 deletions

View File

@ -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 %}