Tricky CSS to make browser size title properly. Excess text in the title wraps to...

diff --git a/BookReader/BookReader.css b/BookReader/BookReader.css
index 19185fc..5850e07 100644 (file)
--- a/BookReader/BookReader.css
+++ b/BookReader/BookReader.css
@@ -27,6 +27,7 @@ h3 {
     width: 100%;
     z-index: 100;
     background-color: #e2dcc5;
+    overflow: hidden;
 }
 #BRtoolbar .label {
     font-size: 1.1em;
@@ -179,20 +180,24 @@ h3 {
     font-weight: 700;
 }
 #BRreturn {
-    display: block;
-    float: left;
-    margin: 5px 10px 0 5px;
+    /* display: block; */
+    /* float: left; */
+    /* margin: 0 10px 0 5px; */
     font-family: "Lucida Grande","Arial",sans-serif;
     color: #333;
+    height: 20px;
 }
 #BRreturn span {
-    font-size: 10px;
+    font-size: 12px;
     display: block;
+    height: 12px;
 }
 #BRreturn a {
-    font-size: 13px;
+    font-size: 14px;
     display: block;
     color: #036daa;
+    height: 18px;
+    overflow: hidden;
 }
 .BRicon {
     display: block;

diff --git a/BookReader/BookReader.js b/BookReader/BookReader.js
index 1025505..089956e 100644 (file)
--- a/BookReader/BookReader.js
+++ b/BookReader/BookReader.js
@@ -3462,33 +3462,30 @@ BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
 BookReader.prototype.initToolbar = function(mode, ui) {
 
     // $$$mang should be contained within the BookReader div instead of body
-    $("body").append("<div id='BRtoolbar'>"
-        + "<span id='BRtoolbarbuttons'>"
+    $("body").append(
+          "<div id='BRtoolbar'>"
+        +   "<span id='BRtoolbarbuttons'>"
         /* XXXmang integrate search */
-        +   "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search inside'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
+        +     "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search inside'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
         // XXXmang icons incorrect or handlers wrong
-        +   "<button class='BRicon info' onclick='br.switchMode(3); return false;'></button>"
-        +   "<button class='BRicon share' onclick='br.switchMode(2); return false;'></button>"
-        +   "<button class='BRicon read modal'></button>"
-        +   "<button class='BRicon full'></button>"
-        + "</span>"
-        
-        + "<span>"
-        +   "<a class='logo' href='" + this.logoURL + "'></a>"
-        // XXXmang update
-        +   "<div id='BRreturn'><span>Back to</span><a href='BOOK URL'>Book Title</a></div>"
-        + "</span>"
-        
+        +     "<button class='BRicon info' onclick='br.switchMode(3); return false;'></button>"
+        +     "<button class='BRicon share' onclick='br.switchMode(2); return false;'></button>"
+        +     "<button class='BRicon read modal'></button>"
+        +     "<button class='BRicon full'></button>"
+        +   "</span>"
+        +   "<span><a class='logo' href='" + this.logoURL + "'></a></span>"
+        +   "<span id='BRreturn'><span>Back to</span><a href='" + this.bookUrl + "'>" + this.bookTitle + "</a></span>"
         + "</div>"
+        
         + "<div id='BRzoomer'>"
-        + "<div id='BRzoompos'>"
-        + "<button class='BRicon zoom_out'></button>"
-        + "<div id='BRzoomcontrol'>"
-        +    "<div id='BRzoomstrip'></div>"
-        +    "<div id='BRzoombtn'></div>"
-        + "</div>"
-        + "<button class='BRicon zoom_in'></button>"
-        + "</div>"
+        +   "<div id='BRzoompos'>"
+        +     "<button class='BRicon zoom_out'></button>"
+        +     "<div id='BRzoomcontrol'>"
+        +       "<div id='BRzoomstrip'></div>"
+        +       "<div id='BRzoombtn'></div>"
+        +     "</div>"
+        +     "<button class='BRicon zoom_in'></button>"
+        +   "</div>"
         + "</div>");
     
     this.updateToolbarZoom(this.reduce); // Pretty format