mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-23 10:01:04 +00:00
Use bulma screen-reader-only class
This commit is contained in:
parent
ada6a79b1c
commit
982f734ce7
12 changed files with 22 additions and 30 deletions
|
@ -1,12 +1,4 @@
|
|||
/* --- ICONS --- */
|
||||
.hidden-text {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* --- TOGGLES --- */
|
||||
input.toggle-control {
|
||||
display: none;
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
<div class="level-right">
|
||||
<a href="{{ book.id }}/edit">edit
|
||||
<span class="icon icon-pencil">
|
||||
<span class="hidden-text">Edit Book</span>
|
||||
<span class="is-sr-only">Edit Book</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<div class="level-right">
|
||||
<a href="/book/{{ book.id }}">
|
||||
<span class="edit-link icon icon-close">
|
||||
<span class="hidden-text">Close</span>
|
||||
<span class="is-sr-only">Close</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<input class="input" type="text" name="q" placeholder="Search for a book or user">
|
||||
<button class="button" type="submit">
|
||||
<span class="icon icon-search">
|
||||
<span class="hidden-text">search</span>
|
||||
<span class="is-sr-only">search</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -87,7 +87,7 @@
|
|||
<div class="tags has-addons">
|
||||
<span class="tag is-medium">
|
||||
<span class="icon icon-bell">
|
||||
<span class="hidden-text">Notitications</span>
|
||||
<span class="is-sr-only">Notitications</span>
|
||||
</span>
|
||||
</span>
|
||||
{% if request.user|notification_count %}
|
||||
|
|
|
@ -29,13 +29,13 @@
|
|||
<div class="control">
|
||||
<label class="label" for="id_content_{{ book.id }}_review">Review:</label>
|
||||
|
||||
<span class="hidden-text">Rating</span>
|
||||
<span class="is-sr-only">Rating</span>
|
||||
<div class="field is-grouped stars form-rate-stars">
|
||||
<input class="hidden" type="radio" name="rating" value="" checked>
|
||||
{% for i in '12345'|make_list %}
|
||||
<input class="hidden" id="book{{book.id}}-star-{{ forloop.counter }}" type="radio" name="rating" value="{{ forloop.counter }}">
|
||||
<label class="icon icon-star-empty" for="book{{book.id}}-star-{{ forloop.counter }}">
|
||||
<span class="hidden-text">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
|
||||
<span class="is-sr-only">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<textarea name="content" placeholder="Leave a comment..." id="id_content_{{ activity.id }}" required="true"></textarea>
|
||||
<button class="button" type="submit">
|
||||
<span class="icon icon-comment">
|
||||
<span class="hidden-text">Comment</span>
|
||||
<span class="is-sr-only">Comment</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -18,7 +18,7 @@
|
|||
{% csrf_token %}
|
||||
<button class="button" type="submit">
|
||||
<span class="icon icon-boost">
|
||||
<span class="hidden-text">Boost status</span>
|
||||
<span class="is-sr-only">Boost status</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
|
@ -26,7 +26,7 @@
|
|||
{% csrf_token %}
|
||||
<button class="button is-success" type="submit">
|
||||
<span class="icon icon-boost">
|
||||
<span class="hidden-text">Un-boost status</span>
|
||||
<span class="is-sr-only">Un-boost status</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
|
@ -35,7 +35,7 @@
|
|||
{% csrf_token %}
|
||||
<button class="button" type="submit">
|
||||
<span class="icon icon-heart">
|
||||
<span class="hidden-text">Like status</span>
|
||||
<span class="is-sr-only">Like status</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
|
@ -43,22 +43,22 @@
|
|||
{% csrf_token %}
|
||||
<button class="button is-success" type="submit">
|
||||
<span class="icon icon-heart">
|
||||
<span class="hidden-text">Un-like status</span>
|
||||
<span class="is-sr-only">Un-like status</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a href="/login">
|
||||
<span class="icon icon-comment">
|
||||
<span class="hidden-text">Comment</span>
|
||||
<span class="is-sr-only">Comment</span>
|
||||
</span>
|
||||
|
||||
<span class="icon icon-boost">
|
||||
<span class="hidden-text">Boost status</span>
|
||||
<span class="is-sr-only">Boost status</span>
|
||||
</span>
|
||||
|
||||
<span class="icon icon-heart">
|
||||
<span class="hidden-text">Like status</span>
|
||||
<span class="is-sr-only">Like status</span>
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{% load fr_display %}
|
||||
<span class="hidden-text">Leave a rating</span>
|
||||
<span class="is-sr-only">Leave a rating</span>
|
||||
<div class="field is-grouped stars rate-stars">
|
||||
{% for i in '12345'|make_list %}
|
||||
<form name="rate" action="/rate/" method="POST" onsubmit="return rate_stars(event)">
|
||||
|
@ -7,7 +7,7 @@
|
|||
<input type="hidden" name="book" value="{{ book.id }}">
|
||||
<input type="hidden" name="rating" value="{{ forloop.counter }}">
|
||||
<button type="submit" class="icon icon-star-{% if book|rating:user < forloop.counter %}empty{% else %}full{% endif %}">
|
||||
<span class="hidden-text">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
|
||||
<span class="is-sr-only">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
|
||||
</button>
|
||||
</form>
|
||||
{% endfor %}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<div class="dropdown is-hoverable">
|
||||
{% if not hide_pulldown %}
|
||||
<div class="button dropdown-trigger is-small" >
|
||||
<span class="icon icon-arrow-down"><span class="hidden-text">More shelves</span></span>
|
||||
<span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="stars">
|
||||
<span class="hidden-text">{{ rating|floatformat }} star{{ rating|floatformat | pluralize }}</span>
|
||||
<span class="is-sr-only">{{ rating|floatformat }} star{{ rating|floatformat | pluralize }}</span>
|
||||
{% for i in '12345'|make_list %}
|
||||
<span class="icon icon-star-{% if rating >= forloop.counter %}full{% elif rating|floatformat:0 >= forloop.counter|floatformat:0 %}half{% else %}empty{% endif %}">
|
||||
</span>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<div class="card-footer-item">
|
||||
<span class="icon icon-public">
|
||||
<span class="hidden-text">Public post</span>
|
||||
<span class="is-sr-only">Public post</span>
|
||||
</span>
|
||||
<a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
|
||||
</div>
|
||||
|
|
|
@ -9,14 +9,14 @@
|
|||
{% csrf_token %}
|
||||
<input type="hidden" name="book" value="{{ book.id }}">
|
||||
<input type="hidden" name="name" value="{{ tag.name }}">
|
||||
<button type="submit">x<span class="hidden-text"> remove tag</span></button>
|
||||
<button type="submit">x<span class="is-sr-only"> remove tag</span></button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form name="tag" action="/tag/" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="book" value="{{ book.id }}">
|
||||
<input type="hidden" name="name" value="{{ tag.name }}">
|
||||
<button type="submit">+<span class="hidden-text"> add tag</span></button>
|
||||
<button type="submit">+<span class="is-sr-only"> add tag</span></button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<div class="level-right">
|
||||
<a href="/user-edit/" class="edit-link">edit
|
||||
<span class="icon icon-pencil">
|
||||
<span class="hidden-text">Edit profile</span>
|
||||
<span class="is-sr-only">Edit profile</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue