Skip to content

Commit

Permalink
Add thumbnail images to the Robots page
Browse files Browse the repository at this point in the history
  • Loading branch information
@DeveloperBlue
DeveloperBlue committed Dec 13, 2024
1 parent 3340875 commit 64ac522
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 70 deletions.
1 change: 0 additions & 1 deletion app/Robots/[robot]/MediaContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const MediaContainer = ({robotItem}) => {
dynamicHeight={false}
preventMovementUntilSwipeScrollTolerance={true}
swipeScrollTolerance={50}
showThumbs={true}
style={{
position: 'relative',
display: 'flex',
Expand Down
157 changes: 99 additions & 58 deletions app/Robots/[robot]/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client"
import styles from './page.module.css'
import { useState, useEffect } from 'react'
import Image from 'next/image';

import Navbar from '@components/Navbar/Navbar'
import Footer from '@components/Footer/Footer'
Expand Down Expand Up @@ -44,6 +45,66 @@ const EventItem = ({eventData}) => {
)
}

const RobotNavigationButtons = ({visible, previousRobotItem, nextRobotItem}) => {
return (
<div
className={styles.navigationButtons}
visible={visible}
style={{marginTop : visible == 'mobile' ? 40 : 0}}
>
<ButtonLink
className={styles.button}
href={previousRobotItem ? `/Robots/${previousRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={previousRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap'
}}
>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-left-filled" style={{marginRight : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2a10 10 0 0 1 .324 19.995l-.324 .005l-.324 -.005a10 10 0 0 1 .324 -19.995zm.707 5.293a1 1 0 0 0 -1.414 0l-4 4a1.048 1.048 0 0 0 -.083 .094l-.064 .092l-.052 .098l-.044 .11l-.03 .112l-.017 .126l-.003 .075l.004 .09l.007 .058l.025 .118l.035 .105l.054 .113l.043 .07l.071 .095l.054 .058l4 4l.094 .083a1 1 0 0 0 1.32 -1.497l-2.292 -2.293h5.585l.117 -.007a1 1 0 0 0 -.117 -1.993h-5.586l2.293 -2.293l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" />
</svg>
<span>
Previous Robot
</span>
</span>
</ButtonLink>
<ButtonLink
className={styles.button}
href={nextRobotItem ? `/Robots/${nextRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={nextRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap',
}}
>
<span>
Next Robot
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-right-filled" style={{marginLeft : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2l.324 .005a10 10 0 1 1 -.648 0l.324 -.005zm.613 5.21a1 1 0 0 0 -1.32 1.497l2.291 2.293h-5.584l-.117 .007a1 1 0 0 0 .117 1.993h5.584l-2.291 2.293l-.083 .094a1 1 0 0 0 1.497 1.32l4 -4l.073 -.082l.064 -.089l.062 -.113l.044 -.11l.03 -.112l.017 -.126l.003 -.075l-.007 -.118l-.029 -.148l-.035 -.105l-.054 -.113l-.071 -.111a1.008 1.008 0 0 0 -.097 -.112l-4 -4z" stroke-width="0" fill="currentColor" />
</svg>
</span>
</ButtonLink>
</div>
)
}

export default function Robot({params}) {

Expand All @@ -67,9 +128,40 @@ export default function Robot({params}) {
}, [])

if (robotData == null){
return <span>
Loading
</span>
return (
<div
style={{
display : 'flex',
width : '100dvw',
height : '80dvh',
justifyContent : 'center',
alignItems : 'center'
}}
>
<div
style={{
display : 'flex',
flexDirection : 'column',
gap : 20,
justifyContent : 'center',
alignItems : 'center'
}}
>
<Image
src="/images/logo.png"
width={128}
height={128}
alt="The Sentinels Logo"
style={{
backgroundColor : '#0054b1'
}}
/>
<span>
Loading
</span>
</div>
</div>
)
}

const {robotItem, previousRobotItem, nextRobotItem} = (() => {
Expand All @@ -89,7 +181,8 @@ export default function Robot({params}) {
<div className='container' style={{display: 'flex', flexDirection : 'column', gap : 20, paddingTop : 40, paddingBottom : 40, textAlign : 'justify'}}>
<div
style={{
display : 'flex'
display : 'flex',
justifyContent : 'space-between'
}}
>
<ButtonLink
Expand Down Expand Up @@ -118,6 +211,7 @@ export default function Robot({params}) {
</span>
</span>
</ButtonLink>
<RobotNavigationButtons visible='desktop' previousRobotItem={previousRobotItem} nextRobotItem={nextRobotItem}/>
</div>

<h3>{robotItem.name}</h3>
Expand Down Expand Up @@ -190,60 +284,7 @@ export default function Robot({params}) {
</div>
</div>
</div>
<div
className={styles.navigationButtons}
>
<ButtonLink
className={styles.button}
href={previousRobotItem ? `/Robots/${previousRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={previousRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap'
}}
>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-left-filled" style={{marginRight : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2a10 10 0 0 1 .324 19.995l-.324 .005l-.324 -.005a10 10 0 0 1 .324 -19.995zm.707 5.293a1 1 0 0 0 -1.414 0l-4 4a1.048 1.048 0 0 0 -.083 .094l-.064 .092l-.052 .098l-.044 .11l-.03 .112l-.017 .126l-.003 .075l.004 .09l.007 .058l.025 .118l.035 .105l.054 .113l.043 .07l.071 .095l.054 .058l4 4l.094 .083a1 1 0 0 0 1.32 -1.497l-2.292 -2.293h5.585l.117 -.007a1 1 0 0 0 -.117 -1.993h-5.586l2.293 -2.293l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor" />
</svg>
<span>
Previous Robot
</span>
</span>
</ButtonLink>
<ButtonLink
className={styles.button}
href={nextRobotItem ? `/Robots/${nextRobotItem.name.replace(/ /g, "")}` : '/Robots'}
style={{
backgroundColor : '#000'
}}
disabled={nextRobotItem == null}
>
<span
style={{
paddingLeft : 20,
paddingRight : 20,
verticalAlign : 'bottom',
whiteSpace : 'nowrap',
}}
>
<span>
Next Robot
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-arrow-right-filled" style={{marginLeft : 8, verticalAlign : 'bottom'}} width="24" height="24" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 2l.324 .005a10 10 0 1 1 -.648 0l.324 -.005zm.613 5.21a1 1 0 0 0 -1.32 1.497l2.291 2.293h-5.584l-.117 .007a1 1 0 0 0 .117 1.993h5.584l-2.291 2.293l-.083 .094a1 1 0 0 0 1.497 1.32l4 -4l.073 -.082l.064 -.089l.062 -.113l.044 -.11l.03 -.112l.017 -.126l.003 -.075l-.007 -.118l-.029 -.148l-.035 -.105l-.054 -.113l-.071 -.111a1.008 1.008 0 0 0 -.097 -.112l-4 -4z" stroke-width="0" fill="currentColor" />
</svg>
</span>
</ButtonLink>
</div>
<RobotNavigationButtons visible='mobile' previousRobotItem={previousRobotItem} nextRobotItem={nextRobotItem}/>
</div>
<SponsorshipIncentivesBlock style={{marginBottom : -80, paddingBottom : 180, backgroundColor : '#000'}}/>
<Footer/>
Expand Down
16 changes: 15 additions & 1 deletion app/Robots/[robot]/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@

.navigationButtons {
display: flex;
margin-top: 80px;
flex-direction: row;
justify-content: flex-end;
gap : 20px;
}

.navigationButtons[visible='mobile'] {
display: 'none';
visibility: hidden;
}

.sideDataContainer {
width : 320px;
display: flex;
Expand Down Expand Up @@ -63,4 +67,14 @@
flex-direction: column;
}

.navigationButtons[visible='desktop'] {
display: 'none';
visibility: hidden;
}

.navigationButtons[visible='mobile'] {
display: 'initial';
visibility: visible;
}

}
40 changes: 30 additions & 10 deletions app/components/RobotItem/RobotItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ const RobotItem = ({robotItem, index}) => {

const [isHovering, setHovering] = useState(false);

console.log("thumb", robotItem.thumbnail)

const thumbnail = (robotItem.thumbnail) ? `url(${robotItem.thumbnail})` : "url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)"

return (
<Link
href={`/Robots/${robotItem.name.replace(/ /g, "")}`}
Expand All @@ -20,7 +24,7 @@ const RobotItem = ({robotItem, index}) => {
backgroundColor : 'red',
aspectRatio : '1 / 1',
position : 'relative',
transform: `scale(${isHovering ? 1.05 : 1})`,
transform: `scale(${isHovering ? 1.05 : 1})`,
}}
onMouseEnter={() => {
setHovering(true);
Expand All @@ -37,11 +41,12 @@ const RobotItem = ({robotItem, index}) => {
bottom : 8,
left : -8,
right : 8,
backgroundColor : bgColor,
backgroundColor : isHovering ? bgColor : 'transparent',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'multiply',
backgroundImage : 'url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)'
backgroundPosition : 'center center',
backgroundBlendMode: 'multiply',
backgroundImage : thumbnail
}}
>
</div>
Expand All @@ -51,21 +56,36 @@ const RobotItem = ({robotItem, index}) => {
position: 'relative',
width : '100%',
height : '100%',
backgroundColor : isHovering ? bgColor : 'transparent',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundBlendMode: 'multiply',
backgroundImage : 'url(https://i.ytimg.com/vi/oVSD8OBbLaM/maxresdefault.jpg)',
overflow : 'hidden',
display : 'flex',
justifyContent: 'center',
alignItems : 'center'
}}
>
<div
className={styles.robotItemImageBox}
style={{
position: 'relative',
width : isHovering ? '105%' : '100%',
height : isHovering ? '105%' : '100%',
backgroundColor : isHovering ? bgColor : 'transparent',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition : 'center center',
backgroundBlendMode: 'multiply',
backgroundImage : thumbnail,
transition : 'width 0.4s, height 0.4s'
}}
/>
</div>
<div
style={{
display : 'flex',
flexDirection : 'column',
padding : 20,
position : 'absolute',
left : 0, right : 0,
left : 0,
right : 0,
bottom : 0,
background : 'linear-gradient(transparent, #000000ee)',
color : '#fff'
Expand Down

0 comments on commit 64ac522

Please sign in to comment.