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_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/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) { 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",