From 6b89e45caaa566895d505b56c9ef272dd67f1d76 Mon Sep 17 00:00:00 2001 From: Niki Roo Date: Wed, 13 May 2020 13:10:58 +0200 Subject: [PATCH] chapter/para selection box --- .../fanfix/library/WebLibraryServer.java | 60 +++++++++- src/be/nikiroo/fanfix/library/web/style.css | 109 +++++++++++++----- 2 files changed, 134 insertions(+), 35 deletions(-) diff --git a/src/be/nikiroo/fanfix/library/WebLibraryServer.java b/src/be/nikiroo/fanfix/library/WebLibraryServer.java index fe79f96..982d224 100644 --- a/src/be/nikiroo/fanfix/library/WebLibraryServer.java +++ b/src/be/nikiroo/fanfix/library/WebLibraryServer.java @@ -952,12 +952,47 @@ public class WebLibraryServer implements Runnable { builder.append(String.format("" // + "
\n" // + "\t<<\n"// - + "\t<\n"// - + "\t>\n"// - + "\t>>\n"// - + "
\n", // + + "\t<\n" // + + "\t
\n" // + + "\t\t
%d
\n" // + + "\t\t
\n", // disabledLeft, first, // disabledLeft, previous, // + paragraph > 0 ? paragraph : chapter // + )); + + // List of chap/para links + + String blink = "/view/story/" + luid + "/"; + appendItemA(builder, 3, blink + "0", "Description", + paragraph == 0 && chapter == 0); + + if (paragraph > 0) { + blink = blink + chapter + "/"; + for (int i = 1; i <= chap.getParagraphs().size(); i++) { + appendItemA(builder, 3, blink + i, "Image " + i, + paragraph == i); + } + } else { + int i = 1; + for (Chapter c : story.getChapters()) { + String chapName = "Chapter " + c.getNumber(); + if (c.getName() != null && !c.getName().isEmpty()) { + chapName += ": " + c.getName(); + } + + appendItemA(builder, 3, blink + i, chapName, chapter == i); + + i++; + } + } + + builder.append(String.format("" // + + "\t\t
\n" // + + "\t
\n" // + + "\t>\n" // + + "\t>>\n"// + + "\n", // disabledRight, next, // disabledRight, last // )); @@ -1178,6 +1213,23 @@ public class WebLibraryServer implements Runnable { builder.append("\n"); } + private void appendItemA(StringBuilder builder, int depth, String link, + String name, boolean selected) { + for (int i = 0; i < depth; i++) { + builder.append("\t"); + } + + builder.append(""); + builder.append(name); + builder.append("\n"); + } + public static void main(String[] args) throws IOException { Instance.init(); WebLibraryServer web = new WebLibraryServer(false); diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css index c84c36d..3e59952 100644 --- a/src/be/nikiroo/fanfix/library/web/style.css +++ b/src/be/nikiroo/fanfix/library/web/style.css @@ -2,6 +2,9 @@ * #AAA391: main gray * #555C7E: reverse main * + * #bac2e1: button border + * #DCE4F3: button hover + * * #ddffdd: background pastel green * #88dd88: for border * @@ -58,7 +61,7 @@ html, body, .main { cursor: pointer; } -a:hover { +a:not(.selected):hover { background-color: rgb(225, 225, 225); } @@ -71,6 +74,55 @@ h3 { margin-left: 20px; } +.itemsbox .items { + display: block; + position: absolute; + overflow-y: auto; + + transition: all 0.5s ease; + visibility: hidden; + opacity: 0; +} + +.itemsbox:hover .items, .itemsbox .items:hover { + visibility: visible; + opacity: 1; +} + +.itemsbox .items .item { + display: block; + padding: 5px; + color: black; + cursor: pointer; + text-decoration: none; +} + +.itemsbox .items .item.selected { + font-weight: bold; + cursor: default; +} + +.itemsbox .items .item:not(.selected):hover, .button:hover { + background-color: #DCE4F3; +} + +.itemsbox .items .item[disabled], .button[disabled] { + pointer-events: none; + background-color: #aaa; + filter: grayscale(100%); + border-color: #AAA391; +} + +.button { + display: inline-block; + text-align: center; + text-decoration: none; + background-position: center; + background-repeat: no-repeat; + border: 1px solid #bac2e1; + border-radius: 5px; +} + .login { width: 250px; display: flex; @@ -175,10 +227,10 @@ h3 { margin: auto; } -.bar.navbar { padding-left: calc(50% - (4 * 64px / 2)); } +.bar.navbar { padding-left: calc(50% - (5 * (64px + 5px) / 2)); } -.bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); } -.bar.optionbar.s4 { padding-left: calc(50% - (4 * 64px / 2)); } +.bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); } +.bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); } .bar.optionbar { bottom: 0; @@ -187,38 +239,33 @@ h3 { .bar .button { height: 54px; width: 54px; - line-height: 64px; - display: inline-block; - text-align: center; - color: transparent; - text-decoration: none; - background-position: center; - background-repeat: no-repeat; - border-radius: 5px; - border: 1px solid #bac2e1; + line-height: 54px; margin: 5px; } -.bar .button[disabled] { - pointer-events: none; - background-color: #aaa; - filter: grayscale(100%); - border-color: #AAA391; +.bar .gotobox { + display: inline-block; } -.bar .button:hover { - background-color: bac2e1; +.bar .gotobox .items { + background-color: white; + border: 1px solid gray; + border-radius: 5px; + width: 196px; + margin: -5px; + margin-left: -66px; + max-height: 400px; } -.bar .button.first { background-image: url('/arrow_double_left-32x32.png'); } -.bar .button.previous { background-image: url('/arrow_left-32x32.png'); } -.bar .button.next { background-image: url('/arrow_right-32x32.png'); } -.bar .button.last { background-image: url('/arrow_double_right-32x32.png'); } +.bar .button.first { color: transparent; background-image: url('/arrow_double_left-32x32.png'); } +.bar .button.previous { color: transparent; background-image: url('/arrow_left-32x32.png'); } +.bar .button.next { color: transparent; background-image: url('/arrow_right-32x32.png'); } +.bar .button.last { color: transparent; background-image: url('/arrow_double_right-32x32.png'); } -.bar .button.back { background-image: url('/back-32x32.png'); } -.bar .button.zoomreal { background-image: url('/actual_size-32x32.png'); } -.bar .button.zoomwidth { background-image: url('/fit_to_width-32x32.png'); } -.bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); } +.bar .button.back { color: transparent; background-image: url('/back-32x32.png'); } +.bar .button.zoomreal { color: transparent; background-image: url('/actual_size-32x32.png'); } +.bar .button.zoomwidth { color: transparent; background-image: url('/fit_to_width-32x32.png'); } +.bar .button.zoomheight { color: transparent; background-image: url('/fit_to_height-32x32.png'); } .viewer { padding-top: 64px; @@ -272,8 +319,8 @@ a.viewer.link:hover { max-width: 800px; } - .bar.navbar { padding-left: calc(400px - (4 * 64px / 2)); } + .bar.navbar { padding-left: calc(400px - (5 * (64px + 5px) / 2)); } - .bar.optionbar.s1 { padding-left: calc(400px - (1 * 64px / 2)); } - .bar.optionbar.s4 { padding-left: calc(400px - (4 * 64px / 2)); } + .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); } + .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); } } -- 2.27.0