Merge branch 'main' into production

This commit is contained in:
Mouse Reeve 2021-12-30 09:30:57 -08:00
commit 82513197fd
5 changed files with 87 additions and 18 deletions

View file

@ -30,6 +30,9 @@ button {
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
/* Generalizes pointer cursor */
cursor: pointer;
}
button::-moz-focus-inner {
@ -64,6 +67,14 @@ button::-moz-focus-inner {
overflow-x: auto;
}
.modal-card {
pointer-events: none;
}
.modal-card > * {
pointer-events: all;
}
/* stylelint-disable no-descending-specificity */
.modal-card:focus {
outline-style: auto;
@ -148,6 +159,30 @@ button::-moz-focus-inner {
display: inline !important;
}
button .button-invisible-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1rem;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: rgba(0, 0, 0, 0.66);
color: white;
opacity: 0;
transition: opacity 0.2s ease;
}
button:hover .button-invisible-overlay,
button:active .button-invisible-overlay,
button:focus-visible .button-invisible-overlay {
opacity: 1;
}
/** File input styles
******************************************************************************/
@ -429,6 +464,8 @@ details.dropdown .dropdown-menu a:focus-visible {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1em;
white-space: initial;
text-align: center;
}
@ -695,11 +732,7 @@ ol.ordered-list li::before {
@media only screen and (min-width: 769px) {
.books-grid {
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
}
.books-grid > .is-big {
padding: 1.5rem 1.5rem 0;
grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
}
}

View file

@ -249,7 +249,7 @@
<div class="column is-10 is-offset-1">
<div class="books-grid">
{% for book in books %}
{% if book.id in best_ratings_books_ids %}
{% if books_total > 12 and book.id in best_ratings_books_ids %}
<a href="{{ book.local_path }}" class="has-text-centered is-big has-text-success-dark">
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto' size='xxlarge' %}
<span class="book-title is-serif is-size-5">

View file

@ -61,24 +61,48 @@
<div class="columns">
<div class="column is-one-fifth">
{% if not book.cover %}
{% if user_authenticated %}
<button type="button" data-controls="add_cover_{{ book.id }}" data-focus-target="modal_title_add_cover_{{ book.id }}" aria-pressed="false" class="cover-container no-cover is-h-m-mobile">
<img
class="book-cover"
src="{% static "images/no_cover.jpg" %}"
alt=""
aria-hidden="true"
>
<span class="cover-caption">
<span>{{ book.alt_text }}</span>
<span>{% trans "Click to add cover" %}</span>
</span>
<span class="button-invisible-overlay has-text-centered">
{% trans "Click to add cover" %}
</span>
</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 book=book cover_class='is-h-m-mobile' %}
{% endif %}
{% endif %}
{% if book.cover %}
<button type="button" data-modal-open="cover_show_modal" class="cover-container is-h-m-mobile is-relative">
{% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
<span class="button-invisible-overlay has-text-centered">
{% trans "Click to enlarge" %}
</span>
</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">

View file

@ -0,0 +1,12 @@
{% 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>