Skip to content

Notification added above calendar #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucidcyborg wants to merge 12 commits into
base: staging
Choose a base branch
from
Open

Notification added above calendar #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
68bfc5b
Merge pull request #54 from MetaFam/staging
geleeroyale Mar 7, 2021
20a4913
geleeroyale Mar 7, 2021
5719ff4
geleeroyale Mar 7, 2021
0ccd79a
remove Zeppelin from Metafestmap
geleeroyale Mar 8, 2021
a4faae2
geleeroyale Mar 8, 2021
efbb372
geleeroyale Mar 8, 2021
8f2c936
geleeroyale Mar 8, 2021
61d224f
geleeroyale Mar 8, 2021
044ee56
geleeroyale Mar 8, 2021
d2d6a78
geleeroyale Mar 8, 2021
9ba33eb
geleeroyale Mar 10, 2021
a30c36e
added notification above calendar
Mar 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"react-rnd": "^10.1.7",
"react-scripts": "3.2.0",
"react-starfield-animation": "^1.0.1",
"react-timezone": "^2.4.0",
"styled-components": "^5.0.0-beta.9",
"webfontloader": "^1.6.28"
},
Expand Down
170 changes: 0 additions & 170 deletions src/components/MetaFest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4456,177 +4456,7 @@ function SvgImagemap (props) {
fill='url(#imagemap_svg__pattern9)'
d='M366.791 576.149h41.734v73.004h-41.734z'
/>
<g
id='imagemap_svg__zeppelingroup'
filter='url(#imagemap_svg__filter0_d)'
>
<g id='imagemap_svg__Layer_2_4'>
<g id='imagemap_svg__Layer_9'>
<path
id='imagemap_svg__Vector_846'
d='M1161.81 455.437c88.38 0 160.02-20.301 160.02-45.343 0-25.042-71.64-45.343-160.02-45.343-88.37 0-160.02 20.301-160.02 45.343 0 25.042 71.65 45.343 160.02 45.343z'
fill='#392373'
/>
<path
id='imagemap_svg__Vector_847'
d='M1161.81 455.434c131.22 0 158.77-36.514 160.01-45.12h-320.03c0 29.198 71.91 45.12 160.02 45.12z'
fill='#1B0D2A'
/>
<path
id='imagemap_svg__Vector_848'
d='M1259.44 374.298s18.28 2.679 33.45 11.165c4.09-10.98 18.29-26.463 18.29-26.463h-39.95l-11.79 15.298z'
fill='#40347C'
/>
<path
id='imagemap_svg__Vector_849'
d='M1259.44 446.327s18.28-2.679 33.45-11.163c4.09 10.983 18.29 26.461 18.29 26.461h-39.95l-11.79-15.298z'
fill='#40347C'
/>
<path
id='imagemap_svg__Vector_850'
d='M1292.98 404.565v10.179s33.3-4.422 64.81-4.422l-64.81-5.757z'
fill='#40347C'
/>
<path
id='imagemap_svg__Vector_851'
d='M1069.26 478h38.17v-1.771c0-1.339-38.17 0-38.17 0V478z'
fill='#1B0D2A'
/>
<path
id='imagemap_svg__Vector_852'
d='M1069.26 478h38.17c0-19.587 5.82-24.007 6.26-24.141a239.83 239.83 0 01-36.83-4.286c-8.12 8.103-7.6 28.427-7.6 28.427zm18.23-19.482h5.47v6.667h-5.47v-6.667zm-4.41 0h3.04v6.667h-3.03l-.01-6.667zm-1.25 6.667h-5.47v-6.667h5.48l-.01 6.667z'
fill='#392373'
/>
<path
id='imagemap_svg__Vector_853'
d='M1069.26 478h38.17v-1.771c0-1.339-38.17 0-38.17 0V478z'
fill='#1B0D2A'
/>
<path
id='imagemap_svg__Vector_854'
d='M1092.97 458.518h-5.47v6.667h5.47v-6.667z'
fill='#1B0D2A'
fillOpacity={0.33}
/>
<path
id='imagemap_svg__Vector_855'
d='M1086.13 458.518h-3.04v6.667h3.04v-6.667z'
fill='#1B0D2A'
fillOpacity={0.33}
/>
<path
id='imagemap_svg__Vector_856'
d='M1081.84 458.518h-5.48v6.667h5.48v-6.667z'
fill='#1B0D2A'
fillOpacity={0.33}
/>
<path
id='imagemap_svg__Vector_857'
d='M1107.43 478s-.89-17.254 6.21-24.331c-1.78 0-2.58.08-2.58.08s-6.3 5.227-6.3 24.251h2.67z'
fill='#1B0D2A'
/>
<path
id='imagemap_svg__Vector_858'
d='M1076.81 449.686s25.3 4.425 36.84 3.983l-.89.994s-15.23-.367-36.69-4.219c.29-.316.74-.758.74-.758z'
fill='#1B0D2A'
/>
<g id='imagemap_svg__Group_160' opacity={0.67} fill='#79F8FB'>
<path
id='imagemap_svg__Vector_859'
opacity={0.67}
d='M1247.84 431.122l-.27-.032a181.668 181.668 0 000-45.538l.27-.035a181.26 181.26 0 010 45.605z'
/>
<path
id='imagemap_svg__Vector_860'
opacity={0.67}
d='M1240.51 431.122l-.26-.032a181.668 181.668 0 000-45.538l.26-.035a181.26 181.26 0 010 45.605z'
/>
<path
id='imagemap_svg__Vector_861'
opacity={0.67}
d='M1071.35 431.122a181.196 181.196 0 010-45.597l.27.035a180.73 180.73 0 000 45.538l-.27.024z'
/>
<path
id='imagemap_svg__Vector_862'
opacity={0.67}
d='M1064.47 431.122a181.196 181.196 0 010-45.597l.27.035a180.73 180.73 0 000 45.538l-.27.024z'
/>
<path
id='imagemap_svg__Vector_863'
opacity={0.67}
d='M1215.52 381.649h-124.73v.268h124.73v-.268z'
/>
<path
id='imagemap_svg__Vector_864'
opacity={0.67}
d='M1255.47 395.803h-204.19v.268h204.19v-.268z'
/>
<path
id='imagemap_svg__Vector_865'
opacity={0.67}
d='M1271.9 409.96h-236.6v.268h236.6v-.268z'
/>
<path
id='imagemap_svg__Vector_866'
opacity={0.67}
d='M1255.48 424.117h-203.31v.268h203.31v-.268z'
/>
<path
id='imagemap_svg__Vector_867'
opacity={0.67}
d='M1216.41 438.272h-124.73v.268h124.73v-.268z'
/>
</g>
<path
id='imagemap_svg__Rectangle'
fill='url(#imagemap_svg__pattern10)'
d='M1107.75 388.846h101.872v42.056H1107.75z'
/>
<path
id='imagemap_svg__Vector_868'
d='M1116.26 423.145a83.311 83.311 0 010-26.557l5.76-.086a97.653 97.653 0 00-.54 22.014c3.88.034 7.75.063 11.62.086.1 1.584.22 3.169.37 4.754-5.73-.044-11.47-.115-17.21-.211z'
fill='#C92F81'
/>
<path
id='imagemap_svg__Vector_869'
d='M1138.51 423.399c-.11-1.428-.2-2.862-.27-4.302l5.81.024c-.23-6.17-.23-12.34 0-18.51l-5.81.027c.08-1.429.17-2.863.27-4.305 5.74-.042 11.46-.067 17.18-.075-.02 1.443-.03 2.886-.04 4.329h-5.8c-.14 6.179-.14 12.36 0 18.542h5.8c.01 1.443.02 2.886.04 4.329-5.72.006-11.45-.014-17.18-.059z'
fill='#C92F81'
/>
<path
id='imagemap_svg__Vector_870'
d='M1165.96 423.466c-2.12-9.059-4.71-18.137-7.06-27.21h6.37c1.15 4.615 2.3 9.228 3.37 13.835.54 2.609 1.04 5.219 1.51 7.828h.31c.6-2.609 1.19-5.218 1.74-7.825 1.08-4.605 2.06-9.204 2.85-13.795l6.06.042c-1.61 8.996-4.2 18.031-7.06 27.088-2.7.019-5.39.032-8.09.037z'
fill='#C92F81'
/>
<path
id='imagemap_svg__Vector_871'
d='M1184.51 423.357c.85-8.974.85-18.007 0-26.981 5.68.054 11.35.124 17.03.212.25 1.563.45 3.122.62 4.68-3.82-.038-7.64-.071-11.47-.099.16 2.055.26 4.109.3 6.161l11.18.026a73.12 73.12 0 010 4.683l-11.18.024a109.02 109.02 0 01-.31 6.504c3.82-.03 7.64-.063 11.47-.099a93.999 93.999 0 01-.62 4.68c-5.67.094-11.34.164-17.02.209z'
fill='#C92F81'
/>
<path
id='imagemap_svg__Vector_872'
d='M1076.14 450.345l.23.147s-5.4 5.893-6.47 20.238a.186.186 0 01-.08.055.216.216 0 01-.1.012.225.225 0 01-.09-.035.135.135 0 01-.06-.072s.8-14.147 6.57-20.345z'
fill='#79F8FB'
fillOpacity={0.67}
/>
<path
id='imagemap_svg__Vector_873'
d='M1074.28 446.147h-.27v24.551h.27v-24.551z'
fill='#C92F81'
/>
<path
id='imagemap_svg__Vector_874'
d='M1095.37 448.802h-.27V470.7h.27v-21.898z'
fill='#C92F81'
/>
<path
id='imagemap_svg__Vector_875'
d='M1069.26 476.229s-.29-1.73.3-5.51c3.25-.241 18.34-.241 29.44.201v4.723l-29.74.586z'
fill='#40347C'
/>
</g>
</g>
</g>
</g>
<defs>
<pattern
id='imagemap_svg__pattern0'
Expand Down
9 changes: 0 additions & 9 deletions src/components/MetaFestMobile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,8 @@ import styled from 'styled-components'
import { useMediaQuery } from 'react-responsive'
import { FloatingSpaceContext } from '../contexts/FloatingSpaceContext'

import Crawl from './crawltext/crawltext'

import HeaderImage from '../img/metafest-header.png'
import Date from '../img/metafest-date.png'
import Flavortext from '../img/metafest-flavortext.png'
import Grid from '../img/metafest-grid.gif'
import Future from '../img/metafest-manifest-the-future.png'
import Noise from '../img/metafest-noise.gif'
import Rocks from '../img/metafest-rocks.gif'
import Wanderer from '../img/metafest-wanderer.png'
import Loupe from '../img/loupe.svg'

const StyledLink = styled.a`
color: #e340a8;
Expand Down
112 changes: 90 additions & 22 deletions src/components/Space.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React, { Fragment, useContext, useState, useEffect } from 'react'
import styled from '@emotion/styled'
import { BrowserView, MobileView } from 'react-device-detect'
import {
BrowserView,
isBrowser,
isMobile,
MobileView
} from 'react-device-detect'

import { FloatingSpaceContext } from '../contexts/FloatingSpaceContext'

Expand All @@ -13,6 +18,8 @@ import HeaderImage from '../img/metafest-header.png'
import Date from '../img/metafest-date.png'
import Future from '../img/metafest-manifest-the-future.png'

import Zeppelin from '../img/zeppelin.svg'

const Header = styled.span``

const ImagemapContainer = styled.div`
Expand Down Expand Up @@ -100,6 +107,26 @@ const Triangle = styled.img`
align-self: baseline;
`

const ClickImage = styled.img`
cursor: pointer;
`

const MovingImage = styled.img`
pointer-events: none;
position: absolute;
z-index: 1;
animation: slidein 300s linear;
@keyframes slidein {
from {
transform: translateX(130%) translateY(70%);
}

to {
transform: translateX(-30%) translateY(60%);
}
}
`

const HeaderContainer = styled.div`
grid-template-columns: auto auto auto;
justify-content: space-between;
Expand All @@ -114,13 +141,14 @@ const ShowSection = () => {

const ButtonContainer = styled.div`
position: absolute;
z-index: 5;
background-color: ${props => props.theme.background};
// opacity: 0.7;
opacity: 0.9;
width: 100vw;
height: 100vh;
display: grid;
justify-self: center;
justify-content: end;
place-content: center;
`
const CloseButton = styled.button`
background: unset;
Expand All @@ -141,16 +169,35 @@ const ShowSection = () => {
<div>
{isHidden ? null : (
<ButtonContainer>
{isHidden ? null : <Element />}
<BrowserView>{isHidden ? null : <DesktopElement />}</BrowserView>
<MobileView>{isHidden ? null : <MobileElement />}</MobileView>
<CloseButton onClick={onClick}>
{isHidden ? '' : 'Close this message'}
{isHidden ? '' : 'Click Me'}
</CloseButton>
</ButtonContainer>
)}
</div>
)
}
const Element = () => (

const DesktopElement = () => (
<Descripton>
<p>
To enter <StrongStyled>METAFEST</StrongStyled>, you will have to
<br />
<a
href='https://gitcoin.co/grants/213/metagame'
target='_blank'
rel='noopener noreferrer'
>
donate to our Gitcoin grant
</a>
</p>
<p style={{ marginTop: '2rem' }}>just joking ... here you go</p>
</Descripton>
)

const MobileElement = () => (
<Descripton>
<p>
This website is optimized for <StrongStyled>desktop</StrongStyled>.{' '}
Expand All @@ -163,7 +210,9 @@ const Element = () => (
)

const Space = () => {
const { currentFloatingSpaces } = useContext(FloatingSpaceContext)
const { currentFloatingSpaces, addFloatingSpace } = useContext(
FloatingSpaceContext
)

const space = currentFloatingSpaces

Expand Down Expand Up @@ -194,33 +243,52 @@ const Space = () => {
return (
<SpaceSelector>
<BrowserView viewClassName='space-container'>
<img
<ShowSection />
<MovingImage src={Zeppelin} width='auto' height='auto' />
<ClickImage
src={Date}
alt='March 7th - April 4th'
width='auto'
height='60px'
style={{ position: 'absolute', bottom: '10px', left: '1rem' }}
/>
<img
src={HeaderImage}
alt='MetaFest'
width='auto'
height='150px'
style={{
position: 'absolute',
top: '10px',
marginLeft: 'auto',
marginRight: 'auto',
left: '0px',
right: '0px'
bottom: '10px',
left: '1rem',
zIndex: 2
}}
className='click-zone'
onClick={() => addFloatingSpace('Calendar')}
/>
<img
<a href='/'>
<ClickImage
src={HeaderImage}
alt='MetaFest'
width='auto'
height='150px'
style={{
position: 'absolute',
top: '10px',
marginLeft: 'auto',
marginRight: 'auto',
left: '0px',
right: '0px',
zIndex: 2
}}
/>
</a>
<ClickImage
src={Future}
alt='manifest'
width='auto'
height='100px'
style={{ position: 'absolute', bottom: '10px', right: '1rem' }}
style={{
position: 'absolute',
bottom: '10px',
right: '1rem',
zIndex: 2
}}
className='click-zone'
onClick={() => addFloatingSpace('Apply')}
/>

<ImagemapContainer>
Expand Down
Loading