diff --git a/client/src/App.css b/client/src/App.css index 6f52abe..7a329fc 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -237,7 +237,7 @@ canvas { .container { display: flex; - align-items: flex-end; + align-items: flex-start; color: white; width: 100%; justify-content: center; @@ -253,7 +253,11 @@ canvas { .podium__item { width: 250px; + height:100%; transition: 0.5s; + display:grid; + grid-template-columns:100%; + grid-template-rows:80% 20%; } .podium__item:hover { diff --git a/client/src/Components/EventsPodium.tsx b/client/src/Components/EventsPodium.tsx index b024037..4473a91 100644 --- a/client/src/Components/EventsPodium.tsx +++ b/client/src/Components/EventsPodium.tsx @@ -1,266 +1,305 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from "react"; import first from "../Assets/first.jpg"; import second from "../Assets/second.jpg"; import third from "../Assets/third.jpg"; -import { Team } from '../Models/EventModel'; - +import { Team } from "../Models/EventModel"; interface Prop { - teams: Team[] + teams: Team[]; } export default function EventsPodium({ teams }: Prop) { + const [topDivOpacity, setTopDivOpacity] = useState(1); + const firstTeam = teams[0]; + const secondTeam = teams[1]; + const thirdTeam = teams[2]; - const [topDivOpacity, setTopDivOpacity] = useState(1); - const firstTeam = teams[0]; - const secondTeam = teams[1]; - const thirdTeam = teams[2]; - - window.addEventListener("scroll", () => { - if (window.innerWidth > 850) { - const currentScroll = window.scrollY; - setTopDivOpacity(1 - currentScroll / 250); - } - }); - return ( - -
-
-
-
- { - (secondTeam && secondTeam.members.length >= 2) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#2

*/} -

{secondTeam.members[1].name}

-

{secondTeam.members[1].reg_no}

-
- ) - : - (<>) - } - { - (secondTeam && secondTeam.members.length >= 1) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#1

*/} -

{secondTeam.members[0].name}

-

{secondTeam.members[0].reg_no}

-
- ) - : - (<>) - } - { - (secondTeam && secondTeam.members.length >= 3) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#3

*/} -

{secondTeam.members[2].name}

-

{secondTeam.members[2].reg_no}

-
- ) - : - (<>) - } + window.addEventListener("scroll", () => { + if (window.innerWidth > 850) { + const currentScroll = window.scrollY; + setTopDivOpacity(1 - currentScroll / 250); + } + }); + return ( +
+
+
+
+ {secondTeam && secondTeam.members.length >= 2 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#2

*/} +
+

{secondTeam.members[1].name}

+

{secondTeam.members[1].reg_no}

+
+
+ ) : ( + <> + )} + {secondTeam && secondTeam.members.length >= 1 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#1

*/} +
+

{secondTeam.members[0].name}

+

{secondTeam.members[0].reg_no}

+
+
+ ) : ( + <> + )} + {secondTeam && secondTeam.members.length >= 3 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#3

*/} +
+

{secondTeam.members[2].name}

+

{secondTeam.members[2].reg_no}

+
+
+ ) : ( + <> + )} +
+

#2

+

{secondTeam ? secondTeam.name : ""}

+
+
+
+ {firstTeam && firstTeam.members.length >= 2 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#2

*/} +
+

{firstTeam.members[1].name}

+

{firstTeam.members[1].reg_no}

+
+
+ ) : ( + <> + )} + {firstTeam && firstTeam.members.length >= 1 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#1

*/} +
+

{firstTeam.members[0].name}

+

{firstTeam.members[0].reg_no}

+
+
+ ) : ( + <> + )} + {firstTeam && firstTeam.members.length >= 3 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#3

*/} +
+

{firstTeam.members[2].name}

+

{firstTeam.members[2].reg_no}

+
+
+ ) : ( + <> + )} +
+

#1

+

{firstTeam ? firstTeam.name : ""}

+
+ {thirdTeam ? ( +
+
+ {thirdTeam && thirdTeam.members.length >= 2 ? ( +
+
+
+ + + + +
+
+ +
+
+ {/*

#2

*/} +
+

{thirdTeam.members[1].name}

+

+ {thirdTeam.members[1].reg_no} +

+
+
+ ) : ( + <> + )} + {thirdTeam && thirdTeam.members.length >= 1 ? ( +
+
+
+ + + + +
+
+
-

#2

-

{(secondTeam) ? secondTeam.name : ""}

+
+ {/*

#1

*/} +
+

{thirdTeam.members[0].name}

+

+ {thirdTeam.members[0].reg_no} +

+
-
-
- { - (firstTeam && firstTeam.members.length >= 2) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#2

*/} -

{firstTeam.members[1].name}

-

{firstTeam.members[1].reg_no}

-
- ) - : - (<>) - } - { - (firstTeam && firstTeam.members.length >= 1) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#1

*/} -

{firstTeam.members[0].name}

-

{firstTeam.members[0].reg_no}

-
- ) - : - (<>) - } - { - (firstTeam && firstTeam.members.length >= 3) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#3

*/} -

{firstTeam.members[2].name}

-

{firstTeam.members[2].reg_no}

-
- ) - : - (<>) - } + ) : ( + <> + )} + {thirdTeam.members.length >= 3 ? ( +
+
+
+ + + + +
+
+
-

#1

-

{(firstTeam) ? firstTeam.name : ""}

+
+ {/*

#3

*/} +
+

{thirdTeam.members[2].name}

+

+ {thirdTeam.members[2].reg_no} +

+
- { - (thirdTeam) ? - ( -
-
- { - (thirdTeam && thirdTeam.members.length >= 2) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#2

*/} -

{thirdTeam.members[1].name}

-

{thirdTeam.members[1].reg_no}

-
- ) - : - (<>) - } - { - (thirdTeam && thirdTeam.members.length >= 1) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#1

*/} -

{thirdTeam.members[0].name}

-

{thirdTeam.members[0].reg_no}

-
- ) - : - (<>) - } - { - (thirdTeam.members.length >= 3) ? - ( -
-
-
- - - - -
-
- -
-
- {/*

#3

*/} -

{thirdTeam.members[2].name}

-

{thirdTeam.members[2].reg_no}

-
- ) - : - (<>) - } -
-

#3

-

{thirdTeam.name}

-
- ): - (<>) - } + ) : ( + <> + )}
-
-

Scroll down to see complete Leaderboard

-
-
- ) -} \ No newline at end of file +

#3

+

{thirdTeam.name}

+
+ ) : ( + <> + )} +
+
+

Scroll down to see complete Leaderboard

+
+
+ ); +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..000738b --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "CodeSangam", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}