Merge pull request #2460 from viviicat/visual-tweaks

Visual tweaks
This commit is contained in:
Mouse Reeve 2022-11-26 20:38:58 -08:00 committed by GitHub
commit 7eb267fbd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 44 additions and 28 deletions

View file

@ -140,6 +140,10 @@ button:focus-visible .button-invisible-overlay {
opacity: 1;
}
button.button-paragraph {
vertical-align: middle;
}
/** States
******************************************************************************/

View file

@ -81,7 +81,19 @@ details.dropdown .dropdown-menu a:focus-visible {
details.details-panel {
box-shadow: 0 0 0 1px $border;
transition: box-shadow 0.2s ease;
padding: 0.75rem;
padding: 0;
> * {
padding: 0.75rem;
}
summary {
position: relative;
.details-close {
padding: 0.75rem;
}
}
}
details[open].details-panel,
@ -89,10 +101,6 @@ details.details-panel:hover {
box-shadow: 0 0 0 1px $border;
}
details.details-panel summary {
position: relative;
}
details summary .details-close {
position: absolute;
right: 0;

View file

@ -53,7 +53,7 @@
{% trans "Share this page" %}
</span>
</summary>
<div class="columns mt-3">
<div class="columns">
<div class="column is-three-fifths is-offset-one-fifth">
{% if year_key %}

View file

@ -144,7 +144,7 @@
{% for book in books %}
{% with book=book|author_edition:author %}
<div class="column is-one-fifth-tablet is-half-mobile is-flex is-flex-direction-column">
<div class="is-flex-grow-1">
<div class="is-flex-grow-1 mb-3">
{% include 'landing/small-book.html' with book=book %}
</div>
{% include 'snippets/shelve_button/shelve_button.html' with book=book %}

View file

@ -135,7 +135,7 @@
{% trans "View on OpenLibrary" %}
</a>
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
<button class="button is-small" type="button" data-modal-open="openlibrary_sync">
<button class="button is-small button-paragraph" type="button" data-modal-open="openlibrary_sync">
<span class="icon icon-download" title="{{ button_text }}"></span>
<span class="is-sr-only-mobile">{{ button_text }}</span>
</button>
@ -150,7 +150,7 @@
</a>
{% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
<button class="button is-small" type="button" data-modal-open="inventaire_sync">
<button class="button is-small button-paragraph" type="button" data-modal-open="inventaire_sync">
<span class="icon icon-download" title="{{ button_text }}"></span>
<span class="is-sr-only-mobile">{{ button_text }}</span>
</button>
@ -189,15 +189,15 @@
{% if user_authenticated and can_edit_book and not book|book_description %}
{% trans 'Add Description' as button_text %}
{% include 'snippets/toggle/open_button.html' with text=button_text controls_text="add_description" controls_uid=book.id focus="id_description" hide_active=True id="hide_description" %}
{% include 'snippets/toggle/open_button.html' with class="mb-2" text=button_text controls_text="add_description" controls_uid=book.id focus="id_description" hide_active=True id="hide_description" %}
<div class="box is-hidden" id="add_description_{{ book.id }}">
<form name="add-description" method="POST" action="{% url "add-description" book.id %}">
{% csrf_token %}
<p class="fields is-grouped">
<div class="field">
<label class="label" for="id_description_{{ book.id }}">{% trans "Description:" %}</label>
<textarea name="description" cols="None" rows="None" class="textarea" id="id_description_{{ book.id }}"></textarea>
</p>
</div>
<div class="field">
<button class="button is-primary" type="submit">{% trans "Save" %}</button>
{% trans "Cancel" as button_text %}
@ -231,7 +231,7 @@
{% for shelf in user_shelfbooks %}
<li class="box">
<a href="{{ shelf.shelf.local_path }}">{{ shelf.shelf.name }}</a>
<div class="mb-3">
<div class="is-pulled-right">
{% include 'snippets/shelf_selector.html' with shelf=shelf.shelf class="is-small" readthrough=readthrough %}
</div>
</li>

View file

@ -81,7 +81,7 @@
{% include 'snippets/form_errors.html' with errors_list=form.languages.errors id="desc_languages" %}
</div>
<div>
<div class="field">
<label class="label" for="id_add_subjects">
{% trans "Subjects:" %}
</label>

View file

@ -2,7 +2,7 @@
{% load i18n %}
{% block filter %}
<label class="label mt-2 mb-1">Status types</label>
<label class="label mb-1">Status types</label>
<div class="is-flex is-flex-direction-row is-flex-direction-column-mobile">
{% for name, value in feed_status_types_options %}

View file

@ -12,12 +12,16 @@
</p>
</div>
<div class="column is-narrow is-flex">
<div class="column is-narrow is-flex field is-grouped">
{% if request.user == list.user %}
<div class="control">
{% trans "Edit List" as button_text %}
{% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit_list" focus="edit_list_header" %}
</div>
{% endif %}
{% include "lists/bookmark_button.html" with list=list %}
<div class="control">
{% include "lists/bookmark_button.html" with list=list %}
</div>
</div>
</header>

View file

@ -51,7 +51,7 @@
{% endif %}
{% if not items.object_list.exists %}
<p>{% trans "This list is currently empty" %}</p>
<p class="block">{% trans "This list is currently empty." %}</p>
{% else %}
<ol start="{{ items.start_index }}" class="ordered-list">
{% for item in items %}

View file

@ -44,7 +44,7 @@
{% csrf_token %}
<p>{% trans "Scan the QR code with your authentication app and then enter the code from your app below to confirm your app is set up." %}</p>
<div class="columns">
<section class="column is-narrow">
<section class="column">
<figure class="m-4" id="qrcode">{{ qrcode | safe }}</figure>
<details class="details-panel box">
<summary>

View file

@ -58,7 +58,7 @@
<span class="details-close icon icon-x" aria-hidden="true"></span>
</summary>
<div class="mt-5">
<div>
<div class="is-flex is-flex-direction-row-reverse">
<ul class="is-flex-grow-1">
{% for result in result_set.results %}

View file

@ -145,7 +145,7 @@
<div class="block content">
<h2 class="title is-4">{% trans "Current Rules" %}</h2>
<details class="details-panel">
<details class="details-panel box">
<summary>
<span class="title is-5" role="heading" aria-level="3">
{% trans "Show rules" %} ({{ rules.count }})

View file

@ -40,23 +40,23 @@
</h2>
</header>
<div class="column is-narrow">
<button type="button" class="button" data-modal-open="{{ domain_modal }}">
<button type="button" class="button is-small" data-modal-open="{{ domain_modal }}">
<span class="icon icon-pencil m-0-mobile" aria-hidden="treu"></span>
<span class="is-sr-only-mobile">{% trans "Set display name" %}</span>
</button>
</div>
</div>
<div class="block">
<details class="details-panel">
<details class="details-panel box">
<summary>
<span role="heading" aria-level="3" class="title is-6 mb-0">
<span role="heading" aria-level="3" class="title is-6">
{% trans "View links" %}
({{ domain.links.count }})
</span>
<span class="details-close icon icon-x" aria-hidden="true"></span>
</summary>
<div class="table-container mt-4">
<div class="table-container pt-0">
{% include "settings/link_domains/link_table.html" with links=domain.links.all|slice:10 %}
</div>
</details>

View file

@ -134,7 +134,7 @@
{% endif %}
</div>
<div class="block">
<div class="block mt-2">
{% include 'shelf/edit_shelf_form.html' with controls_text="edit_shelf_form" %}
</div>

View file

@ -25,7 +25,7 @@
<span class="details-close icon icon-x is-{{ size|default:'normal' }}" aria-hidden="true"></span>
</summary>
<div class="mt-3">
<div>
<form id="filters" method="{{ method|default:'get' }}" action="{{ action|default:request.path }}">
{% if method == 'post' %}
{% csrf_token %}
@ -34,7 +34,7 @@
{% if sort %}
<input type="hidden" name="sort" value="{{ sort }}">
{% endif %}
<div class="mt-3 columns filters-fields is-align-items-stretch">
<div class="columns filters-fields is-align-items-stretch">
{% block filter_fields %}
{% endblock %}
</div>