wip #3775 @0.75

diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js
index dde9a50807ee1279a58783884449cd2b3dd4212e..9eac02a50dca12974375fcc0e347a2a135a64d6c 100644 (file)
--- 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 47213f16d9c5ef10fc2662d6a46bd0fd0f5860ee..64f7bc1fc776ca63e30d293677ec4c342e641116 100644 (file)
--- 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 76efe01ee45be7c85f958e775e4b9a8ca58baf11..41de5b07700fe57a50e042cd3d2801ff9bacee4d 100644 (file)
--- 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;