mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-12-16 21:26:33 +00:00
Code Issues Projects Releases Wiki Activity

[profile] Various HTML fixes:

Browse source 
- 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 2021-03-03 20:10:09 +01:00
parent 0d8eb959ea
commit a05b14c338
7 changed files with 61 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bookwyrm/templates/components/dropdown.html
View file

@ -5,7 +5,7 @@
{% block dropdown-trigger %}{% endblock %} {% block dropdown-trigger %}{% endblock %}
</button> </button>
<div class="dropdown-menu"> <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 %} {% block dropdown-list %}{% endblock %}
</ul> </ul>
</div> </div>

11
bookwyrm/templates/components/modal.html
View file

@ -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-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head" tabindex="0" id="modal-title-{{ controls_text }}-{{ controls_uid }}"> <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 %} {% block modal-title %}{% endblock %}
</h2> </h2>
{% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %} {% include 'snippets/toggle/toggle_button.html' with label="close" class="delete" nonbutton=True %}
@ -18,7 +23,7 @@
</footer> </footer>
{% block modal-form-close %}{% endblock %} {% block modal-form-close %}{% endblock %}
</div> </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 %} {% include 'snippets/toggle/toggle_button.html' with label="close" class="modal-close is-large" nonbutton=True %}
</div> </div>

20
bookwyrm/templates/layout.html
View file

@ -22,7 +22,7 @@
<meta name="twitter:image:alt" content="BookWyrm Logo"> <meta name="twitter:image:alt" content="BookWyrm Logo">
</head> </head>
<body> <body>
<nav class="navbar container" role="navigation" aria-label="main navigation"> <nav class="navbar container" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="/"> <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"> <img class="image logo" src="{% if site.logo_small %}/images/{{ site.logo_small }}{% else %}/static/images/logo-small.png{% endif %}" alt="Home page">
@ -69,10 +69,18 @@
<div class="navbar-end"> <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-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/avatar.html' with user=request.user %}
{% include 'snippets/username.html' with user=request.user %} {% include 'snippets/username.html' with user=request.user anchor=false %}
</p></div> </a>
<ul class="navbar-dropdown" id="navbar-dropdown"> <ul class="navbar-dropdown" id="navbar-dropdown">
<li> <li>
<a href="/direct-messages" class="navbar-item"> <a href="/direct-messages" class="navbar-item">
@ -95,7 +103,7 @@
</a> </a>
</li> </li>
{% if perms.bookwyrm.create_invites or perms.bookwyrm.edit_instance_settings%} {% if perms.bookwyrm.create_invites or perms.bookwyrm.edit_instance_settings%}
<hr class="navbar-divider"> <li class="navbar-divider" role="presentation"></li>
{% endif %} {% endif %}
{% if perms.bookwyrm.create_invites %} {% if perms.bookwyrm.create_invites %}
<li> <li>
@ -111,7 +119,7 @@
</a> </a>
</li> </li>
{% endif %} {% endif %}
<hr class="navbar-divider"> <li class="navbar-divider" role="presentation"></li>
<li> <li>
<a href="/logout" class="navbar-item"> <a href="/logout" class="navbar-item">
{% trans 'Log out' %} {% trans 'Log out' %}

2
bookwyrm/templates/snippets/shelf_selector.html
View file

@ -18,7 +18,7 @@
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<hr class="navbar-divider"> <li class="navbar-divider" role="presentation"></li>
<li> <li>
<form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post"> <form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
{% csrf_token %} {% csrf_token %}

8
bookwyrm/templates/snippets/status/status_content.html
View file

@ -3,10 +3,12 @@
<div class="block"> <div class="block">
{% if status.status_type == 'Review' %} {% if status.status_type == 'Review' %}
<div> <div>
{% if status.name %}
<h3 class="title is-5 has-subtitle"> <h3 class="title is-5 has-subtitle">
{% if status.name %}<span dir="auto">{{ status.name }}</span><br>{% endif %} {{ status.name | escape }}
</h3> </h3>
<p class="subtitle">{% include 'snippets/stars.html' with rating=status.rating %}</p> {% endif %}
{% include 'snippets/stars.html' with rating=status.rating %}
</div> </div>
{% endif %} {% endif %}
@ -35,7 +37,7 @@
{% if status.content and status.status_type != 'GeneratedNote' and status.status_type != 'Boost' %} {% if status.content and status.status_type != 'GeneratedNote' and status.status_type != 'Boost' %}
{% include 'snippets/trimmed_text.html' with full=status.content|safe %} {% include 'snippets/trimmed_text.html' with full=status.content|safe %}
{% endif %} {% endif %}
{% if status.attachments %} {% if status.attachments.all %}
<div class="block"> <div class="block">
<div class="columns"> <div class="columns">
{% for attachment in status.attachments.all %} {% for attachment in status.attachments.all %}

16
bookwyrm/templates/snippets/trimmed_text.html
View file

@ -8,19 +8,29 @@
{% with full|to_markdown|safe|truncatewords_html:60 as trimmed %} {% with full|to_markdown|safe|truncatewords_html:60 as trimmed %}
{% if trimmed != full %} {% if trimmed != full %}
<div id="hide-full-{{ uuid }}"> <div id="hide-full-{{ uuid }}">
<div class="content" id="trimmed-{{ uuid }}"><span dir="auto">{{ trimmed }}</span> <div class="content" id="trimmed-{{ uuid }}">
<p dir="auto">{{ trimmed }}</p>
<div>
{% trans "Show more" as button_text %} {% 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" %} {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="full" controls_uid=uuid class="is-small" %}
</div> </div>
</div> </div>
</div>
<div id="full-{{ uuid }}" class="hidden"> <div id="full-{{ uuid }}" class="hidden">
<div class="content"><span dir="auto">{{ full }}</span> <div class="content">
<div dir="auto">{{ full }}</div>
<div>
{% trans "Show less" as button_text %} {% 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" %} {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="full" controls_uid=uuid class="is-small" %}
</div> </div>
</div> </div>
</div>
{% else %} {% else %}
<div class="content"><span dir="auto">{{ full }}</span></div> <div class="content">
<div dir="auto">{{ full }}</div>
</div>
{% endif %} {% endif %}
{% endwith %} {% endwith %}

15
bookwyrm/templates/snippets/username.html
View file

@ -1,2 +1,15 @@
{% spaceless %}
{% load bookwyrm_tags %} {% 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 %}