Skip to content

Commit

Permalink
Responsive desktop and event names under chips
Browse files Browse the repository at this point in the history
  • Loading branch information
@singulari1y
singulari1y committed Oct 6, 2023
1 parent f13145a commit 23b27d6
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 58 deletions.
40 changes: 32 additions & 8 deletions src/Components/Events/EventsMobile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,17 @@ import token2 from './token2.png';
import token3 from './token3.png';
import token4 from './token4.png';
import token5 from './token5.png';
import token6 from './token6.png';
// import token6 from './token6.png';

const EventsMobile = () => {
const images = [token1, token2, token3, token4, token5, token6];
const images = [token1, token2, token3, token4, token5]; //token6
const text = [
'FLORENCE',
'FILM & PHOTOGRAPH',
'BEAU VISTA',
'THE QUIZ FEST',
'EXTRAS',
];
const variants = {
enter: direction => {
return {
Expand Down Expand Up @@ -61,7 +68,7 @@ const EventsMobile = () => {
style={{
color: 'white',
fontFamily: 'Junge',
fontSize: 64,
fontSize: '10vw',
fontWeight: '400',
wordWrap: 'break-word',
flex: 'auto',
Expand All @@ -75,11 +82,11 @@ const EventsMobile = () => {
key={page}
style={{
position: 'absolute',
borderRadius: '10%',
backgroundImage: `url(${images[imageIndex]})`,
backgroundSize: 'contain',
height: '100px',
width: '100px',
backgroundSize: '6rem',
backgroundRepeat: 'no-repeat',
height: '12rem',
width: '6rem',
marginTop: '8rem',
}}
drag='x'
Expand All @@ -102,7 +109,24 @@ const EventsMobile = () => {
paginate(-1);
}
}}
></motion.div>
>
<div
style={{
color: 'white',
fontFamily: 'Junge',
fontSize: '7vw',
fontWeight: '400',
wordWrap: 'normal',
flex: 'auto',
marginTop: '8rem',
width: '300%',
textAlign: 'center',
marginLeft: '-100%',
}}
>
{text[imageIndex]}
</div>
</motion.div>
</AnimatePresence>
</Box>
</Box>
Expand Down
63 changes: 13 additions & 50 deletions src/Components/Events/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,13 @@ import swords from './sword.png';
import sword_animated from './swordhover.png';
import box from './boxclosed.png';
import box_animated from './boxopen.png';
import seaweed from './seaweed.svg';
// import seaweed from './seaweed.svg';
import trans from '../../assets/1024px-HD_transparent_picture.png';
import Scroll from '../scroll/scroll';

function Events() {
const [isHoveringSword, setIsHoveringSword] = useState(false);
const [isHoveringBox, setIsHoveringBox] = useState(false);
const [isHoveringHelmet, setIsHoveringHelmet] = useState(false);
const [showScroll, setShowScroll] = useState(false);
const [scrollHead, setScrollHead] = useState('');
const [scrollContent, setScrollContent] = useState('');
const zoomInOnHover = {
transform: 'scale(1)',
transition: 'transform 0.5s',
Expand All @@ -42,12 +38,6 @@ function Events() {
const [jellyfishStyle, setJellyfishStyle] = useState(zoomInOnHover);
return (
<ChakraProvider theme={theme}>
<Scroll
showScroll={showScroll}
setShowScroll={setShowScroll}
scrollHead={scrollHead}
scrollContent={scrollContent}
/>
<Box position='relative'>
<Image
src={bgimage}
Expand All @@ -74,11 +64,11 @@ function Events() {
{methods => <></>}
</WaterWave>
<Flex direction='column'>
<Box position='absolute' top='5%' right='35%'>
<Box position='absolute' top='5%' left='30%'>
<div
style={{
color: 'white',
fontSize: 96,
fontSize: '7.5vw',
fontFamily: 'Junge',
fontWeight: '400',
wordWrap: 'break-word',
Expand All @@ -87,20 +77,14 @@ function Events() {
E V E N T S
</div>
</Box>
<Box position='absolute' top='5%' right='5%'>
<Box position='absolute' top='12%' right='2%'>
<Image
src={jellyfish}
alt='Jellyfish'
width='314px'
height='221px'
zIndex='1'
cursor='pointer'
style={jellyfishStyle}
onClick={() => {
setScrollHead('FLORENCE');
setScrollContent('FLORENCE is a good event ig');
setShowScroll(!showScroll);
}}
onMouseEnter={() => {
setJellyfishStyle(zoomOutOnHover);
}}
Expand All @@ -121,19 +105,13 @@ function Events() {
</Box>
</Flex>
<Flex direction='column'>
<Box position='absolute' top='2%' left='5%'>
<Box position='absolute' top='10%' left='3%'>
<Image
src={horsewheel}
alt='Horsewheel'
width='135.40px'
height='117.10px'
zIndex='1'
cursor='pointer'
onClick={() => {
setScrollHead('EXTRAS');
setScrollContent('EXTRAS is a good event ig');
setShowScroll(!showScroll);
}}
/>
<Text
fontSize='22'
Expand All @@ -148,24 +126,19 @@ function Events() {
</Box>
</Flex>
<Flex>
<Box position='absolute' bottom='2%' right='5%'>
<Box position='absolute' bottom='2%' right='5%' alignItems={'center'}>
<Image
src={isHoveringHelmet ? helmet_animated : spartanhelmet}
alt='Spartan'
width='251.582px'
height='280.858px'
zIndex='1'
cursor='pointer'
onClick={() => {
setScrollHead('FILM & PHOTOGRAPHY');
setScrollContent('FILM & PHOTOGRAPHY is a good event ig');
setShowScroll(!showScroll);
}}
onMouseEnter={() => setIsHoveringHelmet(true)}
onMouseLeave={() => setIsHoveringHelmet(false)}
style={{
transition: '0.5s',
}}
marginBottom='-4rem'
/>
<Text
fontSize='22'
Expand All @@ -180,7 +153,7 @@ function Events() {
</Box>
</Flex>
<Flex direction='column'>
<Box position='absolute' bottom='20%' left='14%'>
<Box position='absolute' bottom='30%' left='14%'>
<Image
src={swords}
opacity={isHoveringSword ? 0 : 1}
Expand All @@ -189,7 +162,7 @@ function Events() {
pos='absolute'
bottom='60%'
left='-10%'
cursor='pointer'
marginBottom='-4rem'
onMouseEnter={() => setIsHoveringSword(true)}
onMouseLeave={() => setIsHoveringSword(false)}
style={{
Expand All @@ -204,32 +177,29 @@ function Events() {
pos='absolute'
bottom='60%'
left='-10%'
cursor='pointer'
onClick={() => {
setScrollHead('THE QUIZ FEST');
setScrollContent('THE QUIZ FEST is a good event ig');
setShowScroll(!showScroll);
}}
marginBottom='-4rem'
onMouseEnter={() => setIsHoveringSword(true)}
onMouseLeave={() => setIsHoveringSword(false)}
style={{
transition: '0.5s',
}}
/>
<Text
position={'relative'}
fontSize='22'
fontWeight='400'
fontFamily='Inknut Antiqua'
wordBreak='break-word'
color='white'
zIndex={1}
>
{' '}
THE QUIZ FEST{' '}
</Text>
</Box>
</Flex>
<Flex>
<Box position='absolute' bottom='0%' left='27%'>
<Box position='absolute' bottom='0%' left='30%'>
<Image
src={box}
alt='Box'
Expand All @@ -239,7 +209,6 @@ function Events() {
pos='absolute'
bottom='100%'
left='-10%'
cursor='pointer'
opacity={isHoveringBox ? 0 : 1}
onMouseEnter={() => setIsHoveringBox(true)}
onMouseLeave={() => setIsHoveringBox(false)}
Expand All @@ -256,13 +225,7 @@ function Events() {
pos='absolute'
bottom='100%'
left='-10%'
cursor='pointer'
opacity={isHoveringBox ? 1 : 0}
onClick={() => {
setScrollHead('BEAU VISTA');
setScrollContent('BEAU VISTA is a good event ig');
setShowScroll(!showScroll);
}}
onMouseEnter={() => setIsHoveringBox(true)}
onMouseLeave={() => setIsHoveringBox(false)}
style={{
Expand Down

0 comments on commit 23b27d6

Please sign in to comment.