mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-04 19:30:13 +00:00
fix sort_by selected attribute and animation toggle
This commit is contained in:
parent
2ce90077b6
commit
49eb565e2a
@ -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 %}
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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 %}
|
||||||
|
@ -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;
|
||||||
|
@ -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);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user