yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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>

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

@ -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 %}

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

@ -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>

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 %}
<span class="icon icon-{{ icon }}" title="{{ text }}">
<span class="is-sr-only">{{ text }}</span>
@ -6,4 +14,4 @@
{% else %}
{{ text }}
{% endif %}
</label>
</button>