tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 20:00:15 +00:00
Code Issues Projects Releases Wiki Activity

fix sort_by selected attribute and animation toggle

Browse Source
This commit is contained in:
simon 2022-01-02 16:25:05 +07:00
parent 2ce90077b6
commit 49eb565e2a
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
7 changed files with 41 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tubearchivist/home/templates/home/channel.html
View File

@ -8,7 +8,7 @@
<h1>Channels</h1> <h1>Channels</h1>
</div> </div>
<div class="title-split-form"> <div class="title-split-form">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Channels"> <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Channels">
<div class="show-form"> <div class="show-form">
<form id="hidden-form" action="/channel/" method="post"> <form id="hidden-form" action="/channel/" method="post">
{% csrf_token %} {% csrf_token %}

10
tubearchivist/home/templates/home/channel_id.html
View File

@ -78,15 +78,14 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="view-icons">
<div class="sort"> <div class="sort">
<div id="hidden-form"> <div id="hidden-form">
<span>Sort by:</span> <span>Sort by:</span>
<select name="sort" id="sort" onchange="sortChange(this.value)"> <select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option> <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
<option value="downloaded" {% if sort_by == "published" %}selected{% endif %}>date downloaded</option> <option value="downloaded" {% if sort_by == "downloaded" %}selected{% endif %}>date downloaded</option>
<option value="views" {% if sort_by == "published" %}selected{% endif %}>views</option> <option value="views" {% if sort_by == "views" %}selected{% endif %}>views</option>
<option value="likes" {% if sort_by == "published" %}selected{% endif %}>likes</option> <option value="likes" {% if sort_by == "likes" %}selected{% endif %}>likes</option>
</select> </select>
<select name="sord-order" id="sort-order" onchange="sortChange(this.value)"> <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
<option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option> <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
@ -94,7 +93,8 @@
</select> </select>
</div> </div>
</div> </div>
<img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()"> <div class="view-icons">
<img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view"> <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view"> <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div> </div>

2
tubearchivist/home/templates/home/downloads.html
View File

@ -17,7 +17,7 @@
<p>Start download</p> <p>Start download</p>
</div> </div>
<div class="icon-text"> <div class="icon-text">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon"> <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<p>Add to download queue</p> <p>Add to download queue</p>
<div class="show-form"> <div class="show-form">
<form id='hidden-form' action="/downloads/" method="post"> <form id='hidden-form' action="/downloads/" method="post">

10
tubearchivist/home/templates/home/home.html
View File

@ -17,15 +17,14 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="view-icons">
<div class="sort"> <div class="sort">
<div id="hidden-form"> <div id="hidden-form">
<span>Sort by:</span> <span>Sort by:</span>
<select name="sort" id="sort" onchange="sortChange(this.value)"> <select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option> <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
<option value="downloaded" {% if sort_by == "published" %}selected{% endif %}>date downloaded</option> <option value="downloaded" {% if sort_by == "downloaded" %}selected{% endif %}>date downloaded</option>
<option value="views" {% if sort_by == "published" %}selected{% endif %}>views</option> <option value="views" {% if sort_by == "views" %}selected{% endif %}>views</option>
<option value="likes" {% if sort_by == "published" %}selected{% endif %}>likes</option> <option value="likes" {% if sort_by == "likes" %}selected{% endif %}>likes</option>
</select> </select>
<select name="sord-order" id="sort-order" onchange="sortChange(this.value)"> <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
<option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option> <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
@ -33,7 +32,8 @@
</select> </select>
</div> </div>
</div> </div>
<img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()"> <div class="view-icons">
<img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view"> <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view"> <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div> </div>

2
tubearchivist/home/templates/home/playlist.html
View File

@ -7,7 +7,7 @@
<h1>Playlists</h1> <h1>Playlists</h1>
</div> </div>
<div class="title-split-form"> <div class="title-split-form">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists"> <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists">
<div class="show-form"> <div class="show-form">
<form id="hidden-form" action="/playlist/" method="post"> <form id="hidden-form" action="/playlist/" method="post">
{% csrf_token %} {% csrf_token %}

2
tubearchivist/static/css/style.css
View File

@ -292,7 +292,7 @@ button:hover {
.view-controls { .view-controls {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr auto auto;
border-bottom: 2px solid; border-bottom: 2px solid;
border-color: var(--accent-font-dark); border-color: var(--accent-font-dark);
margin: 15px 0; margin: 15px 0;

8
tubearchivist/static/script.js
View File

@ -575,15 +575,17 @@ function showForm() {
var displayStyle = formElement.style.display var displayStyle = formElement.style.display
if (displayStyle === "") { if (displayStyle === "") {
formElement.style.display = 'block'; formElement.style.display = 'block';
animate('add-icon', 'pulse-img');
} else { } else {
formElement.style.display = ""; formElement.style.display = "";
} };
animate('animate-icon', 'pulse-img');
} }
function animate(elementId, animationClass) { function animate(elementId, animationClass) {
var toAnimate = document.getElementById(elementId); var toAnimate = document.getElementById(elementId);
if (toAnimate.className !== animationClass) { if (toAnimate.className !== animationClass) {
toAnimate.className = animationClass; toAnimate.className = animationClass;
} } else {
toAnimate.classList.remove(animationClass);
};
} }