front: CordaChecker online tgl

This commit is contained in:
djmil 2023-10-19 18:56:46 +02:00
parent a16b886645
commit f9f5c29438
5 changed files with 122 additions and 16 deletions

View File

@ -2,6 +2,8 @@ h1 {
display: inline-flex; display: inline-flex;
} }
.OfflineToggle { .OnlineTgl {
margin-left: 15px; transform: scale(.25, .25);
} width: 32px;
height: 16px;
}

View File

@ -1,7 +1,7 @@
import './index.css'; import './index.css';
import React from "react" import React from "react"
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import OfflineToggle from '../OfflineToggle'; import OfflineToggle from '../OnlineTgl';
export default function Header() { export default function Header() {

View File

@ -1,12 +0,0 @@
import React from "react"
import { AppData } from "../../context/data"
export default function OfflineToggle() {
const [appData, dispatchData] = React.useContext(AppData)
return <div className="OfflineToggle">
<button onClick={() => dispatchData({type: "toggleOfflineMode"})}>
{ appData.offlineMode === true ? "offline" : "online" }
</button>
</div>
}

View File

@ -0,0 +1,104 @@
.tgl {
display: none;
/* add default box-sizing for this scope */
&,
&:after,
&:before,
& *,
& *:after,
& *:before,
& + .tgl-btn {
box-sizing: border-box;
&::selection {
background: none;
}
}
+ .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
user-select: none;
&:after,
&:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
&:after {
left: 0;
}
&:before {
display: none;
}
}
&:checked + .tgl-btn:after {
left: 50%;
}
}
.tgl-flip {
+ .tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
perspective: 100px;
&:after,
&:before {
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
border-radius: 4px;
}
&:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
&:before {
background: #FF3A19;
content: attr(data-tg-off);
}
&:active:before {
transform: rotateY(-20deg);
}
}
&:checked + .tgl-btn {
&:before {
transform: rotateY(180deg);
}
&:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
&:active:after {
transform: rotateY(20deg);
}
}
}

View File

@ -0,0 +1,12 @@
import "./index.css"
import React from "react"
import { AppData } from "../../context/data"
export default function OnlineTgl() {
const [/*appData*/, dispatchData] = React.useContext(AppData)
return <div className="OnlineTgl">
<input className="tgl tgl-flip" id="cb5" type="checkbox" defaultChecked onClick={() => dispatchData({type: "toggleOfflineMode"})}/>
<label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5"/>
</div>
}