From 8f463fd73fd4705fc58fba58b9394f31fc9c0c9a Mon Sep 17 00:00:00 2001 From: Patrick G Date: Tue, 25 Jul 2017 10:55:20 -0400 Subject: [PATCH] Improved ePubViewer UI and fixed sidebar bugs --- static/reader/epub/index.html | 238 ++++++++++++++++++---------------- static/reader/epub/script.js | 49 +++++-- static/reader/epub/style.css | 85 ++++++++++-- 3 files changed, 235 insertions(+), 137 deletions(-) diff --git a/static/reader/epub/index.html b/static/reader/epub/index.html index 7e1cdd87..028419e5 100644 --- a/static/reader/epub/index.html +++ b/static/reader/epub/index.html @@ -44,143 +44,146 @@
-
+
Table of Contents close
-
- +
+
-
+
Info close
-
-
-
- cover +
+
+
+
+ cover +
+
+
+
+
-
-
-
-
-
-
-
- % read -
-
- Page - - of - +
+
+ % read +
+
+ Page + + of + +
-
+
Settings close
-
-
-
Font
- -
-
-
Theme
- -
-
-
Line Spacing
- -
-
-
Font Size
- -
-
-
Margin
- +
+
+
+
Font
+ +
+
+
Theme
+ +
+
+
Line Spacing
+ +
+
+
Font Size
+ +
+
+
Margin
+ +
+
+
Fullscreen
+ +
-
-
Fullscreen
- +
+
+ + Reset Settings
+ Reset All + +

+ + Report a bug

+ ePubViewer Copyright 2017 Patrick G +
-
-
- - Reset Settings
- Reset All - -

- - Report a bug

- ePubViewer Copyright 2017 Patrick G - -
@@ -218,6 +221,17 @@
+ + + diff --git a/static/reader/epub/script.js b/static/reader/epub/script.js index 4febed8d..732c374e 100644 --- a/static/reader/epub/script.js +++ b/static/reader/epub/script.js @@ -1,3 +1,15 @@ +(function(d){ + var c = " ", f = "flex", fw = "-webkit-"+f, e = d.createElement('b'); + try { + e.style.display = fw; + e.style.display = f; + c += (e.style.display == f || e.style.display == fw) ? f : "no-"+f; + } catch(e) { + c += "no-"+f; + } + d.documentElement.className += c; +})(document); + ePubViewer = {}; ePubViewer.state = { "loaded": false, @@ -16,35 +28,38 @@ ePubViewer.state = { ePubViewer.themes = { "SepiaLight": { "background-color": "#FBF0D9", - "color": "#704214" - }, - "SepiaDark": { - "color": "#FBF0D9", - "background-color": "#704214" + "color": "#704214", + "light": true }, "White": { "color": "#000000", - "background-color": "#FFFFFF" + "background-color": "#FFFFFF", + "light": true }, "Black": { "background-color": "#000000", - "color": "#FFFFFF" + "color": "#FFFFFF", + "light": false }, "Gray": { "background-color": "#333333", - "color": "#EEEEEE" + "color": "#EEEEEE", + "light": false }, "Dark": { "background-color": "#262c2e", - "color": "#f0f2f3" + "color": "#f0f2f3", + "light": false }, "SolarizedLight": { "background-color": "#fdf6e3", - "color": "#657b83" + "color": "#657b83", + "light": true }, "SolarizedDark": { "color": "#839496", - "background-color": "#002b36" + "background-color": "#002b36", + "light": false }, }; ePubViewer.fonts = { @@ -241,6 +256,16 @@ ePubViewer.functions.applySettings = function () { var font = ePubViewer.fonts[ePubViewer.settings.font] || ePubViewer.fonts.ArbutusSlab; var theme = ePubViewer.themes[ePubViewer.settings.theme] || ePubViewer.themes.SepiaLight; + try { + if (theme["light"]) { + document.body.classList.remove("dark"); + document.body.classList.add("light"); + } else { + document.body.classList.add("dark"); + document.body.classList.remove("light"); + } + } catch (ex) {} + try { var doc = ePubViewer.state.book.renderer.doc; if (doc.getElementById("ePubViewerSettings") === null) { @@ -638,5 +663,7 @@ ePubViewer.init = function () { }); } })(); + window.clearTimeout(ePubViewerLoadError); + document.body.parentElement.classList.remove("load-error"); }; ePubViewer.init(); \ No newline at end of file diff --git a/static/reader/epub/style.css b/static/reader/epub/style.css index 1012fc25..04e663c1 100644 --- a/static/reader/epub/style.css +++ b/static/reader/epub/style.css @@ -169,12 +169,26 @@ border-right: 1px solid rgba(0,0,0,0.1); } +.reader .main .sidebar .sidebar-inner { + display: block; + display: flex; + height: 100%; + flex-direction: column; +} + +.reader .main .sidebar .sidebar-inner .sidebar-contents { + flex: 1; + height: 100%; + overflow-y: auto; +} + .reader .main .sidebar .sidebar-header { display: block; padding: 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 5px; font-size: 130%; + flex: 0 0 auto; } .reader .main .sidebar .sidebar-header .x { @@ -200,10 +214,12 @@ .reader .main .sidebar .toc-sidebar .toc .toc-entry:visited { display: block; white-space: nowrap; + width: 100%; text-overflow: ellipsis; padding: 3px; color: inherit; text-decoration: none; + overflow-x: hidden; } .reader .main .sidebar .toc-sidebar .toc .toc-entry:hover { @@ -266,23 +282,40 @@ flex: 1; } +select, +button { + background: transparent; + width: 130px; + padding: 5px; + font-size: 16px; + border: 1px solid rgba(0,0,0,0.5); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: rgba(0,0,0,0.3); + color: rgba(255,255,255,0.8); + border-radius: 5px; +} + select { - background: transparent; - width: 150px; - padding: 5px 35px 5px 5px; - font-size: 16px; - border: 1px solid #ccc; - height: 34px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) 96% / 15% no-repeat #eee; + padding: 5px 35px 5px 5px; +} + +select:hover, +button:hover { + background: rgba(0,0,0,0.45); + cursor: pointer; } -select:hover { - border: 1px solid #999; - background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) 96% / 15% no-repeat #DDD; - cursor: pointer; +body.light select, +body.light button { + background: rgba(255,255,255,0.3); + color: rgba(0,0,0,0.8); +} + +body.light select:hover, +body.light button:hover { + background: rgba(255,255,255,0.45); } select::-ms-expand { @@ -291,6 +324,7 @@ select::-ms-expand { .reader .main .sidebar div.visible { display: block; + display: flex; } .reader * { @@ -302,4 +336,27 @@ select::-ms-expand { .reader .hidden { display: none !important; +} + +.error.banner { + display: none; + position: fixed; + z-index: 1000000000; + top: 0; + left: 0; + right: 0; + color: #FFFFFF; + background: #a94442; + padding: 20px; + font-family: 'Open Sans', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + +html.no-flex .error.banner.incompatible-browser { + display: block; + z-index: 1000000005; +} + +html.load-error .error.banner.load-error { + display: block; + z-index: 1000000004; } \ No newline at end of file