From 601d55d6f3ccfff60c99ba0aea124ce555d7ae20 Mon Sep 17 00:00:00 2001
From: Michael Ang <mang@archive.org>
Date: Thu, 14 Oct 2010 02:40:35 +0000
Subject: [PATCH] Chapter markers and the page slider icon are positioned
 correctly and line up with each other!

---
 BookReader/BookReader.css | 11 ++++++++---
 BookReader/BookReader.js  | 16 ++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/BookReader/BookReader.css b/BookReader/BookReader.css
index 4774b81..53b82cd 100644
--- a/BookReader/BookReader.css
+++ b/BookReader/BookReader.css
@@ -430,7 +430,11 @@ div#BRnavpos {
 }
 div#BRpager {
     position: relative;
-    margin-left: -10px;
+    
+    /* Account for padding around nav line */
+    margin-left: 10px;
+    margin-right: 10px;
+    
     height: 40px;
 }
 div#BRslider {
@@ -445,7 +449,7 @@ div#BRslider {
     width: 23px;
     height: 27px;
     top: 13px;
-    left: -11px;
+    margin-left: -12px; /* Center icon */
     background: url(images/slider.png);
     z-index: 103;
 }
@@ -529,8 +533,9 @@ div#BRnavline {
 }
 div.chapter {
     position: absolute;
-    top: -13px;
+    top: -24px; /* Relative to nav line */
     width: 18px;
+    margin-left: -9px; /* Center marker triangle */
     height: 27px;
     background: transparent url(images/marker_chap.png) no-repeat;
     cursor: pointer;
diff --git a/BookReader/BookReader.js b/BookReader/BookReader.js
index 36379a1..0bd58d0 100644
--- a/BookReader/BookReader.js
+++ b/BookReader/BookReader.js
@@ -3236,14 +3236,14 @@ BookReader.prototype.initNavbar = function() {
     // $$$ should make this work inside the BookReader div (self-contained), rather than after
     $('#BookReader').after(
         '<div id="BRnav">'
-        +     '<div id="BRpage">'
+        +     '<div id="BRpage">'   // Page turn buttons
         +         '<button class="BRicon book_left"></button>'
         +         '<button class="BRicon book_right"></button>'
         +     '</div>'
-        +     '<div id="BRnavpos">'
-        +         '<div id="BRfiller"></div>'
-        +         '<div id="BRpager"></div>'
-        +         '<div id="BRnavline">'
+        +     '<div id="BRnavpos">' // Page slider and nav line
+        //+         '<div id="BRfiller"></div>'
+        +         '<div id="BRpager"></div>'  // Page slider
+        +         '<div id="BRnavline">'      // Nav line with e.g. chapter markers
         +             '<div class="BRnavend" id="BRnavleft"></div>'
         +             '<div class="BRnavend" id="BRnavright"></div>'
         +         '</div>'     
@@ -3436,11 +3436,11 @@ BookReader.prototype.removeSearchResults = function() {
 BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex) {
     var uiStringPage = 'Page'; // i18n
 
-    var percentThrough = BookReader.util.cssPercentage(pageIndex, this.numLeafs);
+    var percentThrough = BookReader.util.cssPercentage(pageIndex, this.numLeafs - 1);
     
     $('<div class="chapter" style="left:' + percentThrough + ';"><div class="title">'
         + chapterTitle + '<span>|</span> ' + uiStringPage + ' ' + pageNumber + '</div></div>')
-    .appendTo('#BRnavpos')
+    .appendTo('#BRnavline')
     .data({'self': this, 'pageIndex': pageIndex })
     .bt({
         contentSelector: '$(this).find(".title")',
@@ -4313,7 +4313,7 @@ BookReader.util = {
     
     // Given value and maximum, calculate a percentage suitable for CSS
     cssPercentage: function(value, max) {
-        return parseInt(((value + 0.0) / max) * 100) + '%';
+        return (((value + 0.0) / max) * 100) + '%';
     },
     
     notInArray: function(value, array) {
-- 
2.20.1