forked from mirrors/bookwyrm
Merge pull request #524 from mouse-reeve/html-interaction
Cleans up markup around interactive html elements
This commit is contained in:
Mouse Reeve
GitHub
commit
ca945f0fc1
28 changed files with 165 additions and 194 deletions
|
|
@ -1,3 +1,37 @@
|
|||
// set up javascript listeners
|
||||
window.onload = function() {
|
||||
// let buttons set keyboard focus
|
||||
Array.from(document.getElementsByClassName('toggle-control'))
|
||||
.forEach(t => t.onclick = toggleAction);
|
||||
|
||||
// javascript interactions (boost/fav)
|
||||
Array.from(document.getElementsByClassName('interaction'))
|
||||
.forEach(t => t.onsubmit = interact);
|
||||
|
||||
// select all
|
||||
Array.from(document.getElementsByClassName('select-all'))
|
||||
.forEach(t => t.onclick = selectAll);
|
||||
|
||||
// toggle between tabs
|
||||
Array.from(document.getElementsByClassName('tab-change-nested'))
|
||||
.forEach(t => t.onclick = tabChangeNested);
|
||||
Array.from(document.getElementsByClassName('tab-change'))
|
||||
.forEach(t => t.onclick = tabChange);
|
||||
|
||||
// handle aria settings on menus
|
||||
Array.from(document.getElementsByClassName('pulldown-menu'))
|
||||
.forEach(t => t.onclick = toggleMenu);
|
||||
};
|
||||
|
||||
function toggleAction(e) {
|
||||
// set hover, if appropriate
|
||||
var hover = e.target.getAttribute('data-hover-target')
|
||||
if (hover) {
|
||||
document.getElementById(hover).focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function interact(e) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
|
|
@ -13,49 +47,36 @@ function interact(e) {
|
|||
return true;
|
||||
}
|
||||
|
||||
function reply(e) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
// TODO: display comment
|
||||
return true;
|
||||
}
|
||||
|
||||
function selectAll(el) {
|
||||
el.parentElement.querySelectorAll('[type="checkbox"]')
|
||||
function selectAll(e) {
|
||||
e.target.parentElement.parentElement.querySelectorAll('[type="checkbox"]')
|
||||
.forEach(t => t.checked=true);
|
||||
}
|
||||
|
||||
function rate_stars(e) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
rating = e.target.rating.value;
|
||||
var stars = e.target.parentElement.getElementsByClassName('icon');
|
||||
for (var i = 0; i < stars.length ; i++) {
|
||||
stars[i].className = rating > i ? 'icon icon-star-full' : 'icon icon-star-empty';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function tabChange(e, nested) {
|
||||
function tabChangeNested(e) {
|
||||
var target = e.target.closest('li')
|
||||
var identifier = target.getAttribute('data-id');
|
||||
|
||||
if (nested) {
|
||||
var parent_element = target.parentElement.closest('li').parentElement;
|
||||
} else {
|
||||
var parent_element = target.parentElement;
|
||||
var parentElement = target.parentElement.closest('li').parentElement;
|
||||
handleTabChange(target, parentElement)
|
||||
}
|
||||
|
||||
parent_element.querySelectorAll('[aria-selected="true"]')
|
||||
function tabChange(e) {
|
||||
var target = e.target.closest('li')
|
||||
var parentElement = target.parentElement;
|
||||
handleTabChange(target, parentElement)
|
||||
}
|
||||
|
||||
|
||||
function handleTabChange(target, parentElement) {
|
||||
parentElement.querySelectorAll('[aria-selected="true"]')
|
||||
.forEach(t => t.setAttribute("aria-selected", false));
|
||||
target.querySelector('[role="tab"]').setAttribute("aria-selected", true);
|
||||
|
||||
parent_element.querySelectorAll('li')
|
||||
parentElement.querySelectorAll('li')
|
||||
.forEach(t => t.className='');
|
||||
target.className = 'is-active';
|
||||
}
|
||||
|
||||
function toggleMenu(el) {
|
||||
function toggleMenu(e) {
|
||||
var el = e.target.closest('.pulldown-menu');
|
||||
el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
||||
<div class="column is-narrow">
|
||||
<a href="{{ author.local_path }}/edit">
|
||||
<span class="icon icon-pencil">
|
||||
<span class="icon icon-pencil" title="Edit Author">
|
||||
<span class="is-sr-only">Edit Author</span>
|
||||
</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
|
||||
<div class="column is-narrow">
|
||||
<a href="{{ book.id }}/edit">
|
||||
<span class="icon icon-pencil">
|
||||
<span class="icon icon-pencil" title="Edit Book">
|
||||
<span class="is-sr-only">Edit Book</span>
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -95,14 +95,14 @@
|
|||
|
||||
{% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
|
||||
<div>
|
||||
<input class="toggle-control" type="radio" name="add-description" id="hide-description" checked>
|
||||
<input class="toggle-control" type="radio" name="add-description" id="hide-description-{{ book.id }}" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<label class="button" for="add-description" tabindex="0" role="button">Add description</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input class="toggle-control" type="radio" name="add-description" id="add-description">
|
||||
<input class="toggle-control" type="radio" name="add-description" id="add-description-{{ book.id }}" data-hover-target="id_description">
|
||||
<div class="toggle-content hidden">
|
||||
<div class="box">
|
||||
<form name="add-description" method="POST" action="/add-description/{{ book.id }}">
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
</p>
|
||||
<div class="field">
|
||||
<button class="button is-primary" type="submit">Save</button>
|
||||
<label class="button" for="hide-description" tabindex="0" role="button">Cancel</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-description" controls_uid=book.id %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
<div>
|
||||
<input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<label class="button" for="add-readthrough" class="button" role="button" tabindex="0">Add read dates</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
{% include 'snippets/readthrough_form.html' with readthrough=None %}
|
||||
<div class="field is-grouped">
|
||||
<button class="button is-primary" type="submit">Create</button>
|
||||
<label class="button" for="hide-create-readthrough" role="button" tabindex="0">Cancel</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-create-readthrough" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,16 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% load humanize %}
|
||||
{% block content %}
|
||||
<div class="block">
|
||||
<div class="level">
|
||||
<header class="block">
|
||||
<h1 class="title level-left">
|
||||
Edit "{{ author.name }}"
|
||||
</h1>
|
||||
<div class="level-right">
|
||||
<a href="/author/{{ author.id }}">
|
||||
<span class="edit-link icon icon-close">
|
||||
<span class="is-sr-only">Close</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Added: {{ author.created_date | naturaltime }}</p>
|
||||
<p>Updated: {{ author.updated_date | naturaltime }}</p>
|
||||
<p>Last edited by: <a href="{{ author.last_edited_by.remote_id }}">{{ author.last_edited_by.display_name }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="block">
|
||||
|
|
|
|||
|
|
@ -1,25 +1,16 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% load humanize %}
|
||||
{% block content %}
|
||||
<div class="block">
|
||||
<div class="level">
|
||||
<header class="block">
|
||||
<h1 class="title level-left">
|
||||
Edit "{{ book.title }}"
|
||||
</h1>
|
||||
<div class="level-right">
|
||||
<a href="/book/{{ book.id }}">
|
||||
<span class="edit-link icon icon-close">
|
||||
<span class="is-sr-only">Close</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Added: {{ book.created_date | naturaltime }}</p>
|
||||
<p>Updated: {{ book.updated_date | naturaltime }}</p>
|
||||
<p>Last edited by: <a href="{{ book.last_edited_by.remote_id }}">{{ book.last_edited_by.display_name }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if form.non_field_errors %}
|
||||
<div class="block">
|
||||
|
|
|
|||
|
|
@ -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, nested=true)">
|
||||
<label for="book-{{ book.id }}" class="tab-change-nested">
|
||||
<div role="tab" tabindex="0" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}-panel">
|
||||
<a>
|
||||
{% include 'snippets/book_cover.html' with book=book size="medium" %}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<span>{% include 'snippets/book_titleby.html' with book=book %}</span>
|
||||
</>
|
||||
<div class="card-header-icon is-hidden-tablet">
|
||||
<label class="delete" for="no-book" aria-label="close" role="button"></label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="no-book" class="delete" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
{% endfor %}
|
||||
</fieldset>
|
||||
</ul>
|
||||
<div class="block pt-1" onclick="selectAll(this)">
|
||||
<div class="block pt-1 select-all">
|
||||
<label class="label">
|
||||
<input type="checkbox" class="checkbox">
|
||||
Select all
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
<div class="control">
|
||||
<button class="button" type="submit">
|
||||
<span class="icon icon-search">
|
||||
<span class="icon icon-search" title="Search">
|
||||
<span class="is-sr-only">search</span>
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<label for="main-nav" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNav" onclick="toggleMenu(this)" tabindex="0">
|
||||
<label for="main-nav" role="button" class="navbar-burger pulldown-menu" aria-label="menu" aria-expanded="false" data-target="mainNav" tabindex="0">
|
||||
<div class="navbar-item mt-3">
|
||||
<div class="icon icon-dots-three-vertical">
|
||||
<div class="icon icon-dots-three-vertical" title="Main navigation menu">
|
||||
<span class="is-sr-only">Main navigation menu</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="navbar-end">
|
||||
{% if request.user.is_authenticated %}
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link" role="button" aria-expanded=false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
|
||||
<div class="navbar-link pulldown-menu" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
|
||||
{% include 'snippets/avatar.html' with user=request.user %}
|
||||
{% include 'snippets/username.html' with user=request.user %}
|
||||
</p></div>
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
<a href="/notifications">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-medium">
|
||||
<span class="icon icon-bell">
|
||||
<span class="icon icon-bell" title="Notifications">
|
||||
<span class="is-sr-only">Notifications</span>
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -30,9 +30,7 @@
|
|||
|
||||
<input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<label class="button is-small" for="more-results">
|
||||
<div role="button" tabindex="0">Show results from other catalogues</div>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -64,9 +62,7 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if local_results.results %}
|
||||
<label class="button is-small" for="fewer-results">
|
||||
<div role="button" tabindex="0">Hide results from other catalogues</div>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Hide results from other catalogues" small=True controls_text="fewer-results" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,18 +33,13 @@
|
|||
<div class="column is-narrow">
|
||||
<input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<label for="create-shelf-form-show">
|
||||
<div role="button" tabindex="0">
|
||||
<span class="icon icon-plus">
|
||||
<span class="is-sr-only">Create new shelf</span>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
|
||||
<div class="toggle-content hidden">
|
||||
<div class="box mb-5">
|
||||
|
|
@ -63,11 +58,12 @@
|
|||
</label>
|
||||
<div class="field is-grouped">
|
||||
<button class="button is-primary" type="submit">Create shelf</button>
|
||||
<label role="button" class="button" for="create-shelf-form-hide" tabindex="0">Cancel<label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="create-shelf-form-hide" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block columns">
|
||||
<div class="column">
|
||||
|
|
@ -82,13 +78,7 @@
|
|||
<div class="column is-narrow">
|
||||
<input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<label for="edit-shelf-form-show">
|
||||
<div role="button" tabindex="0">
|
||||
<span class="icon icon-pencil">
|
||||
<span class="is-sr-only">Edit shelf</span>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -116,7 +106,7 @@
|
|||
</label>
|
||||
<div class="field is-grouped">
|
||||
<button class="button is-primary" type="submit">Update shelf</button>
|
||||
<label role="button" class="button" for="edit-shelf-form-hide" tabindex="0">Cancel<label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="edit-shelf-form-hide" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
{% load bookwyrm_tags %}
|
||||
|
||||
{% with status.id|uuid as uuid %}
|
||||
<form name="boost" action="/boost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
|
||||
<form name="boost" action="/boost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
|
||||
{% csrf_token %}
|
||||
<button class="button is-small" type="submit" {% if not status.boostable %}disabled{% endif %}>
|
||||
<span class="icon icon-boost">
|
||||
<span class="icon icon-boost" title="Boost status">
|
||||
<span class="is-sr-only">Boost status</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<form name="unboost" action="/unboost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
|
||||
<form name="unboost" action="/unboost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
|
||||
{% csrf_token %}
|
||||
<button class="button is-small is-success" type="submit">
|
||||
<span class="icon icon-boost">
|
||||
<span class="icon icon-boost" title="Un-boost status">
|
||||
<span class="is-sr-only">Un-boost status</span>
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@
|
|||
{% with 0|uuid as uuid %}
|
||||
<div class="control">
|
||||
<div>
|
||||
<input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
|
||||
<input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %} data-hover-target="id_content_warning_{{ uuid }}">
|
||||
<div class="toggle-content hidden">
|
||||
<label class="button is-small" role="button" tabindex="0" for="include-spoilers-{{ uuid }}">Add spoilers/content warning</label>
|
||||
<label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
|
||||
<input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
|
||||
{% include 'snippets/toggle/toggle_button.html' with controls_text="hide-spoilers" controls_uid=uuid text="Remove spoilers/content warning" small=True %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %}>
|
||||
<input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
|
||||
<div class="toggle-content hidden">
|
||||
<label class="button is-small" role="button" tabindex="0" for="hide-spoilers-{{ uuid }}">Remove spoilers/content warning</label>
|
||||
<label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
|
||||
<input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
|
||||
{% include 'snippets/toggle/toggle_button.html' with controls_text="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@
|
|||
<ul role="tablist">
|
||||
<li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
|
||||
<label for="review-{{ book.id }}">
|
||||
<div onclick="tabChange(event)" role="tab" aria-selected="true" tabindex="0">
|
||||
<div class="tab-change" 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}}">
|
||||
<div onclick="tabChange(event)" role="tab" tabindex="0">
|
||||
<div class="tab-change" 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 }}">
|
||||
<div onclick="tabChange(event)" role="tab" tabindex="0">
|
||||
<div class="tab-change" role="tab" tabindex="0">
|
||||
<a>Quote</a>
|
||||
</div>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
{% endif %}
|
||||
<div class="control">
|
||||
<label class="label" for="id_{% if type == 'quotation' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
|
||||
{% include 'snippets/content_warning_field.html' %}
|
||||
|
||||
{% if type == 'review' %}
|
||||
<fieldset>
|
||||
|
|
@ -27,14 +28,11 @@
|
|||
</fieldset>
|
||||
{% endif %}
|
||||
|
||||
{% include 'snippets/content_warning_field.html' %}
|
||||
|
||||
{% if type == 'quotation' %}
|
||||
<textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
|
||||
{% else %}
|
||||
<textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% if type == 'quotation' %}
|
||||
<div class="control">
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
{% load bookwyrm_tags %}
|
||||
{% with status.id|uuid as uuid %}
|
||||
<form name="favorite" action="/favorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
|
||||
<form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
|
||||
{% csrf_token %}
|
||||
<button class="button is-small" type="submit">
|
||||
<span class="icon icon-heart">
|
||||
<span class="icon icon-heart" title="Like status">
|
||||
<span class="is-sr-only">Like status</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
|
||||
<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
|
||||
{% csrf_token %}
|
||||
<button class="button is-success is-small" type="submit">
|
||||
<span class="icon icon-heart">
|
||||
<span class="icon icon-heart" title="Un-like status">
|
||||
<span class="is-sr-only">Un-like status</span>
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Finish "{{ book.title }}"</p>
|
||||
<label class="delete" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
|
||||
</header>
|
||||
{% active_read_through book user as readthrough %}
|
||||
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
</div>
|
||||
<div class="column">
|
||||
<button type="submit" class="button is-success">Save</button>
|
||||
<label for="finish-reading-{{ uuid }}" class="button" role="button">Cancel</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Follow request already sent.
|
|||
|
||||
{% else %}
|
||||
|
||||
<form action="/follow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
|
||||
<form action="/follow/" method="POST" class="interaction follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="user" value="{{ user.username }}">
|
||||
{% if user.manually_approves_followers %}
|
||||
|
|
@ -16,7 +16,7 @@ Follow request already sent.
|
|||
<button class="button is-small is-link" type="submit">Follow</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
<form action="/unfollow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
|
||||
<form action="/unfollow/" method="POST" class="interaction follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="user" value="{{ user.username }}">
|
||||
<button class="button is-small is-danger is-light" type="submit">Unfollow</button>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
{% if item.privacy == 'public' %}
|
||||
<span class="icon icon-globe">
|
||||
<span class="icon icon-globe" title="Public post">
|
||||
<span class="is-sr-only">Public post</span>
|
||||
</span>
|
||||
{% elif item.privacy == 'unlisted' %}
|
||||
<span class="icon icon-unlock">
|
||||
<span class="icon icon-unlock" title="Unlisted post">
|
||||
<span class="is-sr-only">Unlisted post</span>
|
||||
</span>
|
||||
{% elif item.privacy == 'followers' %}
|
||||
<span class="icon icon-lock">
|
||||
<span class="icon icon-lock" title="Followers-only post">
|
||||
<span class="is-sr-only">Followers-only post</span>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="icon icon-envelope">
|
||||
<span class="icon icon-envelope" title="Private post">
|
||||
<span class="is-sr-only">Private post</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -17,16 +17,8 @@
|
|||
{% endif %}
|
||||
</dl>
|
||||
<div class="field is-grouped">
|
||||
<label class="button is-small" for="edit-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
|
||||
<span class="icon icon-pencil">
|
||||
<span class="is-sr-only">Edit read-through dates</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="button is-small" for="delete-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
|
||||
<span class="icon icon-x">
|
||||
<span class="is-sr-only">Delete this read-through</span>
|
||||
</span>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,7 +31,7 @@
|
|||
{% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
|
||||
<div class="field is-grouped">
|
||||
<button class="button is-primary" type="submit">Save</button>
|
||||
<label class="button" for="show-readthrough-{{ readthrough.id }}" role="button" tabindex="0">Cancel</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -62,7 +54,7 @@
|
|||
<button class="button is-danger is-light" type="submit">
|
||||
Delete
|
||||
</button>
|
||||
<label for="delete-readthrough-{{ readthrough.id }}" class="button" role="button" tabindex="0">Cancel</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||
</form>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
{% load bookwyrm_tags %}
|
||||
{% with status.id|uuid as uuid %}
|
||||
<form class="is-flex-grow-1" name="reply" action="/post/reply" method="post" onsubmit="return reply(event)">
|
||||
<div class="columns">
|
||||
<form class="is-flex-grow-1" name="reply" action="/post/reply" method="post">
|
||||
<div class="columns is-align-items-flex-end">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="reply_parent" value="{{ status.id }}">
|
||||
<input type="hidden" name="user" value="{{ request.user.id }}">
|
||||
<div class="column">
|
||||
|
||||
{% include 'snippets/content_warning_field.html' with parent_status=status %}
|
||||
<label for="id_content_{{ status.id }}-{{ uuid }}" class="is-sr-only">Reply</label>
|
||||
<div class="field">
|
||||
|
|
@ -25,4 +24,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endwith %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
|
||||
<label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
|
||||
<div class="button">
|
||||
<span>Change shelf</span>
|
||||
<span class="icon icon-arrow-down" aria-hidden="true"></span>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,9 @@
|
|||
<span>Read</span> <span class="icon icon-check"></span>
|
||||
</button>
|
||||
{% elif active_shelf.shelf.identifier == 'reading' %}
|
||||
<label class="button is-small" for="finish-reading-{{ uuid }}" role="button" tabindex="0">
|
||||
I'm done!
|
||||
</label>
|
||||
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
|
||||
{% elif active_shelf.shelf.identifier == 'to-read' %}
|
||||
<label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
|
||||
Start reading
|
||||
</label>
|
||||
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
|
||||
{% else %}
|
||||
<form name="shelve" action="/shelve/" method="post">
|
||||
{% csrf_token %}
|
||||
|
|
@ -33,7 +27,7 @@
|
|||
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
|
||||
<label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
|
||||
<div class="button is-small">
|
||||
<span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
|
||||
</div>
|
||||
|
|
@ -46,10 +40,7 @@
|
|||
<li role="menuitem">
|
||||
{% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
|
||||
<div class="dropdown-item pt-0 pb-0">
|
||||
<label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
|
||||
Start reading
|
||||
</label>
|
||||
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
|
||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
{% else %}
|
||||
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
|
||||
|
|
@ -68,5 +59,7 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
|
||||
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Start "{{ book.title }}"</p>
|
||||
<label class="delete" for="start-reading-{{ uuid }}" aria-label="close" role="button" tabindex="0"></label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
|
||||
</header>
|
||||
<form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
|
||||
<section class="modal-card-body">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
<div class="column">
|
||||
<button class="button is-success" type="submit">Save</button>
|
||||
<label for="start-reading-{{ uuid }}" class="button" role="button" tabindex="0">Cancel</button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -21,27 +21,21 @@
|
|||
<div class="card-footer has-background-white-bis">
|
||||
<div class="card-footer-item">
|
||||
{% if request.user.is_authenticated %}
|
||||
<label class="button is-small" for="show-comment-{{ status.id }}">
|
||||
<div role="button" tabindex="0">
|
||||
<span class="icon icon-comment">
|
||||
<span class="is-sr-only">Reply</span>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon='comment' small=True %}
|
||||
{% include 'snippets/boost_button.html' with status=status %}
|
||||
{% include 'snippets/fav_button.html' with status=status %}
|
||||
|
||||
{% else %}
|
||||
<a href="/login">
|
||||
<span class="icon icon-comment">
|
||||
<span class="icon icon-comment" title="Reply">
|
||||
<span class="is-sr-only">Reply</span>
|
||||
</span>
|
||||
|
||||
<span class="icon icon-boost">
|
||||
<span class="icon icon-boost" title="Boost status">
|
||||
<span class="is-sr-only">Boost status</span>
|
||||
</span>
|
||||
|
||||
<span class="icon icon-heart">
|
||||
<span class="icon icon-heart" title="Like status">
|
||||
<span class="is-sr-only">Like status</span>
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -57,17 +51,14 @@
|
|||
</div>
|
||||
{% if status.user == request.user %}
|
||||
<div class="card-footer-item">
|
||||
<label class="button is-small" for="more-info-{{ status.id }}">
|
||||
<div class="icon icon-dots-three">
|
||||
<span class="is-sr-only">More options</span>
|
||||
</div>
|
||||
</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" small=True %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}">
|
||||
{% with status.id|uuid as uuid %}
|
||||
<input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-hover-target="id_content_{{ status.id }}-{{ uuid }}">
|
||||
<div class="toggle-content hidden">
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
|
|
@ -75,6 +66,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
||||
{% if status.user == request.user %}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<p>{{ status.content_warning }}</p>
|
||||
<input class="toggle-control" type="radio" name="toggle-status-cw-{{ status.id }}" id="hide-status-cw-{{ status.id }}" checked>
|
||||
<div class="toggle-content hidden">
|
||||
<label class="button is-small" for="show-status-cw-{{ status.id }}" tabindex="0" role="button">Show More</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Show More" small=True controls_text="show-status-cw" controls_uid=status.id %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{% endif %}
|
||||
<div{% if status.content_warning %} class="toggle-content hidden"{% endif %}>
|
||||
{% if status.content_warning %}
|
||||
<label class="button is-small" for="hide-status-cw-{{ status.id }}" tabindex="0" role="button">Show Less</label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Show Less" small=True controls_text="hide-status-cw" controls_uid=status.id %}
|
||||
{% endif %}
|
||||
|
||||
{% if status.quote %}
|
||||
|
|
|
|||
9
bookwyrm/templates/snippets/toggle/toggle_button.html
Normal file
9
bookwyrm/templates/snippets/toggle/toggle_button.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button"{% if label %} aria-label="{{ label }}"{% endif %}>
|
||||
{% if icon %}
|
||||
<span class="icon icon-{{ icon }}" title="{{ text }}">
|
||||
<span class="is-sr-only">{{ text }}</span>
|
||||
</span>
|
||||
{% else %}
|
||||
{{ text }}
|
||||
{% endif %}
|
||||
</label>
|
||||
|
|
@ -7,13 +7,13 @@
|
|||
<div>
|
||||
<input type="radio" name="show-hide-{{ uuid }}" id="show-{{ uuid }}" class="toggle-control" checked>
|
||||
<blockquote class="content toggle-content hidden"><span dir="auto">{{ trimmed | to_markdown | safe }}</span>
|
||||
<label class="button is-small" for="hide-{{ uuid }}"><div role="button" tabindex="0">show more</div></label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="show more" controls_text="hide" controls_uid=uuid class="has-text-link is-clickable" %}
|
||||
</blockquote>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="show-hide-{{ uuid }}" id="hide-{{ uuid }}" class="toggle-control">
|
||||
<blockquote class="content toggle-content hidden"><span dir="auto">{{ full | to_markdown | safe }}</span>
|
||||
<label class="button is-small" for="show-{{ uuid }}"><div role="button" tabindex="0">show less</div></label>
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="show less" controls_text="show" controls_uid=uuid class="has-text-link is-clickable" %}
|
||||
</blockquote>
|
||||
</div>
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{% if is_self %}
|
||||
<div class="column is-narrow">
|
||||
<a href="/edit-profile">
|
||||
<span class="icon icon-pencil">
|
||||
<span class="icon icon-pencil" title="Edit profile">
|
||||
<span class="is-sr-only">Edit profile</span>
|
||||
</span>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Reference in a new issue