add epub reader flow setting

cps/static/css/main.css

@@ -416,7 +416,7 @@ input:-moz-placeholder { color: #454545; }
 
 .md-content > div p {
   margin: 0;
-  padding: 10px 0;
+  padding: 0;
 }
 
 #searchResults li > p {
@@ -551,11 +551,11 @@ input:-moz-placeholder { color: #454545; }
   position: relative;
   border-radius: 3px;
   margin: 0 auto;
-  height: 320px;
+  height: 265px;
 }
 
 .md-content > div {
-  padding: 15px 40px 30px;
+  padding: 15px 40px 10px;
   margin: 0;
   font-weight: 300;
   font-size: 14px;
@@ -572,7 +572,7 @@ input:-moz-placeholder { color: #454545; }
   border: none;
   text-align: center;
   text-decoration: none;
-  margin-top: 5%;
+  margin-top: 2%;
   margin-right: 1%;
   font-size: 16px;
 }

cps/static/css/reader.css

@@ -4,7 +4,7 @@
 .slider {
     position: absolute;
     top: 50%;
-    transform: translate(0,-50%);
+    transform: translate(0,-20%);
     width: 90%;
     height: 60px;
     background: transparent;

cps/templates/read.html

@@ -83,6 +83,16 @@
                   <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>
+                  <p>
+                    <!-- Hardcoded pagination as the initial value as it is the "default" flow. Need to find a way to do this dynamically on startup-->
+                    <label for="readerFlow">{{_('Reader flow:')}}</label>
+                    <select id="readerFlow" name="readerFlow">
+                      <option value="paginated">{{_('Paginated')}}</option>
+                      <option value="scrolled-doc">{{_('Scrolled')}}</option>
+                    </select>
+                  </p>
+              </div>
               <div>
                   <p>
                     <input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
@@ -146,6 +156,17 @@
         fontSizeFader.addEventListener ("change", function () {
             reader.rendition.themes.fontSize(`${this.value}%`)
         });
+
+        // reader flow settings logic
+        let readerFlow = document.getElementById('readerFlow');
+        readerFlow.addEventListener ("change", function () {
+          reader.rendition.flow(this.value);
+          if (this.value === "paginated") {
+            document.getElementById("divider").classList.add("show");
+          } else {
+            document.getElementById("divider").classList.remove("show");
+          }
+        });
       </script>
       <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>