mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-12-22 16:16:39 +00:00
starts replacing pure css buttons with javascript buttons
RIP, but it was time
This commit is contained in:
Mouse Reeve
parent
2e043f9252
commit
afdf5fc8ec
11 changed files with 191 additions and 213 deletions
|
|
@ -14,10 +14,13 @@
|
|||
}
|
||||
|
||||
/* --- TOGGLES --- */
|
||||
[aria-pressed=true] {
|
||||
.toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover {
|
||||
background-color: hsl(171, 100%, 41%);
|
||||
color: white;
|
||||
}
|
||||
.hide-active[aria-pressed=true] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input.toggle-control {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -52,33 +52,51 @@ function setDisplay(el) {
|
|||
|
||||
function toggleAction(e) {
|
||||
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) {
|
||||
var target = document.getElementById(targetId);
|
||||
if (pressed) {
|
||||
target.className = target.className.replace('hidden', '');
|
||||
removeClass(target, 'hidden');
|
||||
addClass(target, 'is-active');
|
||||
} else {
|
||||
target.className += ' hidden';
|
||||
addClass(target, 'hidden');
|
||||
removeClass(target, 'is-active');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// set hover, if appropriate
|
||||
var hover = e.currentTarget.getAttribute('data-hover-target');
|
||||
var hover = el.getAttribute('data-hover-target');
|
||||
if (hover) {
|
||||
document.getElementById(hover).focus();
|
||||
}
|
||||
|
||||
// set checkbox, if appropriate
|
||||
var checkbox = e.currentTarget.getAttribute('data-controls-checkbox');
|
||||
var checkbox = el.getAttribute('data-controls-checkbox');
|
||||
if (checkbox) {
|
||||
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) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
|
|
|
|||
|
|
@ -94,30 +94,20 @@
|
|||
{% 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 %}
|
||||
<div>
|
||||
<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>
|
||||
{% 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" %}
|
||||
|
||||
<div>
|
||||
<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 }}">
|
||||
{% csrf_token %}
|
||||
<p class="fields is-grouped">
|
||||
<label class="label"for="id_description">Description:</label>
|
||||
<textarea name="description" cols="None" rows="None" class="textarea" id="id_description"></textarea>
|
||||
</p>
|
||||
<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 class="box hidden" id="add-description-{{ book.id }}">
|
||||
<form name="add-description" method="POST" action="/add-description/{{ book.id }}">
|
||||
{% csrf_token %}
|
||||
<p class="fields is-grouped">
|
||||
<label class="label"for="id_description">Description:</label>
|
||||
<textarea name="description" cols="None" rows="None" class="textarea" id="id_description"></textarea>
|
||||
</p>
|
||||
<div class="field">
|
||||
<button class="button is-primary" type="submit">Save</button>
|
||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="add-description" controls_uid=book.id hide_inactive=True %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -152,23 +142,15 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
<div class="block">
|
||||
<div>
|
||||
<input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked>
|
||||
<div class="toggle-content hidden">
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" class="toggle-control" id="add-readthrough" name="add-readthrough-form">
|
||||
<div class="toggle-content hidden box">
|
||||
<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>
|
||||
{% include 'snippets/toggle/open_button.html' with text="Add read dates" controls_text="add-readthrough" %}
|
||||
<div class="toggle-content hidden box" id="add-readthrough">
|
||||
<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/close_button.html' with text="Cancel" controls_text="add-readthrough" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,29 +6,21 @@
|
|||
{% if user == request.user %}
|
||||
<div class="block">
|
||||
{% if goal %}
|
||||
<input type="radio" class="toggle-control" name="edit-goal" id="hide-edit-goal" checked>
|
||||
<div class="toggle-content hidden">
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Edit goal" controls_text="show-edit-goal" %}
|
||||
</div>
|
||||
{% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="block">
|
||||
<input type="radio" class="toggle-control" name="edit-goal" id="show-edit-goal" data-hover-target="edit-form-header">
|
||||
<div class="toggle-content{% if goal %} hidden{% endif %}">
|
||||
{% now 'Y' as year %}
|
||||
<section class="card">
|
||||
<header class="card-header">
|
||||
<h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header">
|
||||
<span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
|
||||
</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>
|
||||
{% now 'Y' as year %}
|
||||
<section class="card {% if goal %}hidden{% endif %}" id="show-edit-goal">
|
||||
<header class="card-header">
|
||||
<h2 class="card-header-title has-background-primary has-text-white" tabindex="0" id="edit-form-header">
|
||||
<span class="icon icon-book is-size-3 mr-2" aria-hidden="true"></span> {{ year }} reading goal
|
||||
</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 %}
|
||||
</section>
|
||||
{% include 'snippets/goal_form.html' with goal=goal year=year %}
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,16 +27,11 @@
|
|||
<p>
|
||||
Didn't find what you were looking for?
|
||||
</p>
|
||||
|
||||
<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>
|
||||
{% include 'snippets/toggle/open_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input class="toggle-control" type="radio" name="more-results" id="more-results" {% if not local_results.results %}checked{% endif %}>
|
||||
<div class="toggle-content hidden">
|
||||
<div class="{% if local_results.results %}hidden{% endif %}" id="more-results">
|
||||
{% for result_set in book_results|slice:"1:" %}
|
||||
{% if result_set.results %}
|
||||
<section class="block">
|
||||
|
|
@ -61,8 +56,9 @@
|
|||
</section>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,38 +31,30 @@
|
|||
|
||||
{% if is_self %}
|
||||
<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">
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
|
||||
</div>
|
||||
{% include 'snippets/toggle/open_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form" %}
|
||||
</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">
|
||||
<h2 class="title is-4">Create new shelf</h2>
|
||||
<form name="create-shelf" action="/create-shelf/" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="user" value="{{ request.user.id }}">
|
||||
<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 class="hidden box mb-5" id="create-shelf-form">
|
||||
<h2 class="title is-4">Create new shelf</h2>
|
||||
<form name="create-shelf" action="/create-shelf/" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="user" value="{{ request.user.id }}">
|
||||
<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>
|
||||
</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 class="block columns">
|
||||
|
|
@ -76,40 +68,34 @@
|
|||
</div>
|
||||
{% if is_self %}
|
||||
<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">
|
||||
{% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
|
||||
</div>
|
||||
{% include 'snippets/toggle/open_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<input type="radio" id="edit-shelf-form-show" name="edit-shelf-form" class="toggle-control">
|
||||
<div class="toggle-content hidden">
|
||||
<div class="box mb-5">
|
||||
<h2 class="title is-4">Edit shelf</h2>
|
||||
<form name="create-shelf" action="/edit-shelf/{{ shelf.id }}" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="user" value="{{ request.user.id }}">
|
||||
{% if shelf.editable %}
|
||||
<div class="field">
|
||||
<label class="label" for="id_name">Name:</label>
|
||||
<input type="text" name="name" maxlength="100" class="input" required="true" value="{{ shelf.name }}" id="id_name">
|
||||
</div>
|
||||
{% else %}
|
||||
<input type="hidden" name="name" required="true" value="{{ shelf.name }}">
|
||||
{% endif %}
|
||||
<div class="hidden box mb-5" id="edit-shelf-form">
|
||||
<h2 class="title is-4">Edit shelf</h2>
|
||||
<form name="create-shelf" action="/edit-shelf/{{ shelf.id }}" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="user" value="{{ request.user.id }}">
|
||||
{% if shelf.editable %}
|
||||
<div class="field">
|
||||
<label class="label" for="id_name">Name:</label>
|
||||
<input type="text" name="name" maxlength="100" class="input" required="true" value="{{ shelf.name }}" id="id_name">
|
||||
</div>
|
||||
{% else %}
|
||||
<input type="hidden" name="name" required="true" value="{{ shelf.name }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="label">
|
||||
<p>Shelf privacy:</p>
|
||||
{% include 'snippets/privacy_select.html' with no_label=True current=shelf.privacy %}
|
||||
</label>
|
||||
<div class="field is-grouped">
|
||||
<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" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<label class="label">
|
||||
<p>Shelf privacy:</p>
|
||||
{% include 'snippets/privacy_select.html' with no_label=True current=shelf.privacy %}
|
||||
</label>
|
||||
<div class="field is-grouped">
|
||||
<button class="button is-primary" type="submit">Update shelf</button>
|
||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-shelf-form" %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
|
|
|
|||
|
|
@ -1,49 +1,45 @@
|
|||
{% load bookwyrm_tags %}
|
||||
<div>
|
||||
<input class="toggle-control" type="checkbox" name="finish-reading-{{ uuid }}" id="finish-reading-{{ uuid }}">
|
||||
<div class="modal toggle-content hidden">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Finish "{{ book.title }}"</p>
|
||||
{% 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">
|
||||
<section class="modal-card-body">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
||||
<div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Finish "{{ book.title }}"</p>
|
||||
{% include 'snippets/toggle/close_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">
|
||||
<section class="modal-card-body">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
||||
</label>
|
||||
</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>
|
||||
{% include 'snippets/privacy_select.html' %}
|
||||
</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 class="column">
|
||||
<button type="submit" class="button is-success">Save</button>
|
||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
|
||||
</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>
|
||||
{% 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>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<p>
|
||||
<button type="submit" class="button is-link">Set goal</button>
|
||||
{% 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 %}
|
||||
</p>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
<span>Read</span> <span class="icon icon-check"></span>
|
||||
</button>
|
||||
{% 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' %}
|
||||
{% 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 %}
|
||||
<form name="shelve" action="/shelve/" method="post">
|
||||
{% csrf_token %}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,36 @@
|
|||
<div>
|
||||
<input class="toggle-control" type="checkbox" name="start-reading-{{ uuid }}" id="start-reading-{{ uuid }}">
|
||||
<div class="modal toggle-content hidden">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Start "{{ book.title }}"</p>
|
||||
{% 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">
|
||||
{% csrf_token %}
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||
<div class="modal hidden" id="start-reading-{{ uuid }}">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Start "{{ book.title }}"</p>
|
||||
{% 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">
|
||||
{% csrf_token %}
|
||||
<div class="field">
|
||||
<label class="label">
|
||||
Started reading
|
||||
<input type="date" name="start_date" class="input" id="start_id_start_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_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>
|
||||
</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>
|
||||
{% 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 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>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<span class="icon icon-{{ icon }}" title="{{ text }}">
|
||||
<span class="is-sr-only">{{ text }}</span>
|
||||
|
|
@ -6,4 +14,4 @@
|
|||
{% else %}
|
||||
{{ text }}
|
||||
{% endif %}
|
||||
</label>
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue