partypages/party-template
Template
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

looks better now

Browse Source
This commit is contained in:
Simon Schwarz 2022-11-14 23:28:16 +01:00
parent 8a5a7cc732
commit c25d746ecb
5 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/background.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

2
public/index.html
View File

@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="style_hacky_css_react_mag_mich_nicht.css">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta

9
public/style_hacky_css_react_mag_mich_nicht.css Normal file
View File

@ -0,0 +1,9 @@
body{
background-image: url('/background.gif');
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
padding:0;
margin:0;
}

8
src/PartyPage.css
View File

@ -4,14 +4,6 @@
background-color: black; background-color: black;
} }
body{
background-image: url('/public/background.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
.App { .App {

23
src/PartyPage.tsx
View File

@ -1,5 +1,5 @@
import React, { ChangeEvent, useContext, useState } from 'react'; import React, { ChangeEvent, useContext, useRef, useState } from 'react';
import './PartyPage.css'; import './PartyPage.css';
import { APIEndPoint, PartyContext } from './PartyContext'; import { APIEndPoint, PartyContext } from './PartyContext';
// import MatrixBackground from './MatrixBackground'; // import MatrixBackground from './MatrixBackground';
@ -18,7 +18,14 @@ export const PartyPage: React.FC = () => {
const dear = myDear[partyContext.self.grammatical_gender]; const dear = myDear[partyContext.self.grammatical_gender];
const name = partyContext.self.name; const name = partyContext.self.name;
const party = partyContext.party; const party = partyContext.party;
const myRef = useRef<HTMLDivElement>(null)
const executeScroll = () => {
console.log("downvote bitte hier vergeben: https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element")
if (myRef.current === null) {
} else {
myRef.current.scrollIntoView({behavior: 'smooth'})
}
}
const [comingState, setComingState] = useState(partyContext.self.coming); const [comingState, setComingState] = useState(partyContext.self.coming);
// SAFETY: If this is undefined, the contextProvider already fails // SAFETY: If this is undefined, the contextProvider already fails
@ -65,10 +72,10 @@ export const PartyPage: React.FC = () => {
Diese Chance, Energie zu schnorren, wollen wir noch einmal nutzen. Diese Chance, Energie zu schnorren, wollen wir noch einmal nutzen.
</p> </p>
<p> <p>
Daher veranstalten wir ab <strong> 18:00 </strong> eine Weihnachtsparty! Wir rechnen mit ca. 15-25 Teilnehmern. Daher veranstalten wir ab <strong> 18:00 </strong> eine Weihnachtsparty! Wir rechnen mit ca. 20 Teilnehmern.
</p> </p>
<p> <p>
Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :) Wir würden uns sehr freuen, wenn auch du, {dear} {name}, dabei wärst :)
</p> </p>
<div className='feedback'> <div className='feedback'>
<input type="radio" id="coming-yes" name="coming" value="yes" checked={comingState === "yes"} onChange={handleSelect} /> <input type="radio" id="coming-yes" name="coming" value="yes" checked={comingState === "yes"} onChange={handleSelect} />
@ -79,11 +86,15 @@ export const PartyPage: React.FC = () => {
<label htmlFor='coming-no'>Nein</label> <label htmlFor='coming-no'>Nein</label>
</div> </div>
<div className='hero-outer' > <div className='hero-outer' >
Mehr Infos <span onClick={executeScroll}>
<p>
Mehr Infos </p>
<FontAwesomeIcon icon={faAngleDown} /> <FontAwesomeIcon icon={faAngleDown} />
</span>
</div> </div>
</div> </div>
<div className='hero fullheight'> <div className='hero fullheight' ref={myRef}>
<h2>Wann und Wo?</h2> <h2>Wann und Wo?</h2>
<p> <p>
<FontAwesomeIcon icon={faCalendarDays} /> <strong>16. Dezember, ab 18:00</strong>. Bitte komme nach Möglichkeit pünktlich. <FontAwesomeIcon icon={faCalendarDays} /> <strong>16. Dezember, ab 18:00</strong>. Bitte komme nach Möglichkeit pünktlich.