files_reader: fix titlebar text overlapping buttons on some devices

files_reader/templates/epubreader.php

@@ -13,7 +13,7 @@
   $metadata = $_['metadata'];
   $annotations = $_['annotations'];
   $title = htmlentities(basename($dllink));
-  $revision = '0069';
+  $revision = '0071';
   $version = \OCP\App::getAppVersion('files_reader') . '.' . $revision;
 
   /* Mobile safari, the new IE6 */
@@ -176,7 +176,7 @@
                                     nightmode can be toggled by clicking the book title
                                     </div>
                                     <div class="center-box">
-                                    <input type="color" id="night_color" value="#3a516b">
+                                    <input type="color" id="night_color" value="#454545">
                                     on
                                     <input type="color" id="night_background" value="#000000">
                                     </div>
@@ -233,7 +233,7 @@
                 <!-- titlebar -->
 
                 <div id="titlebar">
-                    <div id="opener" class="pull-left">
+                    <div id="opener">
                         <a id="slider" class="icon-menu">
                             <?php p($l->t("menu")); ?>
                         </a>
@@ -241,13 +241,13 @@
                     <div id="metainfo" class="nightshift">
                         <span id="book-title">
                         </span>
-                        <span id="title-seperator">
+                        <span id="title-separator">
                               –  
                         </span>
                         <span id="chapter-title">
                         </span>
                     </div>
-                    <div id="title-controls" class="pull-right">
+                    <div id="title-controls">
                         <a id="note" class="icon-comment">
                         </a>
                         <a id="bookmark" class="icon-turned_in_not">

files_reader/vendor/epubjs/css/main.css

@@ -87,13 +87,38 @@ body {
   font-weight: 600;
 }
 
-#title-seperator {
+#title-separator {
   display: none;
 }
 
+#title-controls,
+#opener {
+	margin-left: 0.3em;
+	margin-right: 0.3em;
+    position: fixed;
+    top: 0.3em;
+}
+
+#opener {
+    left: 0;
+}
+
+#metainfo {
+    position: fixed;
+    /* width: 80%;
+    left: 10%; */
+    width: 50%;
+    width: calc(100% - 7.5em);
+    left: 1.5em;
+    top: 0.3em;
+    padding: 0.2em;
+    height: 1em;
+    overflow: hidden;
+    text-align: center;
+}
+
 #title-controls {
-	margin-left: 1em;
-	margin-right: 1em;
+    right: 0;
 }
 
 #viewer {
@@ -168,13 +193,6 @@ body {
 	width: calc(100% - 25em);
 }
 
-#metainfo {
-  display: inline-block;
-  text-align: center;
-  max-width: 80%;
-  min-width: 20%;
-}
-
 #divider {
   position: absolute;
   width: 1px;
@@ -308,8 +326,8 @@ body {
     /* margin: 0 50px 0 50px; */
   }
   
-  #metainfo {
-    font-size: 10px;
+  #metainfo span {
+    font-size: 0.5em;
   }
   /*
   #tocView {

files_reader/vendor/epubjs/css/sidebar.css

@@ -26,6 +26,8 @@
     width: 100%;
 	height: 2em;
 	background: #4e4e4e;
+    /* above titlebar controls */
+    z-index: 3; 
 }
 
 .toolbar {