weblib: zoom: width AND width-limited + fix height icon

diff --git a/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java b/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java
index 524fea36182ed1874c3f7946e6d86fd3578e9801..93fec59a8a06eba81f51d5033c9021d45df5cee4 100644 (file)
--- a/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java
+++ b/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java
@@ -332,7 +332,8 @@ abstract class WebLibraryServerHtml implements Runnable {
                content.add(templates.login(uri));
 
                return NanoHTTPD.newChunkedResponse(Status.FORBIDDEN,
-                               NanoHTTPD.MIME_HTML, templates.index(true, content).read());
+                               NanoHTTPD.MIME_HTML,
+                               templates.index(true, false, content).read());
        }
 
        private Response root(IHTTPSession session, Map<String, String> cookies,
@@ -475,7 +476,7 @@ abstract class WebLibraryServerHtml implements Runnable {
                booklines.add(0, templates.browser(browser, filter, selects));
 
                return newInputStreamResponse(NanoHTTPD.MIME_HTML,
-                               templates.index(true, booklines).read());
+                               templates.index(true, false, booklines).read());
        }
 
        private Response getViewer(Map<String, String> cookies, String uri,
@@ -552,6 +553,7 @@ abstract class WebLibraryServerHtml implements Runnable {
                        boolean disabledRight = false;
                        boolean disabledZoomReal = false;
                        boolean disabledZoomWidth = false;
+                       boolean disabledZoomWidthLimited = false;
                        boolean disabledZoomHeight = false;
 
                        Template viewerItem = null;
@@ -629,29 +631,36 @@ abstract class WebLibraryServerHtml implements Runnable {
                                }
 
                                if (para.getType() == ParagraphType.IMAGE) {
-                                       String zoomStyle = "max-width: 100%;";
-                                       disabledZoomWidth = true;
+                                       // default values:
+                                       String zoomStyle = "max-width: 800px;";
+                                       disabledZoomWidthLimited = true;
+
                                        String zoomOption = cookies.get("zoom");
                                        if (zoomOption != null && !zoomOption.isEmpty()) {
                                                if (zoomOption.equals("real")) {
                                                        zoomStyle = "";
-                                                       disabledZoomWidth = false;
+                                                       disabledZoomWidthLimited = false;
                                                        disabledZoomReal = true;
+                                               } else if (zoomOption.equals("widthlimited")) {
+                                                       // default
                                                } else if (zoomOption.equals("width")) {
-                                                       zoomStyle = "max-width: 100%;";
+                                                       zoomStyle = "width: 100%;";
+                                                       disabledZoomWidthLimited = false;
+                                                       disabledZoomWidth = true;
                                                } else if (zoomOption.equals("height")) {
                                                        // see height of navbar + optionbar
                                                        zoomStyle = "max-height: calc(100% - 128px);";
-                                                       disabledZoomWidth = false;
+                                                       disabledZoomWidthLimited = false;
                                                        disabledZoomHeight = true;
                                                }
                                        }
 
-                                       viewerItem = templates.viewerImage(WebLibraryUrls
-                                                       .getStoryUrl(luid, chapter, paragraph), //
+                                       viewerItem = templates.viewerImage(
+                                                       WebLibraryUrls.getStoryUrl(luid, chapter,
+                                                                       paragraph), //
                                                        disabledRight ? null : next, //
                                                        zoomStyle //
-                                                       );
+                                       );
                                } else {
                                        viewerItem = templates.viewerText(null,
                                                        new TextOutput(false).convert(para));
@@ -716,25 +725,29 @@ abstract class WebLibraryServerHtml implements Runnable {
                                buttons.add(templates.viewerOptionbarButton( //
                                                "1:1", uri + "?optionName=zoom&optionValue=real",
                                                "zoomreal", disabledZoomReal));
+                               buttons.add(templates.viewerOptionbarButton( //
+                                               "]width[",
+                                               uri + "?optionName=zoom&optionValue=widthlimited",
+                                               "zoomwidthlimited", disabledZoomWidthLimited));
                                buttons.add(templates.viewerOptionbarButton( //
                                                "Width", uri + "?optionName=zoom&optionValue=width",
                                                "zoomwidth", disabledZoomWidth));
                                buttons.add(templates.viewerOptionbarButton( //
                                                "Height", uri + "?optionName=zoom&optionValue=height",
-                                               "zoomHeight", disabledZoomHeight));
+                                               "zoomheight", disabledZoomHeight));
                        }
 
                        // Optionbar
 
                        Template optionbar = templates.viewerOptionbar( //
-                                       (paragraph > 0) ? 4 : 1, //
+                                       (paragraph > 0) ? 5 : 1, //
                                        buttons //
                        );
 
                        // Full content
 
                        return newInputStreamResponse(NanoHTTPD.MIME_HTML, //
-                                       templates.index(false, Arrays.asList( //
+                                       templates.index(false, (paragraph > 0), Arrays.asList( //
                                                        navbar, //
                                                        viewerItem, //
                                                        optionbar //

diff --git a/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-32x32.png b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-32x32.png
new file mode 100644 (file)
index 0000000..4971046
Binary files /dev/null and b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-32x32.png differ

diff --git a/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-64x64.png b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-64x64.png
new file mode 100644 (file)
index 0000000..bd97942
Binary files /dev/null and b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-64x64.png differ

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index bb91002920e94bd593d125ff8abe26c714f4c5db..5a4c51ff9d150109e261ec7e55be23f11367fc04 100644 (file)
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -227,6 +227,7 @@ h3 {
 
 .bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); }
 .bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); }
+.bar.optionbar.s5 { padding-left: calc(50% - (5 * (64px + 5px) / 2)); }
 
 .bar.optionbar {
        bottom: 0;
@@ -258,10 +259,11 @@ h3 {
 .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       { 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'); }
+.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.zoomwidthlimited { color: transparent; background-image: url('/fit_to_width_limited-32x32.png'); }
+.bar .button.zoomheight       { color: transparent; background-image: url('/fit_to_height-32x32.png');        }
 
 .viewer {
        padding-top: 64px;
@@ -316,18 +318,19 @@ a.viewer.link:hover {
        color: #AAA391;
 }
 
-@media(min-width: 800px) {
-        .main {
+@media(min-width: 800px) { 
+        .main:not(.fullscreen) {
                max-width: 800px;
         }
         
-       .bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
+       .main:not(.fullscreen) .bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
        
-       .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
-       .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
+       .main:not(.fullscreen) .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
+       .main:not(.fullscreen) .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
+       .main:not(.fullscreen) .bar.optionbar.s5 { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
        
-       .desc { flex-direction: row; }
-       .desc .cover img {
+       .main:not(.fullscreen) .desc { flex-direction: row; }
+       .main:not(.fullscreen) .desc .cover img {
                width: 200px;
                padding-right: 10px;
        }

diff --git a/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java b/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java
index cdc936ab6ce72a921233b9061d3579235795a1cf..25644446db3bdc5ada11122d07e3295bd3efc663 100644 (file)
--- a/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java
+++ b/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java
@@ -44,7 +44,8 @@ public class WebLibraryServerTemplates {
                ;
        }
 
-       public Template index(boolean banner, List<Template> content) {
+       public Template index(boolean banner, boolean fullscreen,
+                       List<Template> content) {
                String favicon = "favicon.ico";
                String icon = Instance.getInstance().getUiConfig()
                                .getString(UiConfig.PROGRAM_ICON);
@@ -55,6 +56,7 @@ public class WebLibraryServerTemplates {
                Template index = new Template(getClass(), "index.html") //
                                .set("title", "Fanfix") //
                                .set("favicon", favicon) //
+                               .set("mainClass", fullscreen ? "fullscreen" : "") //
                                .set("content", content) //
                ;
 
@@ -182,7 +184,7 @@ public class WebLibraryServerTemplates {
                ;
        }
 
-       // supported numberOfButtons = 4 or 1 or the moment
+       // supported numberOfButtons = 5 or 4 or 1 or the moment
        public Template viewerOptionbar(int numberOfButtons,
                        List<Template> buttons) {
                return new Template(getClass(), "viewer.optionbar.html") //

diff --git a/src/be/nikiroo/fanfix/library/web/templates/index.html b/src/be/nikiroo/fanfix/library/web/templates/index.html
index 6f3934e285f2d092d5054e6b013078b4ab6f41a0..4edc0b0afbc31e9dad4f7367248f7cd6b2daba34 100644 (file)
--- a/src/be/nikiroo/fanfix/library/web/templates/index.html
+++ b/src/be/nikiroo/fanfix/library/web/templates/index.html
@@ -45,6 +45,6 @@
        <link rel='icon' type='image/x-icon' href='/${favicon}' />
 </head>
 <body>
-       <div class='main'>
+       <div class='main ${mainClass}'>
 ${banner}${content}    </div>
 </body>

diff --git a/src/be/nikiroo/fanfix/library/web/templates/index.post.html b/src/be/nikiroo/fanfix/library/web/templates/index.post.html
deleted file mode 100644 (file)
index 52ba19e..0000000
--- a/src/be/nikiroo/fanfix/library/web/templates/index.post.html
+++ /dev/null
@@ -1,2 +0,0 @@
-       </div>
-</body>
\ No newline at end of file

diff --git a/src/be/nikiroo/fanfix/library/web/templates/index.pre.html b/src/be/nikiroo/fanfix/library/web/templates/index.pre.html
deleted file mode 100644 (file)
index 1e626ab..0000000
--- a/src/be/nikiroo/fanfix/library/web/templates/index.pre.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<!--
-       Copyright 2020 David ROULET
-       
-       This file is part of fanfix.
-       
-       fanfix is free software: you can redistribute it and/or modify
-       it under the terms of the GNU Affero General Public License as published by
-       the Free Software Foundation, either version 3 of the License, or
-       (at your option) any later version.
-       
-       fanfix is distributed in the hope that it will be useful,
-       but WITHOUT ANY WARRANTY; without even the implied warranty of
-       MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-       GNU Affero General Public License for more details.
-       
-       You should have received a copy of the GNU Affero General Public License
-       along with fanfix.  If not, see <https://www.gnu.org/licenses/>.
-       ___________________________________________________________________________
-
-       This website was coded by:
-                       A kangaroo.
-                                                  _  _
-                                                 (\\( \
-                                                  `.\-.)
-                              _...._            _,-"   `-.
-\                           ,"      `-._.- -.,-"       .  \
- \`.                      ,"                               `.
-  \ `-...__              /                           .   .:  y
-   `._     ``-...__     /                           ,"```-._/
-      `-._         ```-"                      |    /_          //
-          `.._                   _            ;   <_ \        //
-              ``-.___             `.           `-._ \ \      //
-                     `- <           `.     (\ _/)/ `.\/     //
-                         \            \     `       ^^^^^^^^^
-       ___________________________________________________________________________
-       
-       -->
-       <meta http-equiv="content-type" content="text/html; charset=utf-8">
-       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-       <title>${title}</title>
-       <link rel="stylesheet" type="text/css" href="/style.css" />
-       <link rel="icon" type="image/x-icon" href="/${favicon}" />
-</head>
-<body>
-       <div class='main'>