Merge e2bdb5feab into 376f687c38

The minimum version requirements are rough guesses, in practice any decently modern docker installation should work.

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%

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,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().width,
-                        postContainerNode.getBoundingClientRect().left -
-                        margin,
                     iosCorrectedInnerHeight() -
                         topNavigationNode.getBoundingClientRect().height -
                         margin * 2,
                 ];
-            }
+            },
+            contentNode
         );
 
         this._postNotesOverlayControl = new PostNotesOverlayControl(

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",

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",

doc/API.md

@@ -789,7 +789,7 @@ data.
     | `fav-time`           | alias of `fav-date`                                                                                                                     |
     | `feature-date`       | featured at given date                                                                                                                  |
     | `feature-time`       | alias of `feature-time`                                                                                                                 |
-    | `safety`             | having given safety. `<value>` can be either `safe`, `sketchy` (or `questionable`) or `unsafe`.                                         |
+    | `safety`             | having given safety. `<value>` can be either `safe`, `sketchy` or `unsafe`.                                         |
     | `rating`             | alias of `safety`                                                                                                                       |
 
     **Sort style tokens**

doc/INSTALL.md

@@ -1,5 +1,5 @@
-This assumes that you have Docker (version 17.05 or greater)
+This assumes that you have Docker (version 19.03 or greater)
-and Docker Compose (version 1.6.0 or greater) already installed.
+and the Docker Compose CLI (version 1.27.0 or greater) already installed.
 
 ### Prepare things
 
@@ -38,7 +38,7 @@ and Docker Compose (version 1.6.0 or greater) already installed.
 
     This pulls the latest containers from docker.io:
     ```console
-    user@host:szuru$ docker-compose pull
+    user@host:szuru$ docker compose pull
     ```
 
     If you have modified the application's source and would like to manually
@@ -49,17 +49,17 @@ and Docker Compose (version 1.6.0 or greater) already installed.
 
     For first run, it is recommended to start the database separately:
     ```console
-    user@host:szuru$ docker-compose up -d sql
+    user@host:szuru$ docker compose up -d sql
     ```
 
     To start all containers:
     ```console
-    user@host:szuru$ docker-compose up -d
+    user@host:szuru$ docker compose up -d
     ```
 
     To view/monitor the application logs:
     ```console
-    user@host:szuru$ docker-compose logs -f
+    user@host:szuru$ docker compose logs -f
     # (CTRL+C to exit)
     ```
 
@@ -84,13 +84,13 @@ and Docker Compose (version 1.6.0 or greater) already installed.
 2. Build the containers:
 
     ```console
-    user@host:szuru$ docker-compose build
+    user@host:szuru$ docker compose build
     ```
 
     That will attempt to build both containers, but you can specify `client`
     or `server` to make it build only one.
 
-    If `docker-compose build` spits out:
+    If `docker compose build` spits out:
 
     ```
     ERROR: Service 'server' failed to build: failed to parse platform : "" is an invalid component of "": platform specifier component must match "^[A-Za-z0-9_-]+$": invalid argument
@@ -102,7 +102,7 @@ and Docker Compose (version 1.6.0 or greater) already installed.
     user@host:szuru$ export DOCKER_BUILDKIT=1; export COMPOSE_DOCKER_CLI_BUILD=1
     ```
 
-    ...and run `docker-compose build` again.
+    ...and run `docker compose build` again.
 
 *Note: If your changes are not taking effect in your builds, consider building
 with `--no-cache`.*
@@ -117,7 +117,7 @@ with `--no-cache`.*
     run from docker:
 
     ```console
-    user@host:szuru$ docker-compose run server ./szuru-admin --help
+    user@host:szuru$ docker compose run server ./szuru-admin --help
     ```
 
     will give you a breakdown on all available commands.

docker-compose.yml

@@ -1,9 +1,7 @@
 ## Example Docker Compose configuration
 ##
-## Use this as a template to set up docker-compose, or as guide to set up other
+## Use this as a template to set up docker compose, or as guide to set up other
 ## orchestration services
-version: '2'
-
 services:
 
   server: