Commit e061d626 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add AF

parent 1e39bcb0
Pipeline #127775 passed with stages
in 10 minutes and 22 seconds
......@@ -22,10 +22,10 @@ This is the home of the amiv website.
Requirements:
* *(Windows only)* [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/)
* [Docker Engine](https://docs.docker.com/engine/install/)
* [Visual Studio Code](https://code.visualstudio.com/)(VSCode)
* [Remote Development Extension Pack for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
- _(Windows only)_ [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/)
- [Docker Engine](https://docs.docker.com/engine/install/)
- [Visual Studio Code](https://code.visualstudio.com/)(VSCode)
- [Remote Development Extension Pack for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
Open the project directory with the prepared devcontainer by clicking the green button in the left button corner of the VSCode window and select `Remote-Containers: Open Folder in Container...`.
......
......@@ -9,6 +9,9 @@ import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import { ThemeProvider } from './src/context/themeContext'
import { KitenProvider } from './src/context/kitenContext'
import { HarlemProvider } from './src/context/harlemContext'
import HarlemBlocker from './src/components/harlem/harlemBlocker'
/**
* Control whether to update scroll position on path change.
......@@ -38,7 +41,14 @@ const shouldUpdateScroll = ({ prevRouterProps, routerProps }) => {
}
const wrapRootElement = ({ element }) => (
<ThemeProvider>{element}</ThemeProvider>
<ThemeProvider>
<HarlemProvider>
<KitenProvider>
<HarlemBlocker />
{element}
</KitenProvider>
</HarlemProvider>
</ThemeProvider>
)
wrapRootElement.propTypes = {
......
......@@ -8,9 +8,19 @@ import React from 'react'
import PropTypes from 'prop-types'
import { ThemeProvider } from './src/context/themeContext'
import { KitenProvider } from './src/context/kitenContext'
import { HarlemProvider } from './src/context/harlemContext'
import HarlemBlocker from './src/components/harlem/harlemBlocker'
const wrapRootElement = ({ element }) => (
<ThemeProvider>{element}</ThemeProvider>
<ThemeProvider>
<HarlemProvider>
<KitenProvider>
<HarlemBlocker />
{element}
</KitenProvider>
</HarlemProvider>
</ThemeProvider>
)
wrapRootElement.propTypes = {
......
......@@ -37,7 +37,7 @@ server {
expires off;
}
location ~* \.(ico|jpg|jpeg|png|gif|svg|js|jsx|css|less|swf|eot|ttf|otf|woff|woff2)$ {
location ~* \.(ico|jpg|jpeg|png|gif|svg|js|jsx|css|less|swf|eot|ttf|otf|woff|woff2|mp3)$ {
add_header Cache-Control "public";
expires +1y;
}
......
......@@ -8,6 +8,7 @@ import { Spinner } from 'amiv-react-components'
import { apiUrl } from 'config'
import Img from '../general/image'
import Link from '../general/link'
import HarlemObject from '../harlem/harlemObject'
const useStyles = makeStyles(
{
......@@ -49,9 +50,15 @@ const EventPoster = ({ event, elevation, className, ...props }) => {
)
return (
<Box boxShadow={2} className={[classes.root].join(' ')} {...props}>
{event ? <Link to={`/events/${event._id}`}>{imageTag}</Link> : imageTag}
</Box>
<HarlemObject>
<Box
boxShadow={2}
className={[classes.root, className].join(' ')}
{...props}
>
{event ? <Link to={`/events/${event._id}`}>{imageTag}</Link> : imageTag}
</Box>
</HarlemObject>
)
}
......
......@@ -8,10 +8,11 @@ import TwitterIcon from '@material-ui/icons/Twitter'
import { FormattedMessage } from 'gatsby-plugin-intl'
import { ExternalLink } from 'amiv-react-components'
import VsethLogoSVG from '~images/logos/vseth_fachverein.png'
import VsethLogoSVG from '~images/logos/vseth_fachverein.svg'
import EthLogoSVG from '~images/logos/eth.svg'
import Link from './general/link'
import HarlemObject from './harlem/harlemObject'
const useVsethLogoStyles = makeStyles(
{
......@@ -150,13 +151,15 @@ const Footer = ({ className }) => {
return (
<footer className={[className, classes.root].join(' ')}>
<div className={classes.report}>
<Typography className={classes.contentContainer}>
<FormattedMessage id="footer.issueSpotted" />
&nbsp;
<ExternalLink href="https://gitlab.ethz.ch/amiv/amiv-website/issues/new?issuable_template=bug">
<FormattedMessage id="footer.issueReport" />
</ExternalLink>
</Typography>
<HarlemObject>
<Typography className={classes.contentContainer}>
<FormattedMessage id="footer.issueSpotted" />
&nbsp;
<ExternalLink href="https://gitlab.ethz.ch/amiv/amiv-website/issues/new?issuable_template=bug">
<FormattedMessage id="footer.issueReport" />
</ExternalLink>
</Typography>
</HarlemObject>
</div>
<div className={classes.footer}>
<div
......@@ -164,46 +167,58 @@ const Footer = ({ className }) => {
' '
)}
>
<Typography className={classes.copyright}>
© 1893 - {new Date().getFullYear()} AMIV an der ETH&nbsp;
<Link
className={classes.copyrightLink}
color="secondary"
to="/legal-notice"
>
<FormattedMessage id="contact" />
&nbsp;/&nbsp;
<FormattedMessage id="legal-notice.title" />
</Link>
</Typography>
<HarlemObject>
<Typography className={classes.copyright}>
© 1893 - {new Date().getFullYear()} AMIV an der ETH&nbsp;
<Link
className={classes.copyrightLink}
color="secondary"
to="/legal-notice"
>
<FormattedMessage id="contact" />
&nbsp;/&nbsp;
<FormattedMessage id="legal-notice.title" />
</Link>
</Typography>
</HarlemObject>
<div className={classes.socialLogoContainer}>
<ExternalLink
className={classes.socialLogoLink}
noIcon
href="https://www.facebook.com/AMIV.ETHZ/"
>
<FacebookIcon className={classes.socialLogo} />
</ExternalLink>
<ExternalLink
className={classes.socialLogoLink}
noIcon
href="https://www.instagram.com/amiv_eth/"
>
<InstagramIcon className={classes.socialLogo} />
</ExternalLink>
<ExternalLink
className={classes.socialLogoLink}
noIcon
href="https://twitter.com/amiv_ethz"
>
<TwitterIcon className={classes.socialLogo} />
</ExternalLink>
<HarlemObject>
<ExternalLink
className={classes.socialLogoLink}
noIcon
href="https://www.facebook.com/AMIV.ETHZ/"
>
<FacebookIcon className={classes.socialLogo} />
</ExternalLink>
</HarlemObject>
<HarlemObject>
<ExternalLink
className={classes.socialLogoLink}
noIcon
href="https://www.instagram.com/amiv_eth/"
>
<InstagramIcon className={classes.socialLogo} />
</ExternalLink>
</HarlemObject>
<HarlemObject>
<ExternalLink
className={classes.socialLogoLink}
noIcon
href="https://twitter.com/amiv_ethz"
>
<TwitterIcon className={classes.socialLogo} />
</ExternalLink>
</HarlemObject>
</div>
<div className={classes.institutionLogoContainer}>
<ExternalLink noIcon href="https://www.ethz.ch/">
<img height={64} src={EthLogoSVG} alt="ETH Zürich" />
</ExternalLink>
<VsethLogo className={classes.vsethLogo} />
<HarlemObject>
<ExternalLink noIcon href="https://www.ethz.ch/">
<img height={64} src={EthLogoSVG} alt="ETH Zürich" />
</ExternalLink>
</HarlemObject>
<HarlemObject>
<VsethLogo className={classes.vsethLogo} />
</HarlemObject>
</div>
</div>
</div>
......
......@@ -26,7 +26,7 @@ const StickyOnScroll = ({
const scrollTrigger = useScrollTrigger()
const classes = useStyles()
if (isBrowser) {
if (isBrowser()) {
useEffect(() => {
if (!containerElement.current) return () => {}
......
.mw-blocker {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100000;
background-color: transparent;
display: block;
}
import React from 'react'
import {
HARLEM_STATE_STARTED_STAGE1,
HARLEM_STATE_STARTED_STAGE2,
HARLEM_STATE_STARTED_STAGE3,
useHarlem,
} from '../../context/harlemContext'
import './harlemBlocker.css'
const HarlemBlocker = () => {
const harlem = useHarlem()
if (
harlem.state === HARLEM_STATE_STARTED_STAGE1 ||
harlem.state === HARLEM_STATE_STARTED_STAGE2 ||
harlem.state === HARLEM_STATE_STARTED_STAGE3
) {
return <div className="mw-blocker" />
}
return null
}
export default HarlemBlocker
import React, { useEffect, useState } from 'react'
import { Zoom, Fab, Tooltip } from '@material-ui/core'
import StopIcon from '@material-ui/icons/Stop'
import PlayArrowIcon from '@material-ui/icons/PlayArrow'
import { makeStyles, useTheme } from '@material-ui/styles'
import { useIntl } from 'gatsby-plugin-intl'
import {
HARLEM_STATE_IDLE,
HARLEM_STATE_STARTED_STAGE1,
HARLEM_STATE_STARTED_STAGE2,
HARLEM_STATE_STARTED_STAGE3,
useHarlem,
} from '../../context/harlemContext'
import { KITEN_STATE_ACTIVE, useKiten } from '../../context/kitenContext'
const useStyles = makeStyles(theme => ({
fab: {
position: 'fixed',
bottom: theme.spacing(16),
right: '50%',
transform: 'translateX(50%) !important',
zIndex: 100001,
},
}))
const HarlemButton = () => {
const harlem = useHarlem()
const kiten = useKiten()
const classes = useStyles()
const theme = useTheme()
const intl = useIntl()
const [showStart, setShowStart] = useState(false)
const [startTimeout, setStartTimeout] = useState(null)
const [showStop, setShowStop] = useState(false)
const [stopTimeout, setStopTimeout] = useState(null)
useEffect(() => {
if (startTimeout) {
clearTimeout(startTimeout)
}
if (stopTimeout) {
clearTimeout(stopTimeout)
}
if (harlem.enabled && harlem.state === HARLEM_STATE_IDLE) {
setStartTimeout(setTimeout(() => setShowStart(true), 500))
} else {
setShowStart(false)
}
if (
harlem.enabled &&
(harlem.state === HARLEM_STATE_STARTED_STAGE1 ||
harlem.state === HARLEM_STATE_STARTED_STAGE2 ||
harlem.state === HARLEM_STATE_STARTED_STAGE3)
) {
setStopTimeout(setTimeout(() => setShowStop(true), 500))
} else {
setShowStop(false)
}
}, [harlem.enabled, harlem.state])
const transitionDuration = {
enter: theme.transitions.duration.enteringScreen,
exit: theme.transitions.duration.leavingScreen,
}
const tooltipEnterDelay = 500
return (
<React.Fragment>
<Zoom
in={showStop}
timeout={transitionDuration}
style={{
transitionDelay: `${showStop ? transitionDuration.exit : 0}ms`,
}}
unmountOnExit
>
<Tooltip
title={intl.formatMessage({ id: 'harlem.button.stop' })}
enterDelay={tooltipEnterDelay}
placement="top"
>
<Fab
aria-label={intl.formatMessage({ id: 'harlem.button.stop' })}
className={classes.fab}
color="secondary"
onClick={() => harlem.stopEffect()}
>
<StopIcon />
</Fab>
</Tooltip>
</Zoom>
<Zoom
in={showStart && kiten.state !== KITEN_STATE_ACTIVE}
timeout={transitionDuration}
style={{
transitionDelay: `${showStart ? transitionDuration.exit : 0}ms`,
}}
unmountOnExit
>
<Tooltip
title={intl.formatMessage({ id: 'harlem.button.start' })}
enterDelay={tooltipEnterDelay}
placement="top"
>
<Fab
aria-label={intl.formatMessage({ id: 'harlem.button.start' })}
className={classes.fab}
color="secondary"
onClick={() => harlem.startEffect(true)}
>
<PlayArrowIcon />
</Fab>
</Tooltip>
</Zoom>
</React.Fragment>
)
}
export default HarlemButton
.harlem_paper {
max-width: unset !important;
}
import React from 'react'
import { Button, Dialog, DialogActions } from '@material-ui/core'
import { HARLEM_STATE_ENDED, useHarlem } from '../../context/harlemContext'
import { FormattedMessage } from 'gatsby-plugin-intl'
import image from '~images/af_final.png'
import './harlemEndDialog.css'
const HarlemEndDialog = () => {
const harlem = useHarlem()
const showDialog = harlem.state === HARLEM_STATE_ENDED
return (
<Dialog
scroll="body"
open={showDialog}
onClose={() => harlem.continueEffect()}
classes={{ paper: 'harlem_paper' }}
>
<img
width="711"
height="400"
style={{
width: 'auto',
height: 'auto',
maxHeight: 'calc(100% - 53px)',
maxWidth: '100%',
objectFit: 'contain',
}}
src={image}
/>
<DialogActions>
<Button onClick={() => harlem.continueEffect()} color="primary">
<FormattedMessage id="harlem.end.button" />
</Button>
</DialogActions>
</Dialog>
)
}
export default HarlemEndDialog
/* .im_drunk, .im_baked, .im_trippin, .im_blown */
.mw-strobe_light {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100000;
background-color: rgba(250, 250, 250, 0.8);
display: block;
}
.mw-harlem_shake_me {
transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-webkit-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
}
.mw-harlem_shake_slow {
transition: all 3.2s ease-in-out;
-moz-transition: all 3.2s ease-in-out;
-webkit-transition: all 3.2s ease-in-out;
-o-transition: all 3.2s ease-in-out;
-ms-transition: all 3.2s ease-in-out;
animation: spin 4s infinite linear;
-moz-animation: spin 4s infinite linear;
-webkit-animation: spin 4s infinite linear;
-o-animation: spin 4s infinite linear;
-ms-animation: spin 4s infinite linear;
}
/*
Animate.css - http://daneden.me/animate
Licensed under the ☺ license (http://licence.visualidiot.com/)
But we have it modified for our use.
*/
body {
-webkit-backface-visibility: hidden;
}
.mw-harlem_shake_me {
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
-o-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.mw-harlem_shake_slow {
-webkit-animation-duration: 1.6s;
-moz-animation-duration: 1.6s;
-o-animation-duration: 1.6s;
animation-duration: 1.6s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.flash,
.mw-strobe_light {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes shake {
0%,
100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(10px);
}
}
@-moz-keyframes shake {
0%,
100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(10px);
}
}
@-o-keyframes shake {
0%,
100% {
-o-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-o-transform: translateX(-10px);
}
20%,
40%,
60%,
80% {
-o-transform: translateX(10px);
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {