put toggle images button down next to scroll button

sarahs · sarahs · commit 0971f6e6ae2a · 2021-04-22T12:17:31.000-04:00
diff --git a/includes/article.html b/includes/article.html
@@ -62,7 +62,6 @@ <h2 id="in-this-article" class="f5 mb-2"><a class="Link--primary" href="#in-this
         </ul>
         {% endif %}
       </div>
-      {% include toggle-images %}
     </div>
     <div id="article-contents" class="article-grid-body">
       {% if featuredLinks.gettingStarted and featuredLinks.popular %}
diff --git a/includes/scroll-button.html b/includes/scroll-button.html
@@ -1,3 +1,3 @@
 <button class="arrow-for-scrolling-top" id="js-scroll-top">
-    {% octicon "chevron-up" %}
+  <span aria-label="{% data ui.scroll_to_top %}">{% octicon "chevron-up" %}</span>
 </button>
diff --git a/includes/toggle-images.html b/includes/toggle-images.html
@@ -1,6 +1,6 @@
-<button class="toggle-images tooltipped tooltipped-n" id="js-toggle-images" style="display: none;">
-  <span id="js-hide-icon" aria-label="{% data ui.toggle_images.hide %}" style="display: none;">{% octicon "eye-closed" %}</span>
-  <span id="js-show-icon" aria-label="{% data ui.toggle_images.show %}" style="display: none;">{% octicon "eye" %}</span>
+<button class="toggle-images tooltipped tooltipped-nw tooltipped-no-delay" id="js-toggle-images" style="display: none;">
+  <span id="js-off-icon" aria-label="{% data ui.toggle_images.off %}" style="display: none;">{% octicon "eye-closed" %}</span>
+  <span id="js-on-icon" aria-label="{% data ui.toggle_images.on %}" style="display: none;">{% octicon "eye" %}</span>
   <span id="js-hide-single-image" aria-label="{% data ui.toggle_images.hide_single %}" style="display: none;"></span>
   <span id="js-show-single-image" aria-label="{% data ui.toggle_images.show_single %}" style="display: none;"></span>
 </button>
diff --git a/stylesheets/scroll-button.scss b/stylesheets/scroll-button.scss
@@ -5,7 +5,9 @@ button.arrow-for-scrolling-top {
   color: var(--color-text-inverse);
   position: fixed;
   bottom: 10px;
-  right: 10px;
+  // right: 10px;
+  // padding-right: 50px;
+  right: 60px;
   display: block;
   width: 40px;
   height: 40px;
diff --git a/stylesheets/toggle-images-button.scss b/stylesheets/toggle-images-button.scss
@@ -1,12 +1,14 @@
 button.toggle-images {
-    opacity: 1;
-    transition: 1s;
-    background-color: var(--color-auto-blue-5);
-    color: var(--color-text-inverse);
-    position: fixed;
-    display: block;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    border: none;
+  opacity: 1;
+  transition: 1s;
+  background-color: var(--color-auto-blue-5);
+  color: var(--color-text-inverse);
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
 }
