99 lines
5.6 KiB
HTML
99 lines
5.6 KiB
HTML
{% load humanize %}
|
|
{% load ratings %}
|
|
|
|
<div class="video-gallery container-fluid">
|
|
<div class="row">
|
|
{% for video in videos %}
|
|
<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">
|
|
</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>•</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>
|
|
<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 %}
|
|
</div>
|
|
|
|
<div class="pagination row">
|
|
<div class="btn-toolbar mx-auto">
|
|
<div class="btn-group mr-2" role="group">
|
|
<button id="btn_page_first" type="button" class="btn btn-light btn-paging"
|
|
data-toggle="tooltip" title="First page"
|
|
{% if videos.has_previous %} data-navigation-page="1" {% else %} disabled {% endif %}>
|
|
<span class="typcn typcn-chevron-left-outline" aria-hidden="true"></span>
|
|
</button>
|
|
<button id="btn_page_prev" type="button" class="btn btn-light btn-paging"
|
|
data-toggle="tooltip" title="Previous"
|
|
{% if videos.has_previous %} data-navigation-page="{{ videos.previous_page_number }}" {% else %} disabled {% endif %} >
|
|
<span class="typcn typcn-chevron-left" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<small class="my-auto mx-2">
|
|
Page {{ videos.number }} of {{ videos.paginator.num_pages }}
|
|
</small>
|
|
|
|
<div class="btn-group mx-2" role="group">
|
|
<button id="btn_page_next" type="button" class="btn btn-light btn-paging"
|
|
data-toggle="tooltip" title="Next"
|
|
{% if videos.has_next %} data-navigation-page="{{ videos.next_page_number }}" {% else %} disabled {% endif %} >
|
|
<span class="typcn typcn-chevron-right" aria-hidden="true"></span>
|
|
</button>
|
|
<button id="btn_page_last" type="button" class="btn btn-light btn-paging"
|
|
data-toggle="tooltip" title="Last"
|
|
{% if videos.has_next %} data-navigation-page="{{ videos.paginator.num_pages }}" {% else %} disabled {% endif %} >
|
|
<span class="typcn typcn-chevron-right-outline" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |