add accessibility tweaks to templates

This commit is contained in:
Trent Palmer 2021-03-28 23:27:46 -07:00
parent 4fc914a470
commit d0f29ce035
4 changed files with 39 additions and 39 deletions

View File

@ -11,13 +11,13 @@
<div class="col-12 col-sm-6 px-0 mx-0"> <div class="col-12 col-sm-6 px-0 mx-0">
{% for i in feeds %} {% for i in feeds %}
<div class="card mx-1 mb-3"> <div class="card mx-1 mb-3">
<h3 class="text-center mt-2"> <h2 style="font-size: 1.5rem" class="text-center mt-2">
{{ i.title }} {{ i.title }}
</h3> </h2>
<div class="container w-100 mb-2"> <div class="container w-100 mb-2">
<div class="row"> <div class="row">
<div class="col-3 d-flex flex-column justify-content-center"> <div class="col-3 d-flex flex-column justify-content-center">
<img src="{{ IMAGES_URL }}{{ i.image }}"> <img src="{{ IMAGES_URL }}{{ i.image }}" alt="{{ i.image_title }}">
</div> </div>
<div class="col-9 d-flex flex-column justify-content-around"> <div class="col-9 d-flex flex-column justify-content-around">
<p class="text-center mb-2 mt-3">{{ i.created_on }}</p> <p class="text-center mb-2 mt-3">{{ i.created_on }}</p>
@ -25,28 +25,28 @@
<p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:feed' pk=i.pk slug=i.slug %}">Items</a></p> <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:feed' pk=i.pk slug=i.slug %}">Items</a></p>
<p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=i.slug %}">RSS</a></p> <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=i.slug %}">RSS</a></p>
</div> </div>
<a href="#x{{ i.slug }}-attributions" data-toggle="collapse" class="text-center">license/attribution</a> <a href="#x{{ i.slug }}-attributions" data-toggle="collapse" class="text-center text-dark" style="text-decoration: underline">license/attribution</a>
</div> </div>
</div> </div>
<div id="x{{ i.slug }}-attributions" class="collapse text-justify"> <div id="x{{ i.slug }}-attributions" class="collapse text-justify">
Photo <a href="{{ i.original_image_url }}">{{ i.image_title }}</a> by Photo <a href="{{ i.original_image_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_title }}</a> by
{% if i.image_attribution_url == '' %} {% if i.image_attribution_url == '' %}
{{ i.image_attribution }} {{ i.image_attribution }}
{% else %} {% else %}
<a href="{{ i.image_attribution_url }}">{{ i.image_attribution }}</a> <a href="{{ i.image_attribution_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_attribution }}</a>
{% endif %} {% endif %}
is licensed <a href="{{ i.image_license_url }}">{{ i.image_license_name }}</a> is licensed <a href="{{ i.image_license_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_license_name }}</a>
{{ i.image_license_jurisdiction }}. {{ i.image_license_jurisdiction }}.
<hr class="my-1"> <hr class="my-1">
<a href="{{ i.ebook_url }}">{{ i.ebook_title }}</a> by <a href="{{ i.ebook_url }}" class="text-dark" style="text-decoration: underline">{{ i.ebook_title }}</a> by
<a href="{{ i.author_url }}">{{ i.author }}</a> <a href="{{ i.author_url }}" class="text-dark" style="text-decoration: underline">{{ i.author }}</a>
is licensed <a href="{{ i.license_url }}">{{ i.license_name }}</a> is licensed <a href="{{ i.license_url }}" class="text-dark" style="text-decoration: underline">{{ i.license_name }}</a>
{{ i.license_jurisdiction }}. {{ i.license_jurisdiction }}.
{% if i.translator != '' %} {% if i.translator != '' %}
Translated by <a href="{{ i.translator_url }}">{{ i.translator }}</a>. Translated by <a href="{{ i.translator_url }}" class="text-dark" style="text-decoration: underline">{{ i.translator }}</a>.
{% endif %} {% endif %}
{% if i.intro_author != '' %} {% if i.intro_author != '' %}
Intro by <a href="{{ i.intro_author_url }}">{{ i.intro_author }}</a>. Intro by <a href="{{ i.intro_author_url }}" class="text-dark" style="text-decoration: underline">{{ i.intro_author }}</a>.
{% endif %} {% endif %}
<hr class="my-1"> <hr class="my-1">
</div> </div>
@ -58,10 +58,10 @@
{% if user == i.user %} {% if user == i.user %}
<div class="container w-100 d-flex justify-content-around my-1"> <div class="container w-100 d-flex justify-content-around my-1">
<div> <div>
<a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}">Edit Feed?</a> <a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}" class="text-dark" style="text-decoration: underline">Edit Feed?</a>
</div> </div>
<div> <div>
<a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}">New Episode?</a> <a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
</div> </div>
</div> </div>
{% endif %} {% endif %}

View File

@ -23,21 +23,21 @@
{% if user.is_authenticated %} {% if user.is_authenticated %}
{% if view == 'feed' %} {% if view == 'feed' %}
<div class="mb-3 d-flex justify-content-around"> <div class="mb-3 d-flex justify-content-around">
<a href="{% url 'audio:edit_feed' pk=feed_pk title_slug=feed_slug %}">Edit Feed?</a> <a href="{% url 'audio:edit_feed' pk=feed_pk title_slug=feed_slug %}" class="text-dark" style="text-decoration: underline">Edit Feed?</a>
<a href="{% url 'audio:new_episode' feed_pk=feed_pk feed_title_slug=feed_slug %}">New Episode?</a> <a href="{% url 'audio:new_episode' feed_pk=feed_pk feed_title_slug=feed_slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% for j in episodes %} {% for j in episodes %}
<div class="card mx-1 mb-3"> <div class="card mx-1 mb-3">
<h3 class="text-center mt-2"> <h2 style="font-size: 1.5rem" class="text-center mt-2">
{{ j.episode_number }}. {{ j.title }} {{ j.episode_number }}. {{ j.title }}
</h3> </h2>
<div class="container w-100 mb-2"> <div class="container w-100 mb-2">
<div class="row"> <div class="row">
<div class="col-3 d-flex flex-column justify-content-center"> <div class="col-3 d-flex flex-column justify-content-center">
<img src="{{ IMAGES_URL }}{{ j.image }}"> <img src="{{ IMAGES_URL }}{{ j.image }}" alt="{{ j.image_title }}">
</div> </div>
<div class="col-9 d-flex flex-column justify-content-around"> <div class="col-9 d-flex flex-column justify-content-around">
<p class="text-center mb-2 mt-3">{{ j.pub_date }}</p> <p class="text-center mb-2 mt-3">{{ j.pub_date }}</p>
@ -48,30 +48,30 @@
{% endif %} {% endif %}
<p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=j.feed.slug %}">RSS</a></p> <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=j.feed.slug %}">RSS</a></p>
</div> </div>
<a href="#x{{ j.slug }}-attributions" data-toggle="collapse" class="text-center">license/attribution</a> <a href="#x{{ j.slug }}-attributions" data-toggle="collapse" class="text-center text-dark" style="text-decoration: underline">license/attribution</a>
</div> </div>
</div> </div>
</div> </div>
<div class="container w-100 mb-2"> <div class="container w-100 mb-2">
<div id="x{{ j.slug }}-attributions" class="collapse text-justify"> <div id="x{{ j.slug }}-attributions" class="collapse text-justify">
Photo <a href="{{ j.original_image_url }}">{{ j.image_title }}</a> by Photo <a href="{{ j.original_image_url }}" class="text-dark" style="text-decoration: underline">{{ j.image_title }}</a> by
{% if j.image_attribution_url == '' %} {% if j.image_attribution_url == '' %}
{{ j.image_attribution }} {{ j.image_attribution }}
{% else %} {% else %}
<a href="{{ j.image_attribution_url }}">{{ j.image_attribution }}</a> <a href="{{ j.image_attribution_url }}" class="text-dark" style="text-decoration: underline">{{ j.image_attribution }}</a>
{% endif %} {% endif %}
is licensed <a href="{{ j.image_license_url }}">{{ j.image_license_name }}</a> is licensed <a href="{{ j.image_license_url }}" class="text-dark" style="text-decoration: underline">{{ j.image_license_name }}</a>
{{ j.image_license_jurisdiction }}. {{ j.image_license_jurisdiction }}.
<hr class="my-1"> <hr class="my-1">
<a href="{{ j.feed.ebook_url }}">{{ j.feed.ebook_title }}</a> by <a href="{{ j.feed.ebook_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.ebook_title }}</a> by
<a href="{{ j.feed.author_url }}">{{ j.feed.author }}</a> <a href="{{ j.feed.author_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.author }}</a>
is licensed <a href="{{ j.feed.license_url }}">{{ j.feed.license_name }}</a> is licensed <a href="{{ j.feed.license_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.license_name }}</a>
{{ j.feed.license_jurisdiction }}. {{ j.feed.license_jurisdiction }}.
{% if j.feed.translator != '' %} {% if j.feed.translator != '' %}
Translated by <a href="{{ j.feed.translator_url }}">{{ j.feed.translator }}</a>. Translated by <a href="{{ j.feed.translator_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.translator }}</a>.
{% endif %} {% endif %}
{% if j.feed.intro_author != '' %} {% if j.feed.intro_author != '' %}
Intro by <a href="{{ j.feed.intro_author_url }}">{{ j.feed.intro_author }}</a>. Intro by <a href="{{ j.feed.intro_author_url }}" class="text-dark" style="text-decoration: underline">{{ j.feed.intro_author }}</a>.
{% endif %} {% endif %}
<hr class="my-1"> <hr class="my-1">
</div> </div>
@ -86,11 +86,11 @@
{% if user == j.user %} {% if user == j.user %}
<div class="container w-100 d-flex justify-content-around my-1"> <div class="container w-100 d-flex justify-content-around my-1">
<div> <div>
<a href="{% url 'audio:edit_episode' pk=j.pk title_slug=j.slug %}">Edit Episode?</a><br> <a href="{% url 'audio:edit_episode' pk=j.pk title_slug=j.slug %}" class="text-dark" style="text-decoration: underline">Edit Episode?</a><br>
</div> </div>
{% if view != 'feed' %} {% if view != 'feed' %}
<div> <div>
<a href="{% url 'audio:new_episode' feed_pk=j.feed.pk feed_title_slug=j.feed.slug %}">New Episode?</a> <a href="{% url 'audio:new_episode' feed_pk=j.feed.pk feed_title_slug=j.feed.slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@ -101,7 +101,7 @@
{% endfor %} {% endfor %}
{% if is_episode %} {% if is_episode %}
<div class="text-center"> <div class="text-center">
More from <a href="{% url 'audio:feed' pk=feed.id slug=feed.slug %}">{{ feed.title }}</a>? More from <a href="{% url 'audio:feed' pk=feed.id slug=feed.slug %}" class="text-dark" style="text-decoration: underline">{{ feed.title }}</a>?
</div> </div>
{% endif %} {% endif %}
</div> </div>

View File

@ -61,8 +61,8 @@
</div> </div>
{% endif %} {% endif %}
{% if request.path == login_url %} {% if request.path == login_url %}
<p>Forgot Password? <a href="{% url 'accounts:password_reset' %}">Reset Password</a></p> <p>Forgot Password? <a href="{% url 'accounts:password_reset' %}" class="text-dark" style="text-decoration: underline">Reset Password</a></p>
<p>Need an account? <a href="{% url 'accounts:register' %}">Register</a></p> <p>Need an account? <a href="{% url 'accounts:register' %}" class="text-dark" style="text-decoration: underline">Register</a></p>
{% endif %} {% endif %}
</div> </div>
</div> </div>

View File

@ -6,14 +6,14 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'audio:feeds' %}">Feeds</a> <a class="nav-item nav-link text-light" href="{% url 'audio:feeds' %}">Feeds</a>
<a class="nav-item nav-link" href="https://github.com/TrentSPalmer/trentpalmerdotorg" target="_blank" rel="noopener noreferrer">Fork-About</a> <a class="nav-item nav-link text-light" href="https://github.com/TrentSPalmer/trentpalmerdotorg" target="_blank" rel="noopener noreferrer">Fork-About</a>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'accounts:logout' %}">Logout</a> <a class="nav-item nav-link text-light" href="{% url 'accounts:logout' %}">Logout</a>
<a class="nav-item nav-link" href="{% url 'accounts:edit_profile' %}">Profile</a> <a class="nav-item nav-link text-light" href="{% url 'accounts:edit_profile' %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'audio:new_feed' %}">NewFeed</a> <a class="nav-item nav-link text-light" href="{% url 'audio:new_feed' %}">NewFeed</a>
{% else %} {% else %}
<a class="nav-item nav-link" href="{% url 'accounts:login' %}">Login</a> <a class="nav-item nav-link text-light" href="{% url 'accounts:login' %}">Login</a>
{% endif %} {% endif %}
</div> </div>
</div> </div>