From bc41b8ad426b05ff51fc84d4826cda6f1dd642f1 Mon Sep 17 00:00:00 2001
From: Purbayan Chowdhury <pur.cho.99@gmail.com>
Date: Fri, 5 Jan 2024 23:53:46 +0530
Subject: [PATCH] Updated reader settings style

---
 cps/static/css/main.css       | 207 ++++++++++++++++++++--------------
 cps/static/css/reader.css     |  88 +++++++++++----
 cps/static/js/reading/epub.js |   4 +
 cps/templates/read.html       |  46 ++++----
 4 files changed, 220 insertions(+), 125 deletions(-)

diff --git a/cps/static/css/main.css b/cps/static/css/main.css
index 03cb0a01..7d31afe9 100644
--- a/cps/static/css/main.css
+++ b/cps/static/css/main.css
@@ -1,11 +1,10 @@
 @font-face {
-  font-family: 'fontello';
-  src: url('fonts/fontello.eot?60518104');
-  src:
-    url('fonts/fontello.eot?60518104#iefix') format('embedded-opentype'),
-    url('fonts/fontello.woff?60518104') format('woff'),
-    url('fonts/fontello.ttf?60518104') format('truetype'),
-    url('fonts/fontello.svg?60518104#fontello') format('svg');
+  font-family: "fontello";
+  src: url("fonts/fontello.eot?60518104");
+  src: url("fonts/fontello.eot?60518104#iefix") format("embedded-opentype"),
+    url("fonts/fontello.woff?60518104") format("woff"),
+    url("fonts/fontello.ttf?60518104") format("truetype"),
+    url("fonts/fontello.svg?60518104#fontello") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -16,7 +15,7 @@ body {
 }
 
 .myselect {
-    overflow: visible !important;
+  overflow: visible !important;
 }
 
 #main {
@@ -94,8 +93,12 @@ body {
   box-shadow: inset 0 0 6px rgba(155, 155, 155, 0.8);
 }
 
-#book-title { font-weight: 600; }
-#title-seperator { display: none; }
+#book-title {
+  font-weight: 600;
+}
+#title-seperator {
+  display: none;
+}
 
 #viewer {
   width: 80%;
@@ -201,10 +204,16 @@ body {
   max-width: 80%;
 }
 
-#title-controls { float: right; }
+#title-controls {
+  float: right;
+}
 
-#panels a::before { visibility: visible; }
-#panels a:hover { color: #aaa; }
+#panels a::before {
+  visibility: visible;
+}
+#panels a:hover {
+  color: #aaa;
+}
 
 .list_item.currentChapter > a,
 .list_item a:hover {
@@ -238,8 +247,12 @@ body {
   margin-top: -1px;
 }
 
-input::-webkit-input-placeholder { color: #454545; }
-input:-moz-placeholder { color: #454545; }
+input::-webkit-input-placeholder {
+  color: #454545;
+}
+input:-moz-placeholder {
+  color: #454545;
+}
 
 #divider {
   position: absolute;
@@ -379,14 +392,14 @@ input:-moz-placeholder { color: #454545; }
 }
 
 .toc_toggle::before {
-  content: '▸';
+  content: "▸";
   color: #fff;
   margin-right: -4px;
 }
 
 .currentChapter > .toc_toggle::before,
 .openChapter > .toc_toggle::before {
-  content: '▾';
+  content: "▾";
 }
 
 .view {
@@ -500,13 +513,25 @@ input:-moz-placeholder { color: #454545; }
   list-style-type: none;
 }
 
-#settingsPanel .xsmall { font-size: x-small; }
-#settingsPanel .small { font-size: small; }
-#settingsPanel .medium { font-size: medium; }
-#settingsPanel .large { font-size: large; }
-#settingsPanel .xlarge { font-size: x-large; }
+#settingsPanel .xsmall {
+  font-size: x-small;
+}
+#settingsPanel .small {
+  font-size: small;
+}
+#settingsPanel .medium {
+  font-size: medium;
+}
+#settingsPanel .large {
+  font-size: large;
+}
+#settingsPanel .xlarge {
+  font-size: x-large;
+}
 
-.highlight { background-color: yellow; }
+.highlight {
+  background-color: yellow;
+}
 
 .modal {
   position: fixed;
@@ -554,8 +579,14 @@ input:-moz-placeholder { color: #454545; }
   height: 320px;
 }
 
+.md-content label {
+  font-weight: 700;
+  font-size: 16px;
+  display: block;
+}
+
 .md-content > div {
-  padding: 15px 40px 30px;
+  padding: 8px 16px;
   margin: 0;
   font-weight: 300;
   font-size: 14px;
@@ -567,36 +598,6 @@ input:-moz-placeholder { color: #454545; }
   font-size: 0.8em;
 }
 
-.md-content .themes button {
-  display: inline-block;
-  border: none;
-  text-align: center;
-  text-decoration: none;
-  margin-top: 5%;
-  margin-right: 1%;
-  font-size: 16px;
-}
-
-.md-content .themes button.darkTheme {
-  background-color: #202124;
-  color: white;
-}
-
-.md-content .themes button.whiteTheme {
-  background-color: white;
-  color: black;
-}
-
-.md-content .themes button.sepiaTheme {
-  background-color: #ece1ca;
-  color: black;
-}
-
-.md-content .themes button.blackTheme {
-  background-color: black;
-  color: white;
-}
-
 /* Effect 1: Fade in and scale up */
 .md-effect-1 .md-content {
   -webkit-transform: scale(0.7);
@@ -713,11 +714,7 @@ input:-moz-placeholder { color: #454545; }
   }
 }
 
-@media only screen
-  and (min-device-width: 768px)
-  and (max-device-width: 1024px)
-  and (orientation: landscape)
-  /* and (-webkit-min-device-pixel-ratio: 2)*/ {
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) /* and (-webkit-min-device-pixel-ratio: 2) */ {
   #viewer {
     width: 80%;
     margin-left: 10%;
@@ -745,8 +742,8 @@ input:-moz-placeholder { color: #454545; }
   }
 
   #viewer iframe {
-   width: 300px;
-   height: 480px;
+    width: 300px;
+    height: 480px;
   }
 }
 
@@ -804,25 +801,69 @@ input:-moz-placeholder { color: #454545; }
   font-size: 112%;
 }
 
-.icon-search::before { content: '\e807'; } /* '' */
-.icon-resize-full-1::before { content: '\e804'; } /* '' */
-.icon-cancel-circled2::before { content: '\e80f'; } /* '' */
-.icon-link::before { content: '\e80d'; } /* '' */
-.icon-bookmark::before { content: '\e805'; } /* '' */
-.icon-bookmark-empty::before { content: '\e806'; } /* '' */
-.icon-download-cloud::before { content: '\e811'; } /* '' */
-.icon-edit::before { content: '\e814'; } /* '' */
-.icon-menu::before { content: '\e802'; } /* '' */
-.icon-cog::before { content: '\e813'; } /* '' */
-.icon-resize-full::before { content: '\e812'; } /* '' */
-.icon-cancel-circled::before { content: '\e80e'; } /* '' */
-.icon-up-dir::before { content: '\e80c'; } /* '' */
-.icon-right-dir::before { content: '\e80b'; } /* '' */
-.icon-angle-right::before { content: '\e809'; } /* '' */
-.icon-angle-down::before { content: '\e80a'; } /* '' */
-.icon-right::before { content: '\e815'; } /* '' */
-.icon-list-1::before { content: '\e803'; } /* '' */
-.icon-list-numbered::before { content: '\e801'; } /* '' */
-.icon-columns::before { content: '\e810'; } /* '' */
-.icon-list::before { content: '\e800'; } /* '' */
-.icon-resize-small::before { content: '\e808'; } /* '' */
+.icon-search::before {
+  content: "\e807";
+} /* '' */
+.icon-resize-full-1::before {
+  content: "\e804";
+} /* '' */
+.icon-cancel-circled2::before {
+  content: "\e80f";
+} /* '' */
+.icon-link::before {
+  content: "\e80d";
+} /* '' */
+.icon-bookmark::before {
+  content: "\e805";
+} /* '' */
+.icon-bookmark-empty::before {
+  content: "\e806";
+} /* '' */
+.icon-download-cloud::before {
+  content: "\e811";
+} /* '' */
+.icon-edit::before {
+  content: "\e814";
+} /* '' */
+.icon-menu::before {
+  content: "\e802";
+} /* '' */
+.icon-cog::before {
+  content: "\e813";
+} /* '' */
+.icon-resize-full::before {
+  content: "\e812";
+} /* '' */
+.icon-cancel-circled::before {
+  content: "\e80e";
+} /* '' */
+.icon-up-dir::before {
+  content: "\e80c";
+} /* '' */
+.icon-right-dir::before {
+  content: "\e80b";
+} /* '' */
+.icon-angle-right::before {
+  content: "\e809";
+} /* '' */
+.icon-angle-down::before {
+  content: "\e80a";
+} /* '' */
+.icon-right::before {
+  content: "\e815";
+} /* '' */
+.icon-list-1::before {
+  content: "\e803";
+} /* '' */
+.icon-list-numbered::before {
+  content: "\e801";
+} /* '' */
+.icon-columns::before {
+  content: "\e810";
+} /* '' */
+.icon-list::before {
+  content: "\e800";
+} /* '' */
+.icon-resize-small::before {
+  content: "\e808";
+} /* '' */
diff --git a/cps/static/css/reader.css b/cps/static/css/reader.css
index ec8054ca..35a8a0da 100644
--- a/cps/static/css/reader.css
+++ b/cps/static/css/reader.css
@@ -1,29 +1,73 @@
 .fontSizeWrapper {
-    position: relative;
+  position: relative;
 }
+
 .slider {
-    position: absolute;
-    top: 50%;
-    transform: translate(0,-50%);
-    width: 90%;
-    height: 60px;
-    background: transparent;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    box-shadow: 0px 15px 40px #7E6D5766;
+  /* position: absolute; */
+  /* top: 50%; */
+  /* transform: translate(0, -50%); */
+  /* width: 90%; */
+  margin-top: 10px;
+  background: transparent;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 15px 40px #7e6d5766;
 }
-.slider label {
-    font-size: 20px;
-    font-weight: 400;
-    font-family: Open Sans;
-    padding-right: 10px;
-    color: white;
+
+/* .slider label {
+  font-size: 20px;
+  font-weight: 400;
+  font-family: Open Sans;
+  padding-right: 10px;
+  color: white;
+} */
+
+input[type="checkbox"] {
+    margin-right: 10px;
 }
+
 .slider input[type="range"] {
-    width: 80%;
-    height: 5px;
-    background: black;
-    border: none;
-    outline: none;
+  display: block;
+  width: 80%;
+  height: 5px;
+  background: black;
+  border: none;
+  outline: none;
+  margin-right: 10px;
+}
+
+.button-group {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+}
+
+.themes button {
+  display: inline-block;
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  padding: 0.5rem;
+  font-size: 16px;
+}
+
+.md-content .themes button.darkTheme {
+  background-color: #202124;
+  color: white;
+}
+
+.md-content .themes button.whiteTheme {
+  background-color: white;
+  color: black;
+}
+
+.md-content .themes button.sepiaTheme {
+  background-color: #ece1ca;
+  color: black;
+}
+
+.md-content .themes button.blackTheme {
+  background-color: black;
+  color: white;
 }
diff --git a/cps/static/js/reading/epub.js b/cps/static/js/reading/epub.js
index 3dc6332d..c07fcc3a 100644
--- a/cps/static/js/reading/epub.js
+++ b/cps/static/js/reading/epub.js
@@ -81,4 +81,8 @@ let reader;
             alert(error);
         });
     }
+
+    // default settings load
+    const theme = localStorage.getItem("calibre.reader.theme") ?? "lightTheme";
+    selectTheme(theme);
 })();
diff --git a/cps/templates/read.html b/cps/templates/read.html
index fd90e8a7..bdae948e 100644
--- a/cps/templates/read.html
+++ b/cps/templates/read.html
@@ -76,29 +76,30 @@
     <div class="modal md-effect-1" id="settings-modal">
         <div class="md-content">
             <h3>{{_('Settings')}}</h3>
-            <div class="themes" id="themes">
-                Choose a theme below: <br />
-
-                <!-- Hardcoded a tick in the light theme button because it is the "default" theme. Need to find a way to do this dynamically on startup-->
-                <button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span
-                        id="lightSelected">✓</span>{{_('Light')}}</button>
-                <button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span
-                        id="darkSelected"> </span>{{_('Dark')}}</button>
-                <button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span
-                        id="sepiaSelected"> </span>{{_('Sepia')}}</button>
-                <button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span
-                        id="blackSelected"> </span>{{_('Black')}}</button>
+            <div class="themes form-group" id="themes">
+                <label>{{ _('Themes') }}</label>
+                <!-- <small>Choose a theme below:</small> -->
+                <div class="button-group">
+                    <!-- Hardcoded a tick in the light theme button because it is the "default" theme. Need to find a way to do this dynamically on startup-->
+                    <button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span
+                            id="lightSelected">✓</span>{{_('Light')}}</button>
+                    <button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span
+                            id="darkSelected"> </span>{{_('Dark')}}</button>
+                    <button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span
+                            id="sepiaSelected"> </span>{{_('Sepia')}}</button>
+                    <button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span
+                            id="blackSelected"> </span>{{_('Black')}}</button>
+                </div>
             </div>
-            <div>
-                <p>
-                    <input type="checkbox" id="sidebarReflow"
-                        name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
-                </p>
+            <div class="form-group">
+                <input type="checkbox" id="sidebarReflow" name="sidebarReflow">
+                <span>{{_('Reflow text when sidebars are open.')}}</span>
             </div>
-            <div class="fontSizeWrapper">
+            <div class="form-group fontSizeWrapper">
+                <label for="fader">{{ _('Font Sizes') }}</label>
                 <div class="slider">
-                    <label for="fader">{{ _('Font Sizes') }}</label>
                     <input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
+                    <span id="fontSizeValue">1</span>
                 </div>
             </div>
             <div class="closer icon-cancel-circled"></div>
@@ -149,6 +150,9 @@
             // Add tick mark to the button corresponding to the currently selected theme
             document.getElementById(id).querySelector("span").textContent = "✓";
 
+            // Saving theme to local storage
+            localStorage.setItem("calibre.reader.theme", id);
+
             // Apply theme to epubjs iframe
             reader.rendition.themes.select(id);
 
@@ -157,9 +161,11 @@
         }
 
         // font size settings logic
-        let fontSizeFader = document.getElementById('fontSizeFader');
+        const fontSizeFader = document.getElementById('fontSizeFader'),
+            fontSizeValue = document.getElementById('fontSizeValue');
         fontSizeFader.addEventListener("change", function () {
             reader.rendition.themes.fontSize(`${this.value}%`);
+            fontSizeValue.innerText = `${this.value / 100}`;
         });
     </script>
     <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>