Merge e2bdb5feab into 61b9f81e39

2024-11-18 15:28:24 -06:00 · 2024-11-18 15:28:24 -06:00 · 13818d95b1
commit 13818d95b1
parent 61b9f81e39 e2bdb5feab
7 changed files with 47 additions and 24 deletions
--- a/client/css/post-main-view.styl
+++ b/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%
--- a/client/js/controls/post_content_control.js
+++ b/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);
    }
--- a/client/js/controls/post_readonly_sidebar_control.js
+++ b/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) {
--- a/client/js/views/home_view.js
+++ b/client/js/views/home_view.js
@ -65,6 +65,7 @@ class HomeView {
                () => {
                    return [window.innerWidth * 0.8, window.innerHeight * 0.7];
                },
+                null,
                "fit-both"
            );

--- a/client/js/views/post_main_view.js
+++ b/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(
--- a/client/package-lock.json
+++ b/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",
--- a/client/package.json
+++ b/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",