From 81416b60243a8c446161aa4d30d09178c485bfd2 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 17 May 2023 04:17:44 +0200 Subject: [PATCH] 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 | 13 ++++++---- client/js/views/home_view.js | 1 + client/js/views/post_main_view.js | 12 ++++++---- client/package-lock.json | 28 +++++++++++----------- client/package.json | 2 +- 5 files changed, 32 insertions(+), 24 deletions(-) diff --git a/client/js/controls/post_content_control.js b/client/js/controls/post_content_control.js index 55daca76..6b321bb1 100644 --- 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); } diff --git a/client/js/views/home_view.js b/client/js/views/home_view.js index c91363b2..3e4779a0 100644 --- 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" ); diff --git a/client/js/views/post_main_view.js b/client/js/views/post_main_view.js index 5ef7f61e..939973dd 100644 --- 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( diff --git a/client/package-lock.json b/client/package-lock.json index 3aa4ca4a..be4a01a3 100644 --- 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", diff --git a/client/package.json b/client/package.json index 76376f82..b11594fc 100644 --- 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",