Merge e2bdb5feab into 376f687c38

chore: questionable is not a recognized rating
doc: use docker compose instead of docker-compose
2025-07-17 08:26:24 +00:00 · 2025-02-11 21:52:22 +01:00 · 2025-02-11 21:50:27 +01:00 · 2025-02-11 21:25:10 +01:00 · 2024-03-21 22:23:13 +01:00 · 2024-03-21 20:36:58 +01:00
10 changed files with 59 additions and 38 deletions
--- a/client/css/post-main-view.styl
+++ b/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%
--- 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);
    }
--- 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) {
--- 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"
            );

--- 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(
--- 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",
--- 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",
--- a/doc/API.md
+++ b/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**
--- a/doc/INSTALL.md
+++ b/doc/INSTALL.md
@ -1,5 +1,5 @@
-This assumes that you have Docker (version 17.05 or greater)
-and Docker Compose (version 1.6.0 or greater) already installed.
+This assumes that you have Docker (version 19.03 or greater)
+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.
--- a/docker-compose.yml
+++ b/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:
Author	SHA1	Message	Date
Eva	beea218c96	Merge `e2bdb5feab` into `376f687c38`	2025-02-11 21:52:22 +01:00
Phil	376f687c38	chore: questionable is not a recognized rating	2025-02-11 21:50:27 +01:00
neobooru	4fd848abf2	doc: use docker compose instead of docker-compose The minimum version requirements are rough guesses, in practice any decently modern docker installation should work.	2025-02-11 21:25:10 +01:00
Eva	e2bdb5feab	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.	2024-03-21 22:23:13 +01:00
Eva	81416b6024	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.	2024-03-21 20:36:58 +01:00