Improve client image resize

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

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,21 +28,23 @@ class PostMainView {
         const topNavigationNode =
             document.body.querySelector("#top-navigation");
 
+        const contentNode =
+            document.querySelector(".post-view > .content");
+
         this._postContentControl = new PostContentControl(
             postContainerNode,
             ctx.post,
             () => {
                 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.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",