dominic/xmas
1
0
Fork 0
forked from partypages/party-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

looks better now
Some checks failed
continuous-integration/drone/push Build is failing
Details

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 {

33
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} />
@ -78,12 +85,16 @@ export const PartyPage: React.FC = () => {
<input type="radio" id="coming-no" name="coming" value="no" checked={comingState === "no"} onChange={handleSelect} /> <input type="radio" id="coming-no" name="coming" value="no" checked={comingState === "no"} onChange={handleSelect} />
<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.
@ -93,13 +104,13 @@ export const PartyPage: React.FC = () => {
</p> </p>
<h2>Was ist geplant?</h2> <h2>Was ist geplant?</h2>
<p> <p>
Wir werden gemeinsam einen weihnachtlichen Abend verbringen. Wir werden gemeinsam einen weihnachtlichen Abend verbringen.
Dazu gibt es natürlich Glühwein, Kinderpunsch, und weitere Getränke. Dazu gibt es natürlich Glühwein, Kinderpunsch, und weitere Getränke.
</p> </p>
<h2>Was gibt es zu Essen?</h2> <h2>Was gibt es zu Essen?</h2>
<p> <p>
Potluck, etc. Potluck, etc.
Bitte uns schreiben was mitgebracht wird. Bitte uns schreiben was mitgebracht wird.
</p> </p>
<h2>Noch Programmpunkte</h2> <h2>Noch Programmpunkte</h2>