use generic data-id and data-status attributes for watched checkbox

This commit is contained in:
simon 2022-03-07 20:48:45 +07:00
parent 437e83b2ae
commit fb12a32d4f
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
4 changed files with 9 additions and 10 deletions

View File

@ -124,9 +124,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched"> <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
{% else %} {% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched."> <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
{% endif %} {% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div> </div>

View File

@ -27,9 +27,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.youtube_id }}">
{% if video.player.watched %} {% if video.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched"> <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
{% else %} {% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched."> <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
{% endif %} {% endif %}
<span>{{ video.published }} | {{ video.player.duration_str }}</span> <span>{{ video.published }} | {{ video.player.duration_str }}</span>
</div> </div>
@ -103,9 +103,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched"> <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
{% else %} {% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched."> <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
{% endif %} {% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div> </div>

View File

@ -105,9 +105,9 @@
<div class="video-desc {{ view_style }}"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched"> <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.source.youtube_id }}" data-status="watched" onclick="isUnwatched(this.id)" class="watch-button" title="Mark as unwatched">
{% else %} {% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched."> <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.source.youtube_id }}" data-status="unwatched" onclick="isWatched(this.id)" class="watch-button" title="Mark as watched">
{% endif %} {% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span> <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div> </div>

View File

@ -484,8 +484,7 @@ button:hover {
align-items: center; align-items: center;
} }
.unseen-icon, .watch-button,
.seen-icon,
.close-button { .close-button {
cursor: pointer; cursor: pointer;
filter: var(--img-filter); filter: var(--img-filter);