a11y: #755 requested change - button bar

Author: StephDriver

src/themes/clean/assets/css/clean.css

@@ -479,17 +479,16 @@ header svg {
     padding-bottom: 8px;
 }
 
+
 #reading-options{
-    background: #f1f1f1;
-    top: 0;
-    display: flex;
-    gap: 1rem;
-    z-index: 1000;
-    transition: transform 0.3s ease-in-out;
-    margin: 0;
-    float: right;
-    padding: 3px;
-    border: 1px solid #1C304A;
+  display: flex;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  justify-content: flex-end;
+  background-color: #f5f5f5;
+  min-height: fit-content;
+  box-sizing: border-box;
 }
 
 .btn-opt {

src/themes/clean/templates/elements/journal/reading.html

@@ -1,4 +1,4 @@
-<div id="reading-options">
+<div id="reading-options" class="col-md-12">
     <h2 class="sr-only">Text display options</h2>
     <div class="btn-group-horizontal">
         <button

src/themes/clean/templates/journal/article.html

@@ -69,15 +69,18 @@ <h1 class="card-title align-text-bottom article-title">{{ article.title|safe }}<
                         {% endif %}
                     </div>
                 </div>
+                {% include "elements/journal/reading.html" %}
             </div>
         </div>
+    {% else %}
+        {% include "elements/journal/reading.html" %}
     {% endif %}
+
     </div>
     <div id="article_metadata" class="row">
 
         <div class="col-md-7">
             <div id="article">
-                {% include "elements/journal/reading.html" %}
                 {% if journal_settings.article.disable_article_large_image %}
                     <small>{{ article.section.name }}</small>
                     <h3>{{ article.title|safe }}</h3>

src/themes/material/assets/mat.css

@@ -762,16 +762,14 @@ main {
 }
 
 #reading-options{
-    background: #f1f1f1;
-    top: 0;
-    display: flex;
-    gap: 1rem;
-    z-index: 1000;
-    transition: transform 0.3s ease-in-out;
-    margin: 0;
-    float: right;
-    padding: 3px;
-    border: 1px solid #00897b;
+  display: flex;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  justify-content: flex-end;
+  background-color: #f5f5f5;
+  min-height: fit-content;
+  box-sizing: border-box;
 }
 
 .btn-opt {

src/themes/material/templates/elements/journal/reading.html

@@ -1,4 +1,4 @@
-<div id="reading-options">
+<div id="reading-options" class="col m12">
     <h2 class="sr-only">Text display options</h2>
     <div class="btn-group-horizontal">
         <button

src/themes/material/templates/journal/article.html

@@ -55,6 +55,7 @@
                     </span>
                 </div>
         {% endif %}
+        {% include "elements/journal/reading.html" %}
 		<div>
 
 		</div>
@@ -71,7 +72,6 @@ <h1>{{ article.title|safe }}</h1>
 
                             </span>
                     {% endif %}
-                    {% include "elements/journal/reading.html" %}
                     {% if article.abstract and article.abstract != '' %}
                         <h2>{% trans "Abstract" %}</h2>
                         <p>{{ article.abstract | safe }}</p>