add books button, add page count on bottom and in settings, add swipe for closing sidebar, fix settings modal, fix few styles

cps/static/css/main.css

@@ -539,7 +539,7 @@ input:-moz-placeholder {
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100vw;
-  height: auto;
+  height: 90dvh;
   max-width: 630px;
   z-index: 2000;
   visibility: hidden;
@@ -580,7 +580,7 @@ input:-moz-placeholder {
 }
 
 .md-content > div {
-  padding: 15px 40px 30px;
+  padding: 10px 20px;
   margin: 0;
   font-weight: 300;
   font-size: 14px;

cps/static/css/reader.css

@@ -47,6 +47,28 @@
 }
 
 #main,
-#viewer {
+#viewer,
+#sidebar,
+#tocView {
   touch-action: pan-y;
 }
+
+.read-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 12px;
+}
+.read-footer #pages-count {
+  font-size: 12px;
+
+  position: absolute;
+  left: 12px;
+  bottom: 2px;
+}
+
+#back-button {
+  width: 50px !important;
+  right: 50px;
+  position: absolute;
+}

cps/static/js/reading/epub.js

@@ -102,6 +102,24 @@ var reader;
         if (reader && reader.rendition && reader.rendition.container) {
             bindHammer(reader.rendition.container, false);
         }
+        // Bind swipe on sidebar to close/open main
+        try {
+            var sidebarEl = document.getElementById("tocView");
+            if (sidebarEl && typeof Hammer !== "undefined") {
+                var sidebarMc = new Hammer(sidebarEl);
+                sidebarMc.get("swipe").set({
+                    direction: Hammer.DIRECTION_HORIZONTAL,
+                    threshold: 25,
+                    velocity: 0.3,
+                });
+                sidebarMc.on("swipeleft swiperight", function (ev) {
+                    if ($("#sidebar").hasClass("open")) {
+                        $("#slider").click();
+                    }
+                });
+                hammerManagers.push(sidebarMc);
+            }
+        } catch (e) {}
         // Bind to inner iframes when rendered
         reader.rendition.on("rendered", function (section, contents) {
             var docEl = contents.document;
@@ -129,12 +147,23 @@ var reader;
     };
 
     // Apply saved or default mode on load
-    var savedMode =
-        localStorage.getItem("calibre.reader.navMode") || "gestures";
+    var savedMode = localStorage.getItem("calibre.reader.navMode") || "sizes";
     window.applyNavigationMode(savedMode);
 
     // Update progress percentage
     let progressDiv = document.getElementById("progress");
+    // Pages counter (virtual pages via EPUB locations)
+    let pagesDiv = document.getElementById("pages-count");
+    // Honor saved visibility preference for pages counter
+    (function () {
+        try {
+            var pref = localStorage.getItem("calibre.reader.showPages");
+            var show = pref === null ? true : pref === "true";
+            if (pagesDiv)
+                pagesDiv.style.visibility = show ? "visible" : "hidden";
+        } catch (e) {}
+    })();
+
     reader.book.ready.then(() => {
         let locations_key = reader.book.key() + "-locations";
         let stored_locations = localStorage.getItem(locations_key);
@@ -159,6 +188,21 @@ var reader;
                 reader.rendition.on("relocated", (location) => {
                     let percentage = Math.round(location.end.percentage * 100);
                     progressDiv.textContent = percentage + "%";
+
+                    // Pages based on generated EPUB locations (CFI positions)
+                    const cfi = location.start.cfi;
+                    const current =
+                        reader.book.locations.locationFromCfi(cfi) || 0; // 1-based index typically
+                    const total = reader.book.locations.length() || 0;
+                    const remaining = Math.max(total - current, 0);
+
+                    if (total > 0) {
+                        pagesDiv.textContent = current + "/" + total;
+                        pagesDiv.style.visibility = "visible";
+                    } else {
+                        pagesDiv.textContent = "";
+                        pagesDiv.style.visibility = "hidden";
+                    }
                 });
                 reader.rendition.reportLocation();
                 progressDiv.style.visibility = "visible";

cps/templates/read.html

@@ -57,6 +57,13 @@
           data-view="Bookmarks"
           >Bookmarks</a
         >
+        <a
+          id="back-button"
+          data-view="Back to Books"
+          href="{{ url_for('web.index') }}"
+        >
+          Books
+        </a>
         <!--a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a-->
       </div>
       <div id="tocView" class="view"></div>
@@ -95,7 +102,10 @@
       <div id="prev" class="arrow">‹</div>
       <div id="viewer"></div>
       <div id="next" class="arrow">›</div>
-      <div id="progress">0%</div>
+      <div class="read-footer">
+        <div id="pages-count"></div>
+        <div id="progress">0%</div>
+      </div>
       <div id="loader">
         <img src="{{ url_for('static', filename='img/loader.gif') }}" />
       </div>
@@ -167,9 +177,18 @@
             id="navGestures"
             onclick="selectNavMode('gestures')"
           >
-            <span id="navGesturesTick"> </span>{{_('Gestures')}}
+            <span id="navGesturesTick"> </span>{{_('Gestures (for mobile)')}}
           </button>
         </div>
+        <div class="form-group">
+          <p>
+            <input
+              type="checkbox"
+              id="showPagesCount"
+              name="showPagesCount"
+            />{{_('Show pages count')}}
+          </p>
+        </div>
         <div class="form-group fontSizeWrapper">
           <label>{{ _('Font Size') }}</label>
           <div
@@ -390,9 +409,28 @@
       // Initialize nav mode on load
       (function () {
         var savedMode =
-          localStorage.getItem("calibre.reader.navMode") || "gestures";
+          localStorage.getItem("calibre.reader.navMode") || "sizes";
         selectNavMode(savedMode);
       })();
+
+      // Pages counter visibility setting
+      (function () {
+        var checkbox = document.getElementById("showPagesCount");
+        var pagesEl = document.getElementById("pages-count");
+        var key = "calibre.reader.showPages";
+        var saved = localStorage.getItem(key);
+        var show = saved === null ? true : saved === "true";
+        if (checkbox) checkbox.checked = show;
+        if (pagesEl) pagesEl.style.display = show ? "" : "none";
+        if (checkbox) {
+          checkbox.addEventListener("change", function () {
+            var val = checkbox.checked;
+            localStorage.setItem(key, String(val));
+            var target = document.getElementById("pages-count");
+            if (target) target.style.visibility = val ? "visible" : "hidden";
+          });
+        }
+      })();
     </script>
     <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/libs/hammer.min.js') }}"></script>