tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-12-23 02:10: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>
</div>
<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">
<form id="hidden-form" action="/channel/" method="post">
{% csrf_token %}

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

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

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

@ -17,7 +17,7 @@
<p>Start download</p>
</div>
<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>
<div class="show-form">
<form id='hidden-form' action="/downloads/" method="post">

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

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

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

@ -7,7 +7,7 @@
<h1>Playlists</h1>
</div>
<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">
<form id="hidden-form" action="/playlist/" method="post">
{% csrf_token %}

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

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

8
tubearchivist/static/script.js
View File

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