From b7835a751b0a3b12c335e7ba0dfd2a87b6857c61 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Tue, 13 Jul 2021 12:10:08 +0200 Subject: [PATCH] website: migrate to react-before-after-slider-component Signed-off-by: Jens Langhammer --- website/package-lock.json | 50 ++++++++++++++++--------------------- website/package.json | 2 +- website/src/css/custom.css | 4 +++ website/src/pages/index.jsx | 34 +++++++++++++++---------- 4 files changed, 47 insertions(+), 43 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index 2ec8ed942..7e98ea66f 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -15,7 +15,7 @@ "postcss": "^8.3.5", "rapidoc": "^9.0.0", "react": "^17.0.2", - "react-before-after-slider": "^1.0.4", + "react-before-after-slider-component": "^0.7.4", "react-dom": "^17.0.2", "react-feather": "^2.0.9", "react-toggle": "^4.1.2" @@ -3963,9 +3963,9 @@ } }, "node_modules/classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "node_modules/clean-css": { "version": "5.1.2", @@ -10696,20 +10696,18 @@ "pure-color": "^1.2.0" } }, - "node_modules/react-before-after-slider": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz", - "integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==", + "node_modules/react-before-after-slider-component": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz", + "integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==", "dependencies": { - "classnames": "^2.2.5", - "react-block-image": "^1.0.0" + "classnames": "^2.3.1" + }, + "peerDependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2" } }, - "node_modules/react-block-image": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-block-image/-/react-block-image-1.0.0.tgz", - "integrity": "sha1-XEbXoRX6fvpw1HeiWA7AybIQYoM=" - }, "node_modules/react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -18174,9 +18172,9 @@ } }, "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" }, "clean-css": { "version": "5.1.2", @@ -23170,20 +23168,14 @@ "pure-color": "^1.2.0" } }, - "react-before-after-slider": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz", - "integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==", + "react-before-after-slider-component": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz", + "integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==", "requires": { - "classnames": "^2.2.5", - "react-block-image": "^1.0.0" + "classnames": "^2.3.1" } }, - "react-block-image": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/react-block-image/-/react-block-image-1.0.0.tgz", - "integrity": "sha1-XEbXoRX6fvpw1HeiWA7AybIQYoM=" - }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", diff --git a/website/package.json b/website/package.json index f65f880ac..43f1e8990 100644 --- a/website/package.json +++ b/website/package.json @@ -19,7 +19,7 @@ "postcss": "^8.3.5", "rapidoc": "^9.0.0", "react": "^17.0.2", - "react-before-after-slider": "^1.0.4", + "react-before-after-slider-component": "^0.7.4", "react-dom": "^17.0.2", "react-feather": "^2.0.9", "react-toggle": "^4.1.2" diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 265bc51fb..512e170a2 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -37,6 +37,10 @@ } +.before-after-slider img { + max-width: none; +} + table { display: table; } diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx index aa583269f..1ab5ebef7 100644 --- a/website/src/pages/index.jsx +++ b/website/src/pages/index.jsx @@ -6,8 +6,8 @@ import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import useBaseUrl from "@docusaurus/useBaseUrl"; import styles from "./styles.module.css"; -import BeforeAfterSlider from 'react-before-after-slider' import Comparison from "../comparison"; +import 'react-before-after-slider-component/dist/build.css'; const features = [ { @@ -105,12 +105,16 @@ function Home() {
{() => { - return }} @@ -146,12 +150,16 @@ function Home() {
{() => { - return }}