mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-26 03:21:05 +00:00
Fixes review/comment/quote tabs in create status form
This commit is contained in:
parent
5c1ed4c9b4
commit
b7f8055ede
3 changed files with 34 additions and 8 deletions
|
@ -34,6 +34,22 @@ function rate_stars(e) {
|
|||
function tabChange(e) {
|
||||
var target = e.target.closest('li')
|
||||
var identifier = target.getAttribute('data-id');
|
||||
|
||||
var parent_element = target.parentElement
|
||||
var tabs = parent_element.getElementsByTagName('label');
|
||||
for (i = 0; i < tabs.length; i++) {
|
||||
var tab = tabs[i].parentElement;
|
||||
if (tab.getAttribute('data-id') == identifier) {
|
||||
tab.className += ' is-active';
|
||||
} else {
|
||||
tab.className = tab.className.replace('is-active', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function nestedTabChange(e) {
|
||||
var target = e.target.closest('li')
|
||||
var identifier = target.getAttribute('data-id');
|
||||
var parent_element = target.parentElement.closest('li').parentElement;
|
||||
|
||||
var tabs = parent_element.getElementsByTagName('label');
|
||||
|
@ -45,8 +61,6 @@ function tabChange(e) {
|
|||
tab.className = tab.className.replace('is-active', '');
|
||||
}
|
||||
}
|
||||
|
||||
var el = document.getElementById(identifier);
|
||||
}
|
||||
|
||||
function ajaxPost(form) {
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
<ul>
|
||||
{% for book in shelf.books %}
|
||||
<li class="{% if shelf_counter == 1 and forloop.first %}is-active{% endif %}" data-id="tab-book-{{ book.id }}">
|
||||
<label for="book-{{ book.id }}" onclick="tabChange(event)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
|
||||
<label for="book-{{ book.id }}" onclick="nestedTabChange(event)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
@ -2,15 +2,27 @@
|
|||
{% load fr_display %}
|
||||
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<ul role="tablist">
|
||||
<li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
|
||||
<label for="review-{{ book.id }}" onclick="tabChange(event)"><a>Review</a></label>
|
||||
<label for="review-{{ book.id }}">
|
||||
<div onclick="tabChange(event)" role="tab" aria-selected="true" tabindex="0">
|
||||
<a>Review</a>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li data-id="tab-comment-{{ book.id }}" data-category="tab-option-{{ book.id }}">
|
||||
<label for="comment-{{ book.id}}" onclick="tabChange(event)"><a>Comment</a></label>
|
||||
<label for="comment-{{ book.id}}">
|
||||
<div onclick="tabChange(event)" role="tab" tabindex="0">
|
||||
<a>Comment</a>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
<li data-id="tab-quotation-{{ book.id }}" data-category="tab-option-{{ book.id }}">
|
||||
<label for="quote-{{ book.id }}" onclick="tabChange(event)"><a>Quote</a></label>
|
||||
<label for="quote-{{ book.id }}">
|
||||
<div onclick="tabChange(event)" role="tab" tabindex="0">
|
||||
<a>Quote</a>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -22,7 +34,7 @@
|
|||
|
||||
<div>
|
||||
<input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="comment-{{ book.id }}">
|
||||
{% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thougts on '"|add:book.title|add:"'" %}
|
||||
{% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
Loading…
Reference in a new issue