mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-15 21:31:26 +00:00
[profile] Various HTML fixes:
- Wrap block level elements within block level elements, not inline. - Avoid empty blocks. - Change `<hr>` in lists into allowed type of children. - Fix duplicated ID (some change that was not propagated across the template?). - Make the anchor optional in the navbar (interactive elements (`a`, `input`, `button`…) should not appear into other interactive elements). - Remove redundant `role` on main navigation. - Make the modal a modal with `role="dialog". - Use `button` instead of form-less `label`.
This commit is contained in:
Fabien Basmaison
parent
0d8eb959ea
commit
a05b14c338
7 changed files with 61 additions and 23 deletions
|
|
@ -5,7 +5,7 @@
|
|||
{% block dropdown-trigger %}{% endblock %}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<ul class="dropdown-content" role="menu" id="menu-options-{{ book.id }}">
|
||||
<ul class="dropdown-content" role="menu" id="menu-options-{{ uuid }}">
|
||||
{% block dropdown-list %}{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<div class="modal hidden" id="{{ controls_text }}-{{ controls_uid }}">
|
||||
<div
|
||||
role="dialog"
|
||||
class="modal hidden"
|
||||
id="{{ controls_text }}-{{ controls_uid }}"
|
||||
aria-labelledby="modal-card-title-{{ controls_uid }}"
|
||||
>
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head" tabindex="0" id="modal-title-{{ controls_text }}-{{ controls_uid }}">
|
||||
<h2 class="modal-card-title">
|
||||
<h2 class="modal-card-title" id="modal-card-title-{{ controls_uid }}">
|
||||
{% block modal-title %}{% endblock %}
|
||||
</h2>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
|
||||
|
|
@ -18,7 +23,7 @@
|
|||
</footer>
|
||||
{% block modal-form-close %}{% endblock %}
|
||||
</div>
|
||||
<label class="modal-close is-large" for="{{ controls_text }}-{{ controls_uid }}" aria-label="close"></label>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
{% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<meta name="twitter:image:alt" content="BookWyrm Logo">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar container" role="navigation" aria-label="main navigation">
|
||||
<nav class="navbar container" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img class="image logo" src="{% if site.logo_small %}/images/{{ site.logo_small }}{% else %}/static/images/logo-small.png{% endif %}" alt="Home page">
|
||||
|
|
@ -67,12 +67,20 @@
|
|||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
{% if request.user.is_authenticated %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link pulldown-menu" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
|
||||
<a
|
||||
href="{{ user.local_path }}"
|
||||
class="navbar-link pulldown-menu"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
tabindex="0"
|
||||
aria-haspopup="true"
|
||||
aria-controls="navbar-dropdown"
|
||||
>
|
||||
{% include 'snippets/avatar.html' with user=request.user %}
|
||||
{% include 'snippets/username.html' with user=request.user %}
|
||||
</p></div>
|
||||
{% include 'snippets/username.html' with user=request.user anchor=false %}
|
||||
</a>
|
||||
<ul class="navbar-dropdown" id="navbar-dropdown">
|
||||
<li>
|
||||
<a href="/direct-messages" class="navbar-item">
|
||||
|
|
@ -95,7 +103,7 @@
|
|||
</a>
|
||||
</li>
|
||||
{% if perms.bookwyrm.create_invites or perms.bookwyrm.edit_instance_settings%}
|
||||
<hr class="navbar-divider">
|
||||
<li class="navbar-divider" role="presentation"></li>
|
||||
{% endif %}
|
||||
{% if perms.bookwyrm.create_invites %}
|
||||
<li>
|
||||
|
|
@ -111,7 +119,7 @@
|
|||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<hr class="navbar-divider">
|
||||
<li class="navbar-divider" role="presentation"></li>
|
||||
<li>
|
||||
<a href="/logout" class="navbar-item">
|
||||
{% trans 'Log out' %}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<hr class="navbar-divider">
|
||||
<li class="navbar-divider" role="presentation"></li>
|
||||
<li>
|
||||
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
|
||||
{% csrf_token %}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@
|
|||
<div class="block">
|
||||
{% if status.status_type == 'Review' %}
|
||||
<div>
|
||||
{% if status.name %}
|
||||
<h3 class="title is-5 has-subtitle">
|
||||
{% if status.name %}<span dir="auto">{{ status.name }}</span><br>{% endif %}
|
||||
{{ status.name | escape }}
|
||||
</h3>
|
||||
<p class="subtitle">{% include 'snippets/stars.html' with rating=status.rating %}</p>
|
||||
{% endif %}
|
||||
{% include 'snippets/stars.html' with rating=status.rating %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
{% if status.content and status.status_type != 'GeneratedNote' and status.status_type != 'Boost' %}
|
||||
{% include 'snippets/trimmed_text.html' with full=status.content|safe %}
|
||||
{% endif %}
|
||||
{% if status.attachments %}
|
||||
{% if status.attachments.all %}
|
||||
<div class="block">
|
||||
<div class="columns">
|
||||
{% for attachment in status.attachments.all %}
|
||||
|
|
|
|||
|
|
@ -8,19 +8,29 @@
|
|||
{% with full|to_markdown|safe|truncatewords_html:60 as trimmed %}
|
||||
{% if trimmed != full %}
|
||||
<div id="hide-full-{{ uuid }}">
|
||||
<div class="content" id="trimmed-{{ uuid }}"><span dir="auto">{{ trimmed }}</span>
|
||||
{% trans "Show more" as button_text %}
|
||||
{% include 'snippets/toggle/open_button.html' with text=button_text controls_text="full" controls_uid=uuid class="is-small" %}
|
||||
<div class="content" id="trimmed-{{ uuid }}">
|
||||
<p dir="auto">{{ trimmed }}</p>
|
||||
|
||||
<div>
|
||||
{% trans "Show more" as button_text %}
|
||||
{% include 'snippets/toggle/open_button.html' with text=button_text controls_text="full" controls_uid=uuid class="is-small" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="full-{{ uuid }}" class="hidden">
|
||||
<div class="content"><span dir="auto">{{ full }}</span>
|
||||
{% trans "Show less" as button_text %}
|
||||
{% include 'snippets/toggle/close_button.html' with text=button_text controls_text="full" controls_uid=uuid class="is-small" %}
|
||||
<div class="content">
|
||||
<div dir="auto">{{ full }}</div>
|
||||
|
||||
<div>
|
||||
{% trans "Show less" as button_text %}
|
||||
{% include 'snippets/toggle/close_button.html' with text=button_text controls_text="full" controls_uid=uuid class="is-small" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="content"><span dir="auto">{{ full }}</span></div>
|
||||
<div class="content">
|
||||
<div dir="auto">{{ full }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,15 @@
|
|||
{% spaceless %}
|
||||
{% load bookwyrm_tags %}
|
||||
<a href="{{ user.local_path }}" class="user">{% if user.name %}{{ user.name }}{% else %}{{ user | username }}{% endif %}</a>{% if possessive %}'s{% endif %}{% if show_full and user.name or show_full and user.localname %} ({{ user.username }}){% endif %}
|
||||
|
||||
|
||||
<{% if anchor %}a href="{{ user.local_path }}"{% else %}span{% endif %} class="user"
|
||||
>
|
||||
{{ user.name|default:user|username }}
|
||||
</a>
|
||||
|
||||
{% if possessive %}'s{% endif %}
|
||||
|
||||
{% if show_full and user.name or show_full and user.localname %}
|
||||
({{ user.username }})
|
||||
{% endif %}
|
||||
{% endspaceless %}
|
||||
Loading…
Reference in a new issue