Skip to content

Commit

Permalink
Improved video list UI.
Browse files Browse the repository at this point in the history
  • Loading branch information
@chibicitiberiu
chibicitiberiu committed Aug 19, 2019
1 parent c1473dd commit ecf36cf
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 68 deletions.
79 changes: 56 additions & 23 deletions app/YtManagerApp/static/YtManagerApp/css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion app/YtManagerApp/static/YtManagerApp/css/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 50 additions & 7 deletions app/YtManagerApp/static/YtManagerApp/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -92,6 +100,7 @@ $accent-color: #007bff;
.card-title {
font-size: 11pt;
margin-bottom: .5rem;
line-height: 1.2rem;

.badge {
font-size: 8pt;
Expand All @@ -103,6 +112,7 @@ $accent-color: #007bff;

.card-more {
margin-right: -0.25rem;
margin-top: -0.27rem;
&:hover {
text-decoration: none;
}
Expand All @@ -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;
Expand Down Expand Up @@ -169,4 +208,8 @@ $accent-color: #007bff;
margin: 0;
line-height: normal;
}
}

img.muted {
opacity: .5;
}
79 changes: 42 additions & 37 deletions app/YtManagerApp/templates/YtManagerApp/index_videos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -25,39 +63,6 @@ <h5 class="card-title">
</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 %}
Expand Down

0 comments on commit ecf36cf

Please sign in to comment.