mirror of
https://github.com/Steffo99/festa.git
synced 2024-12-22 14:44:21 +00:00
Add a way to make the postcard fully visible
This commit is contained in:
parent
b4ab31ca09
commit
bab42a9203
GPG key ID:
6965406171929D01
9 changed files with 97 additions and 48 deletions
|
|
@ -8,7 +8,7 @@ type PostcardProps = {
|
|||
}
|
||||
|
||||
export function Postcard({src}: PostcardProps) {
|
||||
const [, setPostcard] = useDefinedContext(PostcardContext)
|
||||
const {setPostcard} = useDefinedContext(PostcardContext)
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
import { createStateContext } from "../../utils/stateContext";
|
||||
import { createDefinedContext } from "../../utils/definedContext";
|
||||
|
||||
|
||||
export type PostcardContextValue = {
|
||||
postcard: string,
|
||||
setPostcard: React.Dispatch<React.SetStateAction<string>>,
|
||||
visible: boolean,
|
||||
setVisible: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Context containing data about the website's current postcard, the blurred background image.
|
||||
*/
|
||||
export const PostcardContext = createStateContext<string>()
|
||||
export const PostcardContext = createDefinedContext<PostcardContextValue>()
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
import { PostcardContext } from "./PostcardContext"
|
||||
import { useDefinedContext } from "../../utils/definedContext";
|
||||
import classNames from "classnames";
|
||||
|
||||
|
||||
export function PostcardRenderer() {
|
||||
const [postcard,] = useDefinedContext(PostcardContext)
|
||||
const {postcard, visible} = useDefinedContext(PostcardContext)
|
||||
|
||||
return <>
|
||||
<div
|
||||
className="postcard"
|
||||
style={{backgroundImage: `url(${postcard})`}}
|
||||
className={classNames({
|
||||
"postcard": true,
|
||||
"postcard-visible": visible,
|
||||
})}
|
||||
style={{
|
||||
backgroundImage: `url(${postcard})`
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
20
components/tools/ToolToggleVisible.tsx
Normal file
20
components/tools/ToolToggleVisible.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"
|
||||
import { useTranslation } from "next-i18next"
|
||||
import { useDefinedContext } from "../../utils/definedContext"
|
||||
import { FestaIcon } from "../extensions/FestaIcon"
|
||||
import { PostcardContext } from "../postcard/PostcardContext"
|
||||
|
||||
export function ToolToggleVisible() {
|
||||
const {t} = useTranslation()
|
||||
const {visible, setVisible} = useDefinedContext(PostcardContext)
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label={visible ? t("toggleVisibleHide") : t("toggleVisibleShow")}
|
||||
onClick={() => setVisible(!visible)}
|
||||
className="square-40"
|
||||
>
|
||||
<FestaIcon icon={visible ? faEyeSlash : faEye}/>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ import { ErrorBoundary } from '../components/errors/ErrorBoundary'
|
|||
const App = ({ Component, pageProps }: AppProps): JSX.Element => {
|
||||
const {t} = useTranslation()
|
||||
const [postcard, setPostcard] = useState<string>(defaultPostcard.src)
|
||||
const [postcardVisible, setPostcardVisible] = useState<boolean>(false)
|
||||
const [login, setLogin] = useState<FestaLoginData | null>(null)
|
||||
useStoredLogin(setLogin)
|
||||
|
||||
|
|
@ -34,7 +35,7 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => {
|
|||
|
||||
return <>
|
||||
<ErrorBoundary text={t("genericError")}>
|
||||
<PostcardContext.Provider value={[postcard, setPostcard]}>
|
||||
<PostcardContext.Provider value={{postcard, setPostcard, visible: postcardVisible, setVisible: setPostcardVisible}}>
|
||||
<LoginContext.Provider value={[login, setLogin]}>
|
||||
<SWRConfig value={swrConfig}>
|
||||
<PostcardRenderer/>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { EditablePostcard } from "../../components/editable/EditablePostcard";
|
|||
import { ViewEvent } from "../../components/view/ViewEvent";
|
||||
import { EditableDateTime } from "../../components/editable/EditableDateTime";
|
||||
import { FormDateRange } from "../../components/FormDateRange";
|
||||
import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
|
||||
|
||||
|
||||
export async function getServerSideProps(context: NextPageContext) {
|
||||
|
|
@ -77,6 +78,7 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
|
|||
<EditingContext.Provider value={editState}>
|
||||
<ToolBar vertical="vadapt" horizontal="right">
|
||||
<ToolToggleEditing/>
|
||||
<ToolToggleVisible/>
|
||||
</ToolBar>
|
||||
<ViewEvent
|
||||
title={
|
||||
|
|
|
|||
|
|
@ -13,3 +13,8 @@
|
|||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.postcard-visible {
|
||||
z-index: 1;
|
||||
filter: none;
|
||||
}
|
||||
|
|
@ -5,33 +5,40 @@
|
|||
align-content: flex-start;
|
||||
|
||||
position: absolute;
|
||||
|
||||
z-index: 2;
|
||||
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.toolbar-top {
|
||||
top: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar-bottom {
|
||||
bottom: 8px;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
left: 8px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
right: 8px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.toolbar-vadapt {
|
||||
top: 8px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.toolbar-vadapt {
|
||||
top: unset;
|
||||
bottom: 8px;
|
||||
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
78
yarn.lock
78
yarn.lock
|
|
@ -249,9 +249,9 @@
|
|||
"@types/react" "*"
|
||||
|
||||
"@types/react@*":
|
||||
version "18.0.10"
|
||||
resolved "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz#5692944d4a45e204fb7a981eb1388afe919cf4d0"
|
||||
integrity sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg==
|
||||
version "18.0.12"
|
||||
resolved "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz#cdaa209d0a542b3fcf69cf31a03976ec4cdd8840"
|
||||
integrity sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
"@types/scheduler" "*"
|
||||
|
|
@ -277,47 +277,47 @@
|
|||
integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
|
||||
|
||||
"@typescript-eslint/parser@^5.21.0":
|
||||
version "5.27.0"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.0.tgz#62bb091ed5cf9c7e126e80021bb563dcf36b6b12"
|
||||
integrity sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==
|
||||
version "5.27.1"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz#3a4dcaa67e45e0427b6ca7bb7165122c8b569639"
|
||||
integrity sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==
|
||||
dependencies:
|
||||
"@typescript-eslint/scope-manager" "5.27.0"
|
||||
"@typescript-eslint/types" "5.27.0"
|
||||
"@typescript-eslint/typescript-estree" "5.27.0"
|
||||
"@typescript-eslint/scope-manager" "5.27.1"
|
||||
"@typescript-eslint/types" "5.27.1"
|
||||
"@typescript-eslint/typescript-estree" "5.27.1"
|
||||
debug "^4.3.4"
|
||||
|
||||
"@typescript-eslint/scope-manager@5.27.0":
|
||||
version "5.27.0"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz#a272178f613050ed62f51f69aae1e19e870a8bbb"
|
||||
integrity sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==
|
||||
"@typescript-eslint/scope-manager@5.27.1":
|
||||
version "5.27.1"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz#4d1504392d01fe5f76f4a5825991ec78b7b7894d"
|
||||
integrity sha512-fQEOSa/QroWE6fAEg+bJxtRZJTH8NTskggybogHt4H9Da8zd4cJji76gA5SBlR0MgtwF7rebxTbDKB49YUCpAg==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "5.27.0"
|
||||
"@typescript-eslint/visitor-keys" "5.27.0"
|
||||
"@typescript-eslint/types" "5.27.1"
|
||||
"@typescript-eslint/visitor-keys" "5.27.1"
|
||||
|
||||
"@typescript-eslint/types@5.27.0":
|
||||
version "5.27.0"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.0.tgz#c3f44b9dda6177a9554f94a74745ca495ba9c001"
|
||||
integrity sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==
|
||||
"@typescript-eslint/types@5.27.1":
|
||||
version "5.27.1"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz#34e3e629501349d38be6ae97841298c03a6ffbf1"
|
||||
integrity sha512-LgogNVkBhCTZU/m8XgEYIWICD6m4dmEDbKXESCbqOXfKZxRKeqpiJXQIErv66sdopRKZPo5l32ymNqibYEH/xg==
|
||||
|
||||
"@typescript-eslint/typescript-estree@5.27.0":
|
||||
version "5.27.0"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz#7965f5b553c634c5354a47dcce0b40b94611e995"
|
||||
integrity sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==
|
||||
"@typescript-eslint/typescript-estree@5.27.1":
|
||||
version "5.27.1"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.1.tgz#7621ee78607331821c16fffc21fc7a452d7bc808"
|
||||
integrity sha512-DnZvvq3TAJ5ke+hk0LklvxwYsnXpRdqUY5gaVS0D4raKtbznPz71UJGnPTHEFo0GDxqLOLdMkkmVZjSpET1hFw==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "5.27.0"
|
||||
"@typescript-eslint/visitor-keys" "5.27.0"
|
||||
"@typescript-eslint/types" "5.27.1"
|
||||
"@typescript-eslint/visitor-keys" "5.27.1"
|
||||
debug "^4.3.4"
|
||||
globby "^11.1.0"
|
||||
is-glob "^4.0.3"
|
||||
semver "^7.3.7"
|
||||
tsutils "^3.21.0"
|
||||
|
||||
"@typescript-eslint/visitor-keys@5.27.0":
|
||||
version "5.27.0"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz#97aa9a5d2f3df8215e6d3b77f9d214a24db269bd"
|
||||
integrity sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==
|
||||
"@typescript-eslint/visitor-keys@5.27.1":
|
||||
version "5.27.1"
|
||||
resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.1.tgz#05a62666f2a89769dac2e6baa48f74e8472983af"
|
||||
integrity sha512-xYs6ffo01nhdJgPieyk7HAOpjhTsx7r/oB9LWEhwAXgwn33tkr+W8DI2ChboqhZlC4q3TC6geDYPoiX8ROqyOQ==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "5.27.0"
|
||||
"@typescript-eslint/types" "5.27.1"
|
||||
eslint-visitor-keys "^3.3.0"
|
||||
|
||||
acorn-jsx@^5.3.2:
|
||||
|
|
@ -468,9 +468,9 @@ callsites@^3.0.0:
|
|||
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
|
||||
|
||||
caniuse-lite@^1.0.30001332:
|
||||
version "1.0.30001344"
|
||||
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz#8a1e7fdc4db9c2ec79a05e9fd68eb93a761888bb"
|
||||
integrity sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==
|
||||
version "1.0.30001349"
|
||||
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001349.tgz#90740086a2eb2e825084944169d313c9793aeba4"
|
||||
integrity sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==
|
||||
|
||||
chalk@^4.0.0:
|
||||
version "4.1.2"
|
||||
|
|
@ -1181,9 +1181,9 @@ i18next-fs-backend@^1.1.4:
|
|||
integrity sha512-/MfAGMP0jHonV966uFf9PkWWuDjPYLIcsipnSO3NxpNtAgRUKLTwvm85fEmsF6hGeu0zbZiCQ3W74jwO6K9uXA==
|
||||
|
||||
i18next@^21.6.14:
|
||||
version "21.8.5"
|
||||
resolved "https://registry.npmjs.org/i18next/-/i18next-21.8.5.tgz#b7615f107d9a1492c771dc0e0b8742a80c1d9bec"
|
||||
integrity sha512-uI5LVG10SBHLVOclr6yY1aCimmrzeZ0dwD73Sio61E8gQEwRmKI7/M8RKM084mNNy7VscKtxzSwELrso8BKv1g==
|
||||
version "21.8.8"
|
||||
resolved "https://registry.npmjs.org/i18next/-/i18next-21.8.8.tgz#725a05f2529689d059bce17221cf86fcdccf7665"
|
||||
integrity sha512-iN/5JuWStyivyBgmUgy5BRiFs0lZrgCRaeV9q4yVH/eR9NID7pZSMt3rpF8C16GplchoEjDP0JalKwZMJ1CJAA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.17.2"
|
||||
|
||||
|
|
@ -1980,9 +1980,9 @@ react-dom@18.1.0:
|
|||
scheduler "^0.22.0"
|
||||
|
||||
react-i18next@^11.16.2:
|
||||
version "11.16.9"
|
||||
resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.16.9.tgz#890cdac0c49120e075d6c520b43dbad3f91bd2df"
|
||||
integrity sha512-euXxWvcEAvsY7ZVkwx9ztCq4butqtsGHEkpkuo0RMj8Ru09IF9o2KxCyN+zyv51Nr0aBh/elaTIiR6fMb8YfVg==
|
||||
version "11.17.0"
|
||||
resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.17.0.tgz#44a0689dac7903352733e40303b743fa465eb797"
|
||||
integrity sha512-ewq2S4bVUTRqOMAdM/XvzCn9xUPIryzeBQRghmJ8lC6VI/8Kp7z1GwoLyt8j7GB2ywhN2SjPk7LU4sHzVeu7aw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.14.5"
|
||||
html-escaper "^2.0.2"
|
||||
|
|
|
|||
Loading…
Reference in a new issue