mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-12-22 16:16:39 +00:00
Code Issues Projects Releases Wiki Activity

starts replacing pure css buttons with javascript buttons

Browse source 
RIP, but it was time
This commit is contained in:
Mouse Reeve 2021-01-17 08:26:28 -08:00
parent 2e043f9252
commit afdf5fc8ec
11 changed files with 191 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
bookwyrm/static/css/format.css
View file

@ -14,10 +14,13 @@
} }
/* --- TOGGLES --- */ /* --- TOGGLES --- */
[aria-pressed=true] { .toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover {
background-color: hsl(171, 100%, 41%); background-color: hsl(171, 100%, 41%);
color: white; color: white;
} }
.hide-active[aria-pressed=true] {
display: none;
}
input.toggle-control { input.toggle-control {
display: none; display: none;

32
bookwyrm/static/js/shared.js
View file

@ -52,33 +52,51 @@ function setDisplay(el) {
function toggleAction(e) { function toggleAction(e) {
var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false'; var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false';
e.currentTarget.setAttribute('aria-pressed', pressed); var el = e.currentTarget;
var targetId = el.getAttribute('data-controls');
document.querySelectorAll('[data-controls="' + targetId + '"]')
.forEach(t => t.setAttribute('aria-pressed', !!(t.getAttribute('aria-pressed') == 'false')));
var targetId = e.currentTarget.getAttribute('data-controls');
if (targetId) { if (targetId) {
var target = document.getElementById(targetId); var target = document.getElementById(targetId);
if (pressed) { if (pressed) {
target.className = target.className.replace('hidden', ''); removeClass(target, 'hidden');
addClass(target, 'is-active');
} else { } else {
target.className += ' hidden'; addClass(target, 'hidden');
removeClass(target, 'is-active');
} }
} }
// set hover, if appropriate // set hover, if appropriate
var hover = e.currentTarget.getAttribute('data-hover-target'); var hover = el.getAttribute('data-hover-target');
if (hover) { if (hover) {
document.getElementById(hover).focus(); document.getElementById(hover).focus();
} }
// set checkbox, if appropriate // set checkbox, if appropriate
var checkbox = e.currentTarget.getAttribute('data-controls-checkbox'); var checkbox = el.getAttribute('data-controls-checkbox');
if (checkbox) { if (checkbox) {
document.getElementById(checkbox).checked = !!pressed; document.getElementById(checkbox).checked = !!pressed;
} }
} }
function addClass(el, classname) {
el.className = el.className.split(' ').concat(classname).join(' ');
}
function removeClass(el, className) {
var classes = el.className.split(' ');
const idx = classes.indexOf(className);
if (idx > -1) {
classes.splice(idx, 1);
}
el.className = classes.join(' ');
}
function interact(e) { function interact(e) {
e.preventDefault(); e.preventDefault();
ajaxPost(e.target); ajaxPost(e.target);

60
bookwyrm/templates/book.html
View file

@ -94,30 +94,20 @@
{% include 'snippets/trimmed_text.html' with full=book|book_description %} {% include 'snippets/trimmed_text.html' with full=book|book_description %}
{% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %} {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
<div> {% include 'snippets/toggle/open_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id hover="id_description" hide_active=True id="hide-description" %}
<input class="toggle-control" type="radio" name="add-description" id="hide-description-{{ book.id }}" checked>
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id %}
</div>
</div>
<div> <div class="box hidden" id="add-description-{{ book.id }}">
<input class="toggle-control" type="radio" name="add-description" id="add-description-{{ book.id }}" data-hover-target="id_description"> <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
<div class="toggle-content hidden"> {% csrf_token %}
<div class="box"> <p class="fields is-grouped">
<form name="add-description" method="POST" action="/add-description/{{ book.id }}"> <label class="label"for="id_description">Description:</label>
{% csrf_token %} <textarea name="description" cols="None" rows="None" class="textarea" id="id_description"></textarea>
<p class="fields is-grouped"> </p>
<label class="label"for="id_description">Description:</label> <div class="field">
<textarea name="description" cols="None" rows="None" class="textarea" id="id_description"></textarea> <button class="button is-primary" type="submit">Save</button>
</p> {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="add-description" controls_uid=book.id hide_inactive=True %}
<div class="field">
<button class="button is-primary" type="submit">Save</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-description" controls_uid=book.id %}
</div>
</form>
</div> </div>
</div> </form>
</div> </div>
{% endif %} {% endif %}
@ -152,23 +142,15 @@
</div> </div>
{% endif %} {% endif %}
<div class="block"> <div class="block">
<div> {% include 'snippets/toggle/open_button.html' with text="Add read dates" controls_text="add-readthrough" %}
<input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked> <div class="toggle-content hidden box" id="add-readthrough">
<div class="toggle-content hidden"> <form name="add-readthrough" action="/create-readthrough" method="post">
{% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %} {% include 'snippets/readthrough_form.html' with readthrough=None %}
</div> <div class="field is-grouped">
</div> <button class="button is-primary" type="submit">Create</button>
<div> {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="add-readthrough" %}
<input type="radio" class="toggle-control" id="add-readthrough" name="add-readthrough-form"> </div>
<div class="toggle-content hidden box"> </form>
<form name="add-readthrough" action="/create-readthrough" method="post">
{% include 'snippets/readthrough_form.html' with readthrough=None %}
<div class="field is-grouped">
<button class="button is-primary" type="submit">Create</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-create-readthrough" %}
</div>
</form>
</div>
</div> </div>
</div> </div>

32
bookwyrm/templates/goal.html
View file

@ -6,29 +6,21 @@
{% if user == request.user %} {% if user == request.user %}
<div class="block"> <div class="block">
{% if goal %} {% if goal %}
<input type="radio" class="toggle-control" name="edit-goal" id="hide-edit-goal" checked> {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %}
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Edit goal" controls_text="show-edit-goal" %}
</div>
{% endif %} {% endif %}
</div> {% now 'Y' as year %}
<div class="block"> <section class="card {% if goal %}hidden{% endif %}" id="show-edit-goal">
<input type="radio" class="toggle-control" name="edit-goal" id="show-edit-goal" data-hover-target="edit-form-header"> <header class="card-header">
<div class="toggle-content{% if goal %} hidden{% endif %}"> <h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header">
{% now 'Y' as year %} <span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
<section class="card"> </h2>
<header class="card-header"> </header>
<h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header"> <section class="card-content content">
<span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal <p>Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.</p>
</h2>
</header>
<section class="card-content content">
<p>Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.</p>
{% include 'snippets/goal_form.html' with goal=goal year=year %} {% include 'snippets/goal_form.html' with goal=goal year=year %}
</section>
</section> </section>
</div> </section>
</div> </div>
{% endif %} {% endif %}

12
bookwyrm/templates/search_results.html
View file

@ -27,16 +27,11 @@
<p> <p>
Didn't find what you were looking for? Didn't find what you were looking for?
</p> </p>
{% include 'snippets/toggle/open_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
<input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked>
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
</div>
</div> </div>
{% endif %} {% endif %}
<input class="toggle-control" type="radio" name="more-results" id="more-results" {% if not local_results.results %}checked{% endif %}> <div class="{% if local_results.results %}hidden{% endif %}" id="more-results">
<div class="toggle-content hidden">
{% for result_set in book_results|slice:"1:" %} {% for result_set in book_results|slice:"1:" %}
{% if result_set.results %} {% if result_set.results %}
<section class="block"> <section class="block">
@ -61,8 +56,9 @@
</section> </section>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if local_results.results %} {% if local_results.results %}
{% include 'snippets/toggle/toggle_button.html' with text="Hide results from other catalogues" small=True controls_text="fewer-results" %} {% include 'snippets/toggle/close_button.html' with text="Hide results from other catalogues" small=True controls_text="more-results" %}
{% endif %} {% endif %}
</div> </div>
</div> </div>

98
bookwyrm/templates/shelf.html
View file

@ -31,38 +31,30 @@
{% if is_self %} {% if is_self %}
<div class="column is-narrow"> <div class="column is-narrow">
<input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked> {% include 'snippets/toggle/open_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form" %}
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div> <div class="hidden box mb-5" id="create-shelf-form">
<input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control"> <h2 class="title is-4">Create new shelf</h2>
<div class="toggle-content hidden"> <form name="create-shelf" action="/create-shelf/" method="post">
<div class="box mb-5"> {% csrf_token %}
<h2 class="title is-4">Create new shelf</h2> <input type="hidden" name="user" value="{{ request.user.id }}">
<form name="create-shelf" action="/create-shelf/" method="post"> <div class="field">
{% csrf_token %} <label class="label" for="id_name_create">Name:</label>
<input type="hidden" name="user" value="{{ request.user.id }}"> <input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
<div class="field">
<label class="label" for="id_name_create">Name:</label>
<input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
</div>
<label class="label">
<p>Shelf privacy:</p>
{% include 'snippets/privacy_select.html' with no_label=True %}
</label>
<div class="field is-grouped">
<button class="button is-primary" type="submit">Create shelf</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="create-shelf-form-hide" %}
</div>
</form>
</div> </div>
</div>
<label class="label">
<p>Shelf privacy:</p>
{% include 'snippets/privacy_select.html' with no_label=True %}
</label>
<div class="field is-grouped">
<button class="button is-primary" type="submit">Create shelf</button>
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="create-shelf-form" %}
</div>
</form>
</div> </div>
<div class="block columns"> <div class="block columns">
@ -76,40 +68,34 @@
</div> </div>
{% if is_self %} {% if is_self %}
<div class="column is-narrow"> <div class="column is-narrow">
<input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked> {% include 'snippets/toggle/open_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form" %}
<div class="toggle-content hidden">
{% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<input type="radio" id="edit-shelf-form-show" name="edit-shelf-form" class="toggle-control"> <div class="hidden box mb-5" id="edit-shelf-form">
<div class="toggle-content hidden"> <h2 class="title is-4">Edit shelf</h2>
<div class="box mb-5"> <form name="create-shelf" action="/edit-shelf/{{ shelf.id }}" method="post">
<h2 class="title is-4">Edit shelf</h2> {% csrf_token %}
<form name="create-shelf" action="/edit-shelf/{{ shelf.id }}" method="post"> <input type="hidden" name="user" value="{{ request.user.id }}">
{% csrf_token %} {% if shelf.editable %}
<input type="hidden" name="user" value="{{ request.user.id }}"> <div class="field">
{% if shelf.editable %} <label class="label" for="id_name">Name:</label>
<div class="field"> <input type="text" name="name" maxlength="100" class="input" required="true" value="{{ shelf.name }}" id="id_name">
<label class="label" for="id_name">Name:</label> </div>
<input type="text" name="name" maxlength="100" class="input" required="true" value="{{ shelf.name }}" id="id_name"> {% else %}
</div> <input type="hidden" name="name" required="true" value="{{ shelf.name }}">
{% else %} {% endif %}
<input type="hidden" name="name" required="true" value="{{ shelf.name }}">
{% endif %}
<label class="label"> <label class="label">
<p>Shelf privacy:</p> <p>Shelf privacy:</p>
{% include 'snippets/privacy_select.html' with no_label=True current=shelf.privacy %} {% include 'snippets/privacy_select.html' with no_label=True current=shelf.privacy %}
</label> </label>
<div class="field is-grouped"> <div class="field is-grouped">
<button class="button is-primary" type="submit">Update shelf</button> <button class="button is-primary" type="submit">Update shelf</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="edit-shelf-form-hide" %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-shelf-form" %}
</div> </div>
</form> </form>
</div>
</div> </div>
<div class="block"> <div class="block">

82
bookwyrm/templates/snippets/finish_reading_modal.html
View file

@ -1,49 +1,45 @@
{% load bookwyrm_tags %} {% load bookwyrm_tags %}
<div> <div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
<input class="toggle-control" type="checkbox" name="finish-reading-{{ uuid }}" id="finish-reading-{{ uuid }}"> <div class="modal-background"></div>
<div class="modal toggle-content hidden"> <div class="modal-card">
<div class="modal-background"></div> <header class="modal-card-head">
<div class="modal-card"> <p class="modal-card-title">Finish "{{ book.title }}"</p>
<header class="modal-card-head"> {% include 'snippets/toggle/close_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
<p class="modal-card-title">Finish "{{ book.title }}"</p> </header>
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %} {% active_read_through book user as readthrough %}
</header> <form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
{% active_read_through book user as readthrough %} <section class="modal-card-body">
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post"> {% csrf_token %}
<section class="modal-card-body"> <input type="hidden" name="id" value="{{ readthrough.id }}">
{% csrf_token %} <div class="field">
<input type="hidden" name="id" value="{{ readthrough.id }}"> <label class="label">
<div class="field"> Started reading
<label class="label"> <input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
Started reading </label>
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}"> </div>
<div class="field">
<label class="label">
Finished reading
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
</label>
</div>
</section>
<footer class="modal-card-foot">
<div class="columns">
<div class="column field">
<label for="post_status-{{ uuid }}">
<input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
Post to feed
</label> </label>
{% include 'snippets/privacy_select.html' %}
</div> </div>
<div class="field"> <div class="column">
<label class="label"> <button type="submit" class="button is-success">Save</button>
Finished reading {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
</label>
</div> </div>
</section> </div>
<footer class="modal-card-foot"> </footer>
<div class="columns"> </form>
<div class="column field">
<label for="post_status-{{ uuid }}">
<input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
Post to feed
</label>
{% include 'snippets/privacy_select.html' %}
</div>
<div class="column">
<button type="submit" class="button is-success">Save</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
</div>
</div>
</footer>
</form>
</div>
<label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
</div> </div>
<label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
</div> </div>

2
bookwyrm/templates/snippets/goal_form.html
View file

@ -28,7 +28,7 @@
<p> <p>
<button type="submit" class="button is-link">Set goal</button> <button type="submit" class="button is-link">Set goal</button>
{% if goal %} {% if goal %}
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-edit-goal" %} {% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="show-edit-goal" %}
{% endif %} {% endif %}
</p> </p>
</form> </form>

4
bookwyrm/templates/snippets/shelve_button.html
View file

@ -13,9 +13,9 @@
<span>Read</span> <span class="icon icon-check"></span> <span>Read</span> <span class="icon icon-check"></span>
</button> </button>
{% elif active_shelf.shelf.identifier == 'reading' %} {% elif active_shelf.shelf.identifier == 'reading' %}
{% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %} {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
{% elif active_shelf.shelf.identifier == 'to-read' %} {% elif active_shelf.shelf.identifier == 'to-read' %}
{% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %} {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Start reading" controls_text="start-reading" controls_uid=uuid %}
{% else %} {% else %}
<form name="shelve" action="/shelve/" method="post"> <form name="shelve" action="/shelve/" method="post">
{% csrf_token %} {% csrf_token %}

65
bookwyrm/templates/snippets/start_reading_modal.html
View file

@ -1,39 +1,36 @@
<div> <div class="modal hidden" id="start-reading-{{ uuid }}">
<input class="toggle-control" type="checkbox" name="start-reading-{{ uuid }}" id="start-reading-{{ uuid }}"> <div class="modal-background"></div>
<div class="modal toggle-content hidden"> <div class="modal-card">
<div class="modal-background"></div> <header class="modal-card-head">
<div class="modal-card"> <p class="modal-card-title">Start "{{ book.title }}"</p>
<header class="modal-card-head"> {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
<p class="modal-card-title">Start "{{ book.title }}"</p> </header>
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %} <form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
</header> <section class="modal-card-body">
<form name="start-reading" action="/start-reading/{{ book.id }}" method="post"> {% csrf_token %}
<section class="modal-card-body"> <div class="field">
{% csrf_token %} <label class="label">
<div class="field"> Started reading
<label class="label"> <input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
Started reading </label>
<input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}"> </div>
</section>
<footer class="modal-card-foot">
<div class="columns">
<div class="column field">
<label for="post_status_start-{{ uuid }}">
<input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
Post to feed
</label> </label>
{% include 'snippets/privacy_select.html' %}
</div> </div>
</section> <div class="column">
<footer class="modal-card-foot"> <button class="button is-success" type="submit">Save</button>
<div class="columns"> {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
<div class="column field">
<label for="post_status_start-{{ uuid }}">
<input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
Post to feed
</label>
{% include 'snippets/privacy_select.html' %}
</div>
<div class="column">
<button class="button is-success" type="submit">Save</button>
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
</div>
</div> </div>
</footer> </div>
</form> </footer>
</div> </form>
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
</div> </div>
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
</div> </div>

12
bookwyrm/templates/snippets/toggle/toggle_button.html
View file

@ -1,4 +1,12 @@
<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 %}> <button
type="button"
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% else %}toggle-button{% endif %}"
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
{% if hover %}data-hover-target="{{ hover }}"{% endif %}
{% if label %}aria-label="label"{% endif %}
aria-pressed="false"
>
{% if icon %} {% if icon %}
<span class="icon icon-{{ icon }}" title="{{ text }}"> <span class="icon icon-{{ icon }}" title="{{ text }}">
<span class="is-sr-only">{{ text }}</span> <span class="is-sr-only">{{ text }}</span>
@ -6,4 +14,4 @@
{% else %} {% else %}
{{ text }} {{ text }}
{% endif %} {% endif %}
</label> </button>