client/views: apply correct margins, fix android sizing

Images in fit mode 'width' and 'both' would extend to the very edge
of the screen on desktop. The right side margin was previously only
addressed on mobile from god knows where... (the lack of a scrollbar?)
Instead of trying to guess the post content width, we can set
overflow-x: hidden on the container which lets us get the real value.
Viewport height on Android was wrong when the address bar was shown,
causing unnecessary and jumpy image resizing. Use iOS hack.
All this sizing bs should really be done by toggling classes and using
regular css min/max width. For "Upscale small posts" option as well.

client/js/controls/post_content_control.js

@@ -5,11 +5,12 @@ const views = require("../util/views.js");
 const optimizedResize = require("../util/optimized_resize.js");
 
 class PostContentControl {
-    constructor(hostNode, post, viewportSizeCalculator, fitFunctionOverride) {
+    constructor(hostNode, post, viewportSizeCalculator, overflowNode, fitFunctionOverride) {
         this._post = post;
         this._viewportSizeCalculator = viewportSizeCalculator;
         this._hostNode = hostNode;
         this._template = views.getTemplate("post-content");
+        this._overflowNode = overflowNode;
 
         let fitMode = settings.get().fitMode;
         if (typeof fitFunctionOverride !== "undefined") {
@@ -36,6 +37,7 @@ class PostContentControl {
     }
 
     fitWidth() {
+        if (this._overflowNode) this._overflowNode.style.overflowX = "hidden";
         this._currentFitFunction = this.fitWidth;
         const mul = this._post.canvasHeight / this._post.canvasWidth;
         let width = this._viewportWidth;
@@ -46,6 +48,7 @@ class PostContentControl {
     }
 
     fitHeight() {
+        if (this._overflowNode) this._overflowNode.style.overflowX = "visible";
         this._currentFitFunction = this.fitHeight;
         const mul = this._post.canvasWidth / this._post.canvasHeight;
         let height = this._viewportHeight;
@@ -56,16 +59,17 @@ class PostContentControl {
     }
 
     fitBoth() {
+        if (this._overflowNode) this._overflowNode.style.overflowX = "hidden";
         this._currentFitFunction = this.fitBoth;
         let mul = this._post.canvasHeight / this._post.canvasWidth;
-        if (this._viewportWidth * mul < this._viewportHeight) {
         let width = this._viewportWidth;
+        let height = this._viewportHeight;
+        if (width * mul < height) {
             if (!settings.get().upscaleSmallPosts) {
                 width = Math.min(this._post.canvasWidth, width);
             }
             this._resize(width, width * mul);
         } else {
-            let height = this._viewportHeight;
             if (!settings.get().upscaleSmallPosts) {
                 height = Math.min(this._post.canvasHeight, height);
             }
@@ -74,6 +78,7 @@ class PostContentControl {
     }
 
     fitOriginal() {
+        if (this._overflowNode) this._overflowNode.style.overflowX = "visible";
         this._currentFitFunction = this.fitOriginal;
         this._resize(this._post.canvasWidth, this._post.canvasHeight);
     }

client/js/views/home_view.js

@@ -65,6 +65,7 @@ class HomeView {
                 () => {
                     return [window.innerWidth * 0.8, window.innerHeight * 0.7];
                 },
+                null,
                 "fit-both"
             );
 

client/js/views/post_main_view.js

@@ -1,6 +1,6 @@
 "use strict";
 
-const iosCorrectedInnerHeight = require("ios-inner-height");
+const iosCorrectedInnerHeight = require("@formfunfunction/inner-height");
 const router = require("../router.js");
 const views = require("../util/views.js");
 const uri = require("../util/uri.js");
@@ -28,6 +28,9 @@ class PostMainView {
         const topNavigationNode =
             document.body.querySelector("#top-navigation");
 
+        const contentNode =
+            document.querySelector(".post-view > .content");
+
         this._postContentControl = new PostContentControl(
             postContainerNode,
             ctx.post,
@@ -35,14 +38,13 @@ class PostMainView {
                 const margin = sidebarNode.getBoundingClientRect().left;
 
                 return [
-                    window.innerWidth -
-                        postContainerNode.getBoundingClientRect().left -
-                        margin,
+                    postContainerNode.getBoundingClientRect().width,
                     iosCorrectedInnerHeight() -
                         topNavigationNode.getBoundingClientRect().height -
                         margin * 2,
                 ];
-            }
+            },
+            contentNode
         );
 
         this._postNotesOverlayControl = new PostNotesOverlayControl(

client/package-lock.json

@@ -6,9 +6,9 @@
     "": {
       "name": "szurubooru",
       "dependencies": {
+        "@formfunfunction/inner-height": "^2.0.0",
         "dompurify": "^2.0.17",
         "font-awesome": "^4.7.0",
-        "ios-inner-height": "^1.0.3",
         "js-cookie": "^2.2.0",
         "marked": "^4.0.10",
         "mousetrap": "^1.6.2",
@@ -49,6 +49,14 @@
       "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
       "dev": true
     },
+    "node_modules/@formfunfunction/inner-height": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formfunfunction/inner-height/-/inner-height-2.0.0.tgz",
+      "integrity": "sha512-lxBRi80sPSuoCkSyutR47wRhdbxyUL5wuwweqCGje1XKiUbY1K+QFhNjq2VJsMl1Q1wnwpLcqfpZGXTZmm3vWA==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/@jimp/bmp": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.13.0.tgz",
@@ -2564,14 +2572,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "node_modules/ios-inner-height": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/ios-inner-height/-/ios-inner-height-1.0.3.tgz",
-      "integrity": "sha512-GayJWoFxYHDx/gkfz4nIxNdsqB3nAJQHKV5pDBvig6he8+NxBSYxN+D7oarbqZfW2p6uera3q9NDr4Jgdafiog==",
-      "engines": {
-        "node": ">=0.10.3"
-      }
-    },
     "node_modules/is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
@@ -4619,6 +4619,11 @@
         }
       }
     },
+    "@formfunfunction/inner-height": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formfunfunction/inner-height/-/inner-height-2.0.0.tgz",
+      "integrity": "sha512-lxBRi80sPSuoCkSyutR47wRhdbxyUL5wuwweqCGje1XKiUbY1K+QFhNjq2VJsMl1Q1wnwpLcqfpZGXTZmm3vWA=="
+    },
     "@jimp/bmp": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.13.0.tgz",
@@ -6934,11 +6939,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "ios-inner-height": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/ios-inner-height/-/ios-inner-height-1.0.3.tgz",
-      "integrity": "sha512-GayJWoFxYHDx/gkfz4nIxNdsqB3nAJQHKV5pDBvig6he8+NxBSYxN+D7oarbqZfW2p6uera3q9NDr4Jgdafiog=="
-    },
     "is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",

client/package.json

@@ -7,9 +7,9 @@
     "build-container": "docker build -t szurubooru/client:dev ."
   },
   "dependencies": {
+    "@formfunfunction/inner-height": "^2.0.0",
     "dompurify": "^2.0.17",
     "font-awesome": "^4.7.0",
-    "ios-inner-height": "^1.0.3",
     "js-cookie": "^2.2.0",
     "marked": "^4.0.10",
     "mousetrap": "^1.6.2",