yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Front-end: On book page, click on cover to show/add image

Browse Source 
Closes #1009
This commit is contained in:
Joachim
2021-12-29 16:40:19 +01:00
parent 0c0bfc046d
commit f12ba8609f
5 changed files with 65 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
bookwyrm/templates/book/book.html
View File

@ -61,24 +61,34 @@
<div class="columns">
<div class="column is-one-fifth">
{% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
{% if not book.cover %}
{% if user_authenticated %}
{% trans "Click to add cover" as button_text %}
<button type="button" data-controls="add_cover_{{ book.id }}" data-focus-target="modal_title_add_cover_{{ book.id }}" aria-pressed="false">
{% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' text_append=button_text %}
</button>
{% include 'book/cover_add_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %}
{% if request.GET.cover_error %}
<p class="help is-danger">{% trans "Failed to load cover" %}</p>
{% endif %}
{% else %}
{% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
{% endif %}
{% endif %}
{% if book.cover %}
<button type="button" data-modal-open="cover_show_modal" aria-haspopup="dialog"class="cover-container is-h-m-mobile">
{% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
</button>
{% include 'book/cover_show_modal.html' with book=book id="cover_show_modal" %}
{% endif %}
{% include 'snippets/rate_action.html' with user=request.user book=book %}
<div class="mb-3">
{% include 'snippets/shelve_button/shelve_button.html' %}
</div>
{% if user_authenticated and not book.cover %}
<div class="block">
{% trans "Add cover" as button_text %}
{% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="add_cover" controls_uid=book.id focus="modal_title_add_cover" class="is-small" %}
{% include 'book/cover_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %}
{% if request.GET.cover_error %}
<p class="help is-danger">{% trans "Failed to load cover" %}</p>
{% endif %}
</div>
{% endif %}
<section class="is-clipped">
{% with book=book %}
<div class="content">

0
bookwyrm/templates/book/cover_modal.html → bookwyrm/templates/book/cover_add_modal.html
View File

17
bookwyrm/templates/book/cover_show_modal.html Normal file
View File

@ -0,0 +1,17 @@
{% load i18n %}
{% load static %}
<div class="modal" id="{{ id }}">
<div class="modal-background" data-modal-close></div><!-- modal background -->
<div class="modal-card is-align-items-center" role="dialog" aria-modal="true" tabindex="-1" aria-label="{% trans 'Book cover preview' %}">
<div class="cover-container">
<img
class="book-cover"
src="{% get_media_prefix %}{{ book.cover }}"
itemprop="thumbnailUrl"
alt=""
/>
</div>
</div>
<button type="button" data-modal-close class="modal-close is-large" aria-label="{% trans 'Close' %}"></button>
</div>

3
bookwyrm/templates/snippets/book_cover.html
View File

@ -62,6 +62,9 @@
>
<figcaption class="cover-caption">
<p>{{ book.alt_text }}</p>
{% if text_append %}
<p>{{ text_append }}</p>
{% endif %}
</figcaption>
</figure>
{% endif %}