Merge e2bdb5feab into 376f687c38

Still not perfect for comment section and edit mode, but we should
really replace image resizing logic with css.

client/css/post-main-view.styl

@@ -39,12 +39,26 @@
 
     >.content
         width: 100%
+        &[data-fit=fit-original] .after-mobile-controls, &[data-fit=fit-height] .after-mobile-controls
+            width: auto
+            margin-right: 1.5em
+            @media (max-width: 1000px)
+                margin-right: 1em
 
     .post-container
         margin-bottom: 0.6em
 
         .post-content
             margin: 0
+            background-size: cover
+            background-repeat: no-repeat
+            background-origin: content-box
+            padding-right: 1.5em
+            @media (max-width: 1000px)
+                padding-right: 1em
+
+    .after-mobile-controls
+        width: 100%
 
     .after-mobile-controls
         width: 100%

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 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/controls/post_readonly_sidebar_control.js

@@ -175,6 +175,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
             oldNode.classList.remove("active");
         }
         newNode.classList.add("active");
+        document.querySelector(".content").dataset.fit = className;
     }
 
     _evtAddToFavoritesClick(e) {

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",