From 81416b60243a8c446161aa4d30d09178c485bfd2 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 17 May 2023 04:17:44 +0200 Subject: [PATCH 1/2] 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 55daca763..6b321bb10 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 c91363b21..3e4779a02 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 5ef7f61ee..939973dde 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 3aa4ca4a8..be4a01a37 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 76376f822..b11594fc3 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", From e2bdb5feabc3642fbf4b78305f2cd75845b86ba6 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 24 May 2023 09:40:46 +0200 Subject: [PATCH 2/2] client/posts: respect right side margin in original and height fit modes 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 | 60 ++++++++++++------- .../controls/post_readonly_sidebar_control.js | 1 + 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl index e643dfbde..5e37b194d 100644 --- a/client/css/post-main-view.styl +++ b/client/css/post-main-view.styl @@ -15,38 +15,53 @@ border: 0 outline: 0 - nav.buttons - margin-top: 0 - display: flex - flex-wrap: wrap - article - flex: 1 0 33% - a - display: inline-block - width: 100% - padding: 0.3em 0 - text-align: center - vertical-align: middle - transition: background 0.2s linear, box-shadow 0.2s linear - &:not(.inactive):hover - background: lighten($main-color, 90%) - i - font-size: 140% + >.sidebar>nav.buttons, >.content nav.buttons + margin-top: 0 + display: flex + flex-wrap: wrap + article + flex: 1 0 33% + a + display: inline-block + width: 100% + padding: 0.3em 0 text-align: center - @media (max-width: 800px) - margin-top: 2em + vertical-align: middle + transition: background 0.2s linear, box-shadow 0.2s linear + &:not(.inactive):hover + background: lighten($main-color, 90%) + i + font-size: 140% + text-align: center + @media (max-width: 800px) + margin-top: 0.6em + margin-bottom: 0.6em >.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: 2em + 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% .darktheme .post-view - >.sidebar + >.sidebar, >.content nav.buttons article a:not(.inactive):hover @@ -56,6 +71,8 @@ @media (max-width: 800px) .post-view flex-wrap: wrap + >.after-mobile-controls + order: 3 >.sidebar order: 2 min-width: 100% @@ -113,7 +130,6 @@ h1 margin-bottom: 0.5em .thumbnail - background-position: 50% 30% width: 4em height: 3em li diff --git a/client/js/controls/post_readonly_sidebar_control.js b/client/js/controls/post_readonly_sidebar_control.js index d11fa9250..d7f0ee50c 100644 --- 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) {