wcag tweaks

This commit is contained in:
rimu 2024-01-24 09:23:44 +13:00
parent e193a47b55
commit 35be628966
4 changed files with 63 additions and 16 deletions

View file

@ -571,6 +571,17 @@ fieldset legend {
float: right;
padding-left: 0;
padding-right: 0;
position: relative;
}
.post_list .post_teaser .thumbnail .fe {
display: block;
position: absolute;
right: 0;
background-color: rgba(255, 255, 255, 0.7);
padding-bottom: 1px;
padding-left: 1px;
border-radius: 2px;
top: 0;
}
.post_list .post_teaser .thumbnail img {
height: 60px;
@ -585,6 +596,13 @@ fieldset legend {
width: 133px;
}
}
.post_list .post_teaser .thumbnail.lbw .fe {
background: none;
}
.post_list .post_teaser .thumbnail.lbw .fe::before {
font-size: 28px;
padding-right: 7px;
}
.post_list .post_teaser.blocked {
opacity: 0.2;
font-size: 80%;

View file

@ -189,6 +189,18 @@ nav, etc which are used site-wide */
float: right;
padding-left: 0;
padding-right: 0;
position: relative;
.fe {
display: block;
position: absolute;
right: 0;
background-color: rgba(256,256,256, 0.7);
padding-bottom: 1px;
padding-left: 1px;
border-radius: 2px;
top: 0;
}
img {
height: 60px;
@ -202,6 +214,16 @@ nav, etc which are used site-wide */
}
}
&.lbw {
.fe {
background: none;
}
.fe::before {
font-size: 28px;
padding-right: 7px;
}
}
}
&.blocked {
opacity: 0.2;

View file

@ -182,8 +182,8 @@
</a>
</li>
{% endif %}
<li class="nav-item" aria-label="{{ _('Light mode') }}"><a class="nav-link" id="light_mode" href="#" tabindex=""><span class="fe fe-sun" title="{{ _('Light mode') }}"></span></a></li>
<li class="nav-item" aria-label="{{ _('Dark mode') }}"><a class="nav-link" id="dark_mode" href="#" tabindex=""><span class="fe fe-moon" title="{{ _('Dark mode') }}"></span></a></li>
<li class="nav-item" aria-label="{{ _('Light mode') }}"><a class="nav-link" id="light_mode" href="#" tabindex="" title="{{ _('Light mode') }}"><span class="fe fe-sun"></span></a></li>
<li class="nav-item" aria-label="{{ _('Dark mode') }}"><a class="nav-link" id="dark_mode" href="#" tabindex="" title="{{ _('Dark mode') }}"><span class="fe fe-moon"></span></a></li>
</ul>
</div>

View file

@ -12,19 +12,29 @@
<div class="voting_buttons">
{% include "post/_post_voting_buttons.html" %}
</div>
{% if post.image_id and not low_bandwidth %}
<div class="thumbnail">
{% if post.type == POST_TYPE_LINK %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" loading="lazy" /></a>
{% elif post.type == POST_TYPE_IMAGE %}
{% if post.image_id %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" loading="lazy" /></a>
{% if post.image_id %}
<div class="thumbnail{{ ' lbw' if low_bandwidth }}">
{% if low_bandwidth %}
{% if post.type == POST_TYPE_LINK %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span></a>
{% elif post.type == POST_TYPE_IMAGE %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span></a>
{% else %}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span></a>
{% endif %}
{% else %}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" height="50" loading="lazy" /></a>
{% if post.type == POST_TYPE_LINK %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" aria-label="{{ _('Read article') }}"><span class="fe fe-external"></span><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a>
{% elif post.type == POST_TYPE_IMAGE %}
{% if post.image_id %}
<a href="{{ post.image.view_url() }}" rel="nofollow ugc" aria-label="{{ _('View image') }}" target="_blank"><span class="fe fe-magnify"></span><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a>
{% endif %}
{% else %}
<a href="{{ url_for('activitypub.post_ap', post_id=post.id) }}" aria-label="{{ _('Read post') }}"><span class="fe fe-reply"></span><img src="{{ post.image.thumbnail_url() }}"
alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" /></a>
{% endif %}
{% endif %}
</div>
{% endif %}
@ -34,9 +44,6 @@
{% if post.url and 'youtube.com' in post.url %}
<span class="fe fe-video"></span>
{% endif %}
<a href="{{ post.url }}" rel="nofollow ugc" target="_blank" class="post_link" aria-label="{{ _('Read article') }}">
<img src="/static/images/external_link_black.svg" class="external_link_icon" alt="External link" />
</a>
<span class="domain_link">(<a href="/d/{{ post.domain_id }}" aria-label="{{ _('All posts about this domain') }}">{{ post.domain.name }}</a>)</span>
{% endif %}
{% if post.reports and current_user.is_authenticated and post.community.is_moderator(current_user) %}