From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 7 Jul 2020 17:49:12 +0000 (+0200)
Subject: wip #3775 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=83f407eb0dbd1c92303f51fc368d2272fa78d613;p=fluidbook-html5.git

wip #3775 @0.75
---

diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index dde9a508..9eac02a5 100644
--- a/js/libs/fluidbook/fluidbook.interface.js
+++ b/js/libs/fluidbook/fluidbook.interface.js
@@ -22,14 +22,14 @@ FluidbookInterface.prototype = {
             var labels = this.getLabels();
             var res = '';
             if ($('html').hasClass('ltr')) {
-                res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, '', 'ArrowRight');
-                res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true, '', 'End');
-                res += '</div>';
                 res += '<div id="prev-arrows">';
                 res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'ArrowLeft');
                 res += this.fluidbook.nav.getLink('interface-first', '#', 'first', '', labels.first, 'arrow-bottom', true, '', 'Home');
                 res += '</div>';
+                res += '<div id="next-arrows">';
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, '', 'ArrowRight');
+                res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true, '', 'End');
+                res += '</div>';
             } else {
                 res += '<div id="next-arrows">';
                 res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'ArrowRight');
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 47213f16..64f7bc1f 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1372,7 +1372,7 @@ html.ios body.portrait #interface {
   display: block;
   cursor: pointer;
 
-  &[data-enabled], &:hover, &.permanent {
+  &[data-enabled], &:hover, &:focus, &.permanent {
     opacity: 1 !important;
     transition: none;
   }
diff --git a/style/interface.less b/style/interface.less
index 76efe01e..41de5b07 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -22,7 +22,7 @@
     left: 0;
     width: 100%;
 
-    &:hover {
+    &:hover, &:focus {
       svg {
         transform: translateX(5px);
       }
@@ -61,21 +61,21 @@
 
 #prev-arrows {
   a {
-    &:hover {
+    &:hover, &:focus {
       svg {
         transform: translateX(-5px);
       }
     }
 
-    &.arrow-top{
-      svg{
+    &.arrow-top {
+      svg {
         left: 17px;
       }
     }
 
-    &.arrow-bottom{
-      svg{
-        left:22px;
+    &.arrow-bottom {
+      svg {
+        left: 22px;
       }
     }
   }
@@ -90,11 +90,13 @@
 }
 
 #next-arrows.hidden.help, #prev-arrows.hidden.help {
+  display: block;
   transition: none;
   opacity: 1;
 }
 
 #next-arrows.hidden, #prev-arrows.hidden {
+  display: none;
   opacity: 0;
   cursor: default;
   pointer-events: none;