mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-09-27 05:50:05 +00:00
Readthrough interactions
This commit is contained in:
Mouse Reeve
parent
f7e3cbda84
commit
47d5b907ac
11 changed files with 165 additions and 134 deletions
|
|
@ -18,7 +18,7 @@
|
||||||
background-color: hsl(171, 100%, 41%);
|
background-color: hsl(171, 100%, 41%);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.hide-active[aria-pressed=true] {
|
.hide-active[aria-pressed=true], .hide-active {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -60,13 +60,14 @@ function toggleAction(e) {
|
||||||
|
|
||||||
if (targetId) {
|
if (targetId) {
|
||||||
var target = document.getElementById(targetId);
|
var target = document.getElementById(targetId);
|
||||||
if (pressed) {
|
addRemoveClass(target, 'hidden', !pressed);
|
||||||
removeClass(target, 'hidden');
|
addRemoveClass(target, 'is-active', pressed);
|
||||||
addClass(target, 'is-active');
|
}
|
||||||
} else {
|
|
||||||
addClass(target, 'hidden');
|
// show/hide container
|
||||||
removeClass(target, 'is-active');
|
var container = document.getElementById('hide-' + targetId);
|
||||||
}
|
if (!!container) {
|
||||||
|
addRemoveClass(container, 'hidden', pressed);
|
||||||
}
|
}
|
||||||
|
|
||||||
// set checkbox, if appropriate
|
// set checkbox, if appropriate
|
||||||
|
|
@ -82,13 +83,23 @@ function toggleAction(e) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addRemoveClass(el, classname, bool) {
|
||||||
|
if (bool) {
|
||||||
|
addClass(el, classname)
|
||||||
|
} else {
|
||||||
|
removeClass(el, classname)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function addClass(el, classname) {
|
function addClass(el, classname) {
|
||||||
el.className = el.className.split(' ').concat(classname).join(' ');
|
el.className = el.className.split(' ').concat(classname).join(' ');
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeClass(el, className) {
|
function removeClass(el, className) {
|
||||||
var classes = el.className.split(' ');
|
var classes = []
|
||||||
|
if (el.className) {
|
||||||
|
var classes = el.className.split(' ');
|
||||||
|
}
|
||||||
const idx = classes.indexOf(className);
|
const idx = classes.indexOf(className);
|
||||||
if (idx > -1) {
|
if (idx > -1) {
|
||||||
classes.splice(idx, 1);
|
classes.splice(idx, 1);
|
||||||
|
|
|
||||||
23
bookwyrm/templates/snippets/components/modal.html
Normal file
23
bookwyrm/templates/snippets/components/modal.html
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<div class="modal hidden" id="{{ controls_text }}-{{ controls_uid }}">
|
||||||
|
<div class="modal-background"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<h2 class="modal-card-title">
|
||||||
|
{% block modal-title %}{% endblock %}
|
||||||
|
</h2>
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{% block modal-form-open %}{% endblock %}
|
||||||
|
|
||||||
|
{% block modal-body %}{% endblock %}
|
||||||
|
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
{% block modal-footer %}{% endblock %}
|
||||||
|
</footer>
|
||||||
|
{% block modal-form-close %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
<label class="modal-close is-large" for="{{ controls_text }}-{{ readthrough.id }}" aria-label="close"></label>
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
|
||||||
|
</div>
|
||||||
|
|
||||||
13
bookwyrm/templates/snippets/delete_readthrough_modal.html
Normal file
13
bookwyrm/templates/snippets/delete_readthrough_modal.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
{% extends 'snippets/components/modal.html' %}
|
||||||
|
{% block modal-title %}Delete this read-though?{% endblock %}
|
||||||
|
|
||||||
|
{% block modal-footer %}
|
||||||
|
<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
|
||||||
|
{% csrf_token %}
|
||||||
|
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||||
|
<button class="button is-danger" type="submit">
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||||
|
</form>
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1,45 +1,46 @@
|
||||||
{% load bookwyrm_tags %}
|
{% extends 'snippets/components/modal.html' %}
|
||||||
<div class="modal toggle-content hidden" id="finish-reading-{{ uuid }}">
|
|
||||||
<div class="modal-background"></div>
|
{% block modal-title %}
|
||||||
<div class="modal-card">
|
Finish "<em>{{ book.title }}</em>"
|
||||||
<header class="modal-card-head">
|
{% endblock %}
|
||||||
<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>
|
{% block modal-form-open %}
|
||||||
{% active_read_through book user as readthrough %}
|
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
|
||||||
<form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
|
{% endblock %}
|
||||||
<section class="modal-card-body">
|
|
||||||
{% csrf_token %}
|
{% block modal-body %}
|
||||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
<section class="modal-card-body">
|
||||||
<div class="field">
|
{% csrf_token %}
|
||||||
<label class="label">
|
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
||||||
Started reading
|
<div class="field">
|
||||||
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
<label class="label">
|
||||||
</label>
|
Started reading
|
||||||
</div>
|
<input type="date" name="start_date" class="input" id="finish_id_start_date-{{ uuid }}" value="{{ readthrough.start_date | date:"Y-m-d" }}">
|
||||||
<div class="field">
|
</label>
|
||||||
<label class="label">
|
</div>
|
||||||
Finished reading
|
<div class="field">
|
||||||
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
<label class="label">
|
||||||
</label>
|
Finished reading
|
||||||
</div>
|
<input type="date" name="finish_date" class="input" id="id_finish_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||||
</section>
|
</label>
|
||||||
<footer class="modal-card-foot">
|
</div>
|
||||||
<div class="columns">
|
</section>
|
||||||
<div class="column field">
|
{% endblock %}
|
||||||
<label for="post_status-{{ uuid }}">
|
|
||||||
<input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
|
{% block modal-footer %}
|
||||||
Post to feed
|
<div class="columns">
|
||||||
</label>
|
<div class="column field">
|
||||||
{% include 'snippets/privacy_select.html' %}
|
<label for="post_status-{{ uuid }}">
|
||||||
</div>
|
<input type="checkbox" name="post-status" class="checkbox" id="post_status-{{ uuid }}" checked>
|
||||||
<div class="column">
|
Post to feed
|
||||||
<button type="submit" class="button is-success">Save</button>
|
</label>
|
||||||
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
|
{% include 'snippets/privacy_select.html' %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="column">
|
||||||
</footer>
|
<button type="submit" class="button is-success">Save</button>
|
||||||
</form>
|
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
|
||||||
</div>
|
</div>
|
||||||
<label class="modal-close is-large" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
{% block modal-form-close %}</form>{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
{% load humanize %}
|
{% load humanize %}
|
||||||
<div class="content block">
|
<div class="content block">
|
||||||
<input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="show-readthrough-{{ readthrough.id }}" checked>
|
<div id="hide-edit-readthrough-{{ readthrough.id }}">
|
||||||
<div class="toggle-content hidden">
|
|
||||||
<dl class="mb-1">
|
<dl class="mb-1">
|
||||||
{% if readthrough.start_date %}
|
{% if readthrough.start_date %}
|
||||||
<div class="is-flex">
|
<div class="is-flex">
|
||||||
|
|
@ -16,48 +15,24 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</dl>
|
</dl>
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control">
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box hidden" id="edit-readthrough-{{ readthrough.id }}">
|
||||||
|
<form name="edit-readthrough" action="/edit-readthrough" method="post">
|
||||||
|
{% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
|
||||||
<div class="field is-grouped">
|
<div class="field is-grouped">
|
||||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
<button class="button is-primary" type="submit">Save</button>
|
||||||
{% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
{% include 'snippets/toggle/close_button.html' with text="Cancel" controls_text="edit-readthrough" controls_uid=readthrough.id %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="block">
|
|
||||||
<input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="edit-readthrough-{{ readthrough.id }}">
|
|
||||||
<div class="toggle-content hidden">
|
|
||||||
<div class="box">
|
|
||||||
<form name="edit-readthrough" action="/edit-readthrough" method="post">
|
|
||||||
{% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
|
|
||||||
<div class="field is-grouped">
|
|
||||||
<button class="button is-primary" type="submit">Save</button>
|
|
||||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
|
|
||||||
<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">Delete this read-though?</p>
|
|
||||||
<label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
|
|
||||||
</header>
|
|
||||||
<footer class="modal-card-foot">
|
|
||||||
<form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
|
|
||||||
{% csrf_token %}
|
|
||||||
<input type="hidden" name="id" value="{{ readthrough.id }}">
|
|
||||||
<button class="button is-danger is-light" type="submit">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
|
||||||
</form>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete-readthrough" controls_uid=readthrough.id %}
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
<li role="menuitem">
|
<li role="menuitem">
|
||||||
{% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
|
{% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
|
||||||
<div class="dropdown-item pt-0 pb-0">
|
<div class="dropdown-item pt-0 pb-0">
|
||||||
{% 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 %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
|
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
|
||||||
|
|
@ -59,7 +59,11 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
|
|
||||||
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
|
{% include 'snippets/start_reading_modal.html' with book=active_shelf.book controls_text="start-reading" controls_uid=uuid %}
|
||||||
|
|
||||||
|
{% latest_read_through book request.user as readthrough %}
|
||||||
|
{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book controls_text="finish-reading" controls_uid=uuid readthrough=readthrough %}
|
||||||
|
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,38 @@
|
||||||
<div class="modal hidden" id="start-reading-{{ uuid }}">
|
{% extends 'snippets/components/modal.html' %}
|
||||||
<div class="modal-background"></div>
|
|
||||||
<div class="modal-card">
|
{% block modal-title %}
|
||||||
<header class="modal-card-head">
|
Start "<em>{{ book.title }}</em>"
|
||||||
<p class="modal-card-title">Start "{{ book.title }}"</p>
|
{% endblock %}
|
||||||
{% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
|
|
||||||
</header>
|
{% block modal-form-open %}
|
||||||
<form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
|
<form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
|
||||||
<section class="modal-card-body">
|
{% endblock %}
|
||||||
{% csrf_token %}
|
|
||||||
<div class="field">
|
{% block modal-body %}
|
||||||
<label class="label">
|
<section class="modal-card-body">
|
||||||
Started reading
|
{% csrf_token %}
|
||||||
<input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
<div class="field">
|
||||||
</label>
|
<label class="label">
|
||||||
</div>
|
Started reading
|
||||||
</section>
|
<input type="date" name="start_date" class="input" id="start_id_start_date-{{ uuid }}" value="{% now "Y-m-d" %}">
|
||||||
<footer class="modal-card-foot">
|
</label>
|
||||||
<div class="columns">
|
</div>
|
||||||
<div class="column field">
|
</section>
|
||||||
<label for="post_status_start-{{ uuid }}">
|
{% endblock %}
|
||||||
<input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
|
|
||||||
Post to feed
|
{% block modal-footer %}
|
||||||
</label>
|
<div class="columns">
|
||||||
{% include 'snippets/privacy_select.html' %}
|
<div class="column field">
|
||||||
</div>
|
<label for="post_status_start-{{ uuid }}">
|
||||||
<div class="column">
|
<input type="checkbox" name="post-status" class="checkbox" id="post_status_start-{{ uuid }}" checked>
|
||||||
<button class="button is-success" type="submit">Save</button>
|
Post to feed
|
||||||
{% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
|
</label>
|
||||||
</div>
|
{% include 'snippets/privacy_select.html' %}
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
<div class="column">
|
||||||
</form>
|
<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>
|
||||||
<label class="modal-close is-large" for="start-reading-{{ uuid }}" aria-label="close"></label>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
{% block modal-form-close %}</form>{% endblock %}
|
||||||
|
|
|
||||||
1
bookwyrm/templates/snippets/toggle/close_button.html
Normal file
1
bookwyrm/templates/snippets/toggle/close_button.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with button_type='hide-inactive' %}
|
||||||
1
bookwyrm/templates/snippets/toggle/open_button.html
Normal file
1
bookwyrm/templates/snippets/toggle/open_button.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{% include 'snippets/toggle/toggle_button.html' with button_type='hide-active' %}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="toggle-control button {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
|
class="toggle-control {% if not nonbutton %}button{% endif %} {{ class }} {% if button_type %}{{ button_type }}{% endif %}"
|
||||||
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
|
data-controls="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"
|
||||||
{% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
|
{% if focus %}data-focus-target="{{ focus }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
|
||||||
{% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
|
{% if checkbox %}data-controls-checkbox="{{ checkbox }}{% if controls_uid %}-{{ controls_uid }}{% endif %}"{% endif %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue