steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 22:54:22 +00:00
Code Activity

Add a way to make the postcard fully visible

Browse source
This commit is contained in:
Steffo 2022-06-07 12:48:47 +02:00
parent b4ab31ca09
commit bab42a9203
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 97 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/postcard/Postcard.tsx
View file

@ -8,7 +8,7 @@ type PostcardProps = {
} }
export function Postcard({src}: PostcardProps) { export function Postcard({src}: PostcardProps) {
const [, setPostcard] = useDefinedContext(PostcardContext) const {setPostcard} = useDefinedContext(PostcardContext)
useEffect( useEffect(
() => { () => {

12
components/postcard/PostcardContext.tsx
View file

@ -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. * Context containing data about the website's current postcard, the blurred background image.
*/ */
export const PostcardContext = createStateContext<string>() export const PostcardContext = createDefinedContext<PostcardContextValue>()

12
components/postcard/PostcardRenderer.tsx
View file

@ -1,14 +1,20 @@
import { PostcardContext } from "./PostcardContext" import { PostcardContext } from "./PostcardContext"
import { useDefinedContext } from "../../utils/definedContext"; import { useDefinedContext } from "../../utils/definedContext";
import classNames from "classnames";
export function PostcardRenderer() { export function PostcardRenderer() {
const [postcard,] = useDefinedContext(PostcardContext) const {postcard, visible} = useDefinedContext(PostcardContext)
return <> return <>
<div <div
className="postcard" className={classNames({
style={{backgroundImage: `url(${postcard})`}} "postcard": true,
"postcard-visible": visible,
})}
style={{
backgroundImage: `url(${postcard})`
}}
/> />
</> </>
} }

20
components/tools/ToolToggleVisible.tsx Normal file
View 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>
)
}

3
pages/_app.tsx
View file

@ -18,6 +18,7 @@ import { ErrorBoundary } from '../components/errors/ErrorBoundary'
const App = ({ Component, pageProps }: AppProps): JSX.Element => { const App = ({ Component, pageProps }: AppProps): JSX.Element => {
const {t} = useTranslation() const {t} = useTranslation()
const [postcard, setPostcard] = useState<string>(defaultPostcard.src) const [postcard, setPostcard] = useState<string>(defaultPostcard.src)
const [postcardVisible, setPostcardVisible] = useState<boolean>(false)
const [login, setLogin] = useState<FestaLoginData | null>(null) const [login, setLogin] = useState<FestaLoginData | null>(null)
useStoredLogin(setLogin) useStoredLogin(setLogin)
@ -34,7 +35,7 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => {
return <> return <>
<ErrorBoundary text={t("genericError")}> <ErrorBoundary text={t("genericError")}>
<PostcardContext.Provider value={[postcard, setPostcard]}> <PostcardContext.Provider value={{postcard, setPostcard, visible: postcardVisible, setVisible: setPostcardVisible}}>
<LoginContext.Provider value={[login, setLogin]}> <LoginContext.Provider value={[login, setLogin]}>
<SWRConfig value={swrConfig}> <SWRConfig value={swrConfig}>
<PostcardRenderer/> <PostcardRenderer/>

2
pages/events/[slug].tsx
View file

@ -16,6 +16,7 @@ import { EditablePostcard } from "../../components/editable/EditablePostcard";
import { ViewEvent } from "../../components/view/ViewEvent"; import { ViewEvent } from "../../components/view/ViewEvent";
import { EditableDateTime } from "../../components/editable/EditableDateTime"; import { EditableDateTime } from "../../components/editable/EditableDateTime";
import { FormDateRange } from "../../components/FormDateRange"; import { FormDateRange } from "../../components/FormDateRange";
import { ToolToggleVisible } from "../../components/tools/ToolToggleVisible";
export async function getServerSideProps(context: NextPageContext) { export async function getServerSideProps(context: NextPageContext) {
@ -77,6 +78,7 @@ export default function PageEventDetail({event}: PageEventDetailProps) {
<EditingContext.Provider value={editState}> <EditingContext.Provider value={editState}>
<ToolBar vertical="vadapt" horizontal="right"> <ToolBar vertical="vadapt" horizontal="right">
<ToolToggleEditing/> <ToolToggleEditing/>
<ToolToggleVisible/>
</ToolBar> </ToolBar>
<ViewEvent <ViewEvent
title={ title={

5
styles/components/postcard.css
View file

@ -13,3 +13,8 @@
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
} }
.postcard-visible {
z-index: 1;
filter: none;
}

11
styles/components/toolbar.css
View file

@ -5,33 +5,40 @@
align-content: flex-start; align-content: flex-start;
position: absolute; position: absolute;
z-index: 2;
gap: 2px;
} }
.toolbar-top { .toolbar-top {
top: 8px; top: 8px;
flex-direction: column;
} }
.toolbar-bottom { .toolbar-bottom {
bottom: 8px; bottom: 8px;
flex-direction: column-reverse;
} }
.toolbar-left { .toolbar-left {
left: 8px; left: 8px;
flex-direction: row;
} }
.toolbar-right { .toolbar-right {
right: 8px; right: 8px;
flex-direction: row-reverse;
} }
.toolbar-vadapt { .toolbar-vadapt {
top: 8px; top: 8px;
flex-direction: column;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.toolbar-vadapt { .toolbar-vadapt {
top: unset; top: unset;
bottom: 8px; bottom: 8px;
flex-direction: column-reverse;
} }
} }

78
yarn.lock
View file

@ -249,9 +249,9 @@
"@types/react" "*" "@types/react" "*"
"@types/react@*": "@types/react@*":
version "18.0.10" version "18.0.12"
resolved "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz#5692944d4a45e204fb7a981eb1388afe919cf4d0" resolved "https://registry.npmjs.org/@types/react/-/react-18.0.12.tgz#cdaa209d0a542b3fcf69cf31a03976ec4cdd8840"
integrity sha512-dIugadZuIPrRzvIEevIu7A1smqOAjkSMv8qOfwPt9Ve6i6JT/FQcCHyk2qIAxwsQNKZt5/oGR0T4z9h2dXRAkg== integrity sha512-duF1OTASSBQtcigUvhuiTB1Ya3OvSy+xORCiEf20H0P0lzx+/KeVsA99U5UjLXSbyo1DRJDlLKqTeM1ngosqtg==
dependencies: dependencies:
"@types/prop-types" "*" "@types/prop-types" "*"
"@types/scheduler" "*" "@types/scheduler" "*"
@ -277,47 +277,47 @@
integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
"@typescript-eslint/parser@^5.21.0": "@typescript-eslint/parser@^5.21.0":
version "5.27.0" version "5.27.1"
resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.0.tgz#62bb091ed5cf9c7e126e80021bb563dcf36b6b12" resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.1.tgz#3a4dcaa67e45e0427b6ca7bb7165122c8b569639"
integrity sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA== integrity sha512-7Va2ZOkHi5NP+AZwb5ReLgNF6nWLGTeUJfxdkVUAPPSaAdbWNnFZzLZ4EGGmmiCTg+AwlbE1KyUYTBglosSLHQ==
dependencies: dependencies:
"@typescript-eslint/scope-manager" "5.27.0" "@typescript-eslint/scope-manager" "5.27.1"
"@typescript-eslint/types" "5.27.0" "@typescript-eslint/types" "5.27.1"
"@typescript-eslint/typescript-estree" "5.27.0" "@typescript-eslint/typescript-estree" "5.27.1"
debug "^4.3.4" debug "^4.3.4"
"@typescript-eslint/scope-manager@5.27.0": "@typescript-eslint/scope-manager@5.27.1":
version "5.27.0" version "5.27.1"
resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz#a272178f613050ed62f51f69aae1e19e870a8bbb" resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.1.tgz#4d1504392d01fe5f76f4a5825991ec78b7b7894d"
integrity sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g== integrity sha512-fQEOSa/QroWE6fAEg+bJxtRZJTH8NTskggybogHt4H9Da8zd4cJji76gA5SBlR0MgtwF7rebxTbDKB49YUCpAg==
dependencies: dependencies:
"@typescript-eslint/types" "5.27.0" "@typescript-eslint/types" "5.27.1"
"@typescript-eslint/visitor-keys" "5.27.0" "@typescript-eslint/visitor-keys" "5.27.1"
"@typescript-eslint/types@5.27.0": "@typescript-eslint/types@5.27.1":
version "5.27.0" version "5.27.1"
resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.0.tgz#c3f44b9dda6177a9554f94a74745ca495ba9c001" resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.1.tgz#34e3e629501349d38be6ae97841298c03a6ffbf1"
integrity sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A== integrity sha512-LgogNVkBhCTZU/m8XgEYIWICD6m4dmEDbKXESCbqOXfKZxRKeqpiJXQIErv66sdopRKZPo5l32ymNqibYEH/xg==
"@typescript-eslint/typescript-estree@5.27.0": "@typescript-eslint/typescript-estree@5.27.1":
version "5.27.0" version "5.27.1"
resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz#7965f5b553c634c5354a47dcce0b40b94611e995" resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.1.tgz#7621ee78607331821c16fffc21fc7a452d7bc808"
integrity sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ== integrity sha512-DnZvvq3TAJ5ke+hk0LklvxwYsnXpRdqUY5gaVS0D4raKtbznPz71UJGnPTHEFo0GDxqLOLdMkkmVZjSpET1hFw==
dependencies: dependencies:
"@typescript-eslint/types" "5.27.0" "@typescript-eslint/types" "5.27.1"
"@typescript-eslint/visitor-keys" "5.27.0" "@typescript-eslint/visitor-keys" "5.27.1"
debug "^4.3.4" debug "^4.3.4"
globby "^11.1.0" globby "^11.1.0"
is-glob "^4.0.3" is-glob "^4.0.3"
semver "^7.3.7" semver "^7.3.7"
tsutils "^3.21.0" tsutils "^3.21.0"
"@typescript-eslint/visitor-keys@5.27.0": "@typescript-eslint/visitor-keys@5.27.1":
version "5.27.0" version "5.27.1"
resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz#97aa9a5d2f3df8215e6d3b77f9d214a24db269bd" resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.1.tgz#05a62666f2a89769dac2e6baa48f74e8472983af"
integrity sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA== integrity sha512-xYs6ffo01nhdJgPieyk7HAOpjhTsx7r/oB9LWEhwAXgwn33tkr+W8DI2ChboqhZlC4q3TC6geDYPoiX8ROqyOQ==
dependencies: dependencies:
"@typescript-eslint/types" "5.27.0" "@typescript-eslint/types" "5.27.1"
eslint-visitor-keys "^3.3.0" eslint-visitor-keys "^3.3.0"
acorn-jsx@^5.3.2: acorn-jsx@^5.3.2:
@ -468,9 +468,9 @@ callsites@^3.0.0:
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
caniuse-lite@^1.0.30001332: caniuse-lite@^1.0.30001332:
version "1.0.30001344" version "1.0.30001349"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz#8a1e7fdc4db9c2ec79a05e9fd68eb93a761888bb" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001349.tgz#90740086a2eb2e825084944169d313c9793aeba4"
integrity sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g== integrity sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==
chalk@^4.0.0: chalk@^4.0.0:
version "4.1.2" version "4.1.2"
@ -1181,9 +1181,9 @@ i18next-fs-backend@^1.1.4:
integrity sha512-/MfAGMP0jHonV966uFf9PkWWuDjPYLIcsipnSO3NxpNtAgRUKLTwvm85fEmsF6hGeu0zbZiCQ3W74jwO6K9uXA== integrity sha512-/MfAGMP0jHonV966uFf9PkWWuDjPYLIcsipnSO3NxpNtAgRUKLTwvm85fEmsF6hGeu0zbZiCQ3W74jwO6K9uXA==
i18next@^21.6.14: i18next@^21.6.14:
version "21.8.5" version "21.8.8"
resolved "https://registry.npmjs.org/i18next/-/i18next-21.8.5.tgz#b7615f107d9a1492c771dc0e0b8742a80c1d9bec" resolved "https://registry.npmjs.org/i18next/-/i18next-21.8.8.tgz#725a05f2529689d059bce17221cf86fcdccf7665"
integrity sha512-uI5LVG10SBHLVOclr6yY1aCimmrzeZ0dwD73Sio61E8gQEwRmKI7/M8RKM084mNNy7VscKtxzSwELrso8BKv1g== integrity sha512-iN/5JuWStyivyBgmUgy5BRiFs0lZrgCRaeV9q4yVH/eR9NID7pZSMt3rpF8C16GplchoEjDP0JalKwZMJ1CJAA==
dependencies: dependencies:
"@babel/runtime" "^7.17.2" "@babel/runtime" "^7.17.2"
@ -1980,9 +1980,9 @@ react-dom@18.1.0:
scheduler "^0.22.0" scheduler "^0.22.0"
react-i18next@^11.16.2: react-i18next@^11.16.2:
version "11.16.9" version "11.17.0"
resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.16.9.tgz#890cdac0c49120e075d6c520b43dbad3f91bd2df" resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.17.0.tgz#44a0689dac7903352733e40303b743fa465eb797"
integrity sha512-euXxWvcEAvsY7ZVkwx9ztCq4butqtsGHEkpkuo0RMj8Ru09IF9o2KxCyN+zyv51Nr0aBh/elaTIiR6fMb8YfVg== integrity sha512-ewq2S4bVUTRqOMAdM/XvzCn9xUPIryzeBQRghmJ8lC6VI/8Kp7z1GwoLyt8j7GB2ywhN2SjPk7LU4sHzVeu7aw==
dependencies: dependencies:
"@babel/runtime" "^7.14.5" "@babel/runtime" "^7.14.5"
html-escaper "^2.0.2" html-escaper "^2.0.2"