habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: migrate to react-before-after-slider-component

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-07-13 12:10:08 +02:00
parent fd197ceee7
commit b7835a751b
4 changed files with 47 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/css/custom.css
View File

@ -37,6 +37,10 @@
}
.before-after-slider img {
max-width: none;
}
table {
display: table;
}

34
website/src/pages/index.jsx
View File

@ -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() {
<div>
<BrowserOnly>
{() => {
return <BeforeAfterSlider
className={styles.featureImage}
before={useBaseUrl("img/screen_apps_light.jpg")}
after={useBaseUrl("img/screen_apps_dark.jpg")}
width={640}
height={480}
const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
return <ReactBeforeSliderComponent
firstImage={{
id: 1,
imageUrl: useBaseUrl("img/screen_apps_light.jpg"),
}}
secondImage={{
id: 2,
imageUrl: useBaseUrl("img/screen_apps_dark.jpg"),
}}
/>
}}
</BrowserOnly>
@ -146,12 +150,16 @@ function Home() {
<div>
<BrowserOnly>
{() => {
return <BeforeAfterSlider
className={styles.featureImage}
before={useBaseUrl("img/screen_admin_light.jpg")}
after={useBaseUrl("img/screen_admin_dark.jpg")}
width={640}
height={480}
const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
return <ReactBeforeSliderComponent
firstImage={{
id: 1,
imageUrl: useBaseUrl("img/screen_admin_light.jpg"),
}}
secondImage={{
id: 2,
imageUrl: useBaseUrl("img/screen_admin_dark.jpg"),
}}
/>
}}
</BrowserOnly>