From 110124174ee265de862bb0c005ca5b27846ec5a4 Mon Sep 17 00:00:00 2001 From: Irfan Asif Date: Sat, 16 Apr 2022 20:06:40 +0530 Subject: [PATCH 1/4] [FIX] livestream component --- app/components/layout.js | 7 ++- app/pages/virtualconf/mainstage/index.js | 68 +++++++++++++----------- 2 files changed, 40 insertions(+), 35 deletions(-) diff --git a/app/components/layout.js b/app/components/layout.js index 03bb2d5d..d21faf98 100644 --- a/app/components/layout.js +++ b/app/components/layout.js @@ -1,8 +1,6 @@ import '../styles/Layout.module.css'; import Footer from './footer'; import Menubar from './menubar'; -import BookmarkSVG from '/public/svg/bookmark.js'; -import styles from '../styles/Mainstage.module.css'; import { useRouter } from 'next/router'; function Layout(props) { @@ -12,7 +10,8 @@ function Layout(props) { {props.children}
- {pathname === '/virtualconf/mainstage' && ( + {/* announcement component here*/} + {/* pathname === '/virtualconf/mainstage' && (

@@ -21,7 +20,7 @@ function Layout(props) { April 6 for the LIVE conference

- )} + )*/} ); } diff --git a/app/pages/virtualconf/mainstage/index.js b/app/pages/virtualconf/mainstage/index.js index ce572496..59ca51c9 100644 --- a/app/pages/virtualconf/mainstage/index.js +++ b/app/pages/virtualconf/mainstage/index.js @@ -1,17 +1,17 @@ -import Image from "next/image"; -import Link from "next/link"; -import Head from "next/head"; -import RCPlusGSocLogo from "/public/rcandgsoclogo.png"; -import CirclesSVG from "/public/svg/circles.js"; -import RCPlusGSocCompactLogo from "/public/rcandgsoclogocompact.png"; -import styles from "../../../styles/Mainstage.module.css"; -import { Container, Row, Col } from "react-bootstrap"; -import SpeakerInfotiles from "../../../components/speakerinfotile"; -import { fetchAPI } from "../../../lib/api"; -import { useEffect, useState } from "react"; -import Animation from "../../../components/animation"; +import Image from 'next/image'; +import Link from 'next/link'; +import Head from 'next/head'; +import RCPlusGSocLogo from '/public/rcandgsoclogo.png'; +import CirclesSVG from '/public/svg/circles.js'; +import RCPlusGSocCompactLogo from '/public/rcandgsoclogocompact.png'; +import styles from '../../../styles/Mainstage.module.css'; +import { Container, Row, Col } from 'react-bootstrap'; +import SpeakerInfotiles from '../../../components/speakerinfotile'; +import { fetchAPI } from '../../../lib/api'; +import { useEffect, useState } from 'react'; +import Animation from '../../../components/animation'; -const countdown = new Date("04/06/2022 10:00:00 AM UTC"); +const countdown = new Date('04/06/2022 10:00:00 AM UTC'); const Mainstage = ({ speakers }) => { const [timer, setTimer] = useState([0, 0, 0, 0]); @@ -27,7 +27,7 @@ const Mainstage = ({ speakers }) => { const seconds = Math.floor((distance % (1000 * 60)) / 1000); setTimer([days, hours, minutes, seconds]); if (distance < 0) { - setTimer("We are now live! ✨"); + setTimer('We are now live! ✨'); } }, 1000); }, [timer]); @@ -37,10 +37,10 @@ const Mainstage = ({ speakers }) => { Conference Mainstage - +
@@ -48,8 +48,8 @@ const Mainstage = ({ speakers }) => {
- -

Rocket.Chat

+ +

Rocket.Chat

{ />
- +

Rocket.Chat's GSOC Alumni Summit 2022 @@ -70,7 +70,9 @@ const Mainstage = ({ speakers }) => { program.

- Live! + + Live Stream ended +

@@ -84,17 +86,21 @@ const Mainstage = ({ speakers }) => { {new Date().getTime() - countdown.getTime() < 0 ? (

- JOIN THE SUMMIT NOW! - Click https://bbb.rocket.chat/b/sin-ur2-c72-cbv + Event Click{' '} + + https://bbb.rocket.chat/b/sin-ur2-c72-cbv +

) : (

- Event is live now!{" "} - - ✨ - - JOIN THE SUMMIT NOW! - Click https://bbb.rocket.chat/b/sin-ur2-c72-cbv + Recordings are available on{' '} + + Youtube +

)}

@@ -116,7 +122,7 @@ const Mainstage = ({ speakers }) => {

- {" "} + {' '}

); @@ -125,7 +131,7 @@ const Mainstage = ({ speakers }) => { export default Mainstage; export async function getStaticProps({ params }) { - const speakers = await fetchAPI("/speakers"); + const speakers = await fetchAPI('/speakers'); return { props: { speakers }, revalidate: 1, From 0b417265738b14e6742ef86bdab7078626271062 Mon Sep 17 00:00:00 2001 From: Irfan Asif Date: Sat, 16 Apr 2022 21:05:17 +0530 Subject: [PATCH 2/4] [removed] timer --- app/pages/virtualconf/mainstage/index.js | 51 +++++------------------- 1 file changed, 10 insertions(+), 41 deletions(-) diff --git a/app/pages/virtualconf/mainstage/index.js b/app/pages/virtualconf/mainstage/index.js index 59ca51c9..1487a2ad 100644 --- a/app/pages/virtualconf/mainstage/index.js +++ b/app/pages/virtualconf/mainstage/index.js @@ -8,30 +8,8 @@ import styles from '../../../styles/Mainstage.module.css'; import { Container, Row, Col } from 'react-bootstrap'; import SpeakerInfotiles from '../../../components/speakerinfotile'; import { fetchAPI } from '../../../lib/api'; -import { useEffect, useState } from 'react'; import Animation from '../../../components/animation'; - -const countdown = new Date('04/06/2022 10:00:00 AM UTC'); - const Mainstage = ({ speakers }) => { - const [timer, setTimer] = useState([0, 0, 0, 0]); - - useEffect(() => { - setInterval(() => { - const distance = countdown.getTime() - new Date().getTime(); - const days = Math.floor(distance / (1000 * 60 * 60 * 24)); - const hours = Math.floor( - (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) - ); - const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((distance % (1000 * 60)) / 1000); - setTimer([days, hours, minutes, seconds]); - if (distance < 0) { - setTimer('We are now live! ✨'); - } - }, 1000); - }, [timer]); - return ( <> @@ -84,25 +62,16 @@ const Mainstage = ({ speakers }) => { - {new Date().getTime() - countdown.getTime() < 0 ? ( -

- Event Click{' '} - - https://bbb.rocket.chat/b/sin-ur2-c72-cbv - -

- ) : ( -

- Recordings are available on{' '} - - Youtube - -

- )} +

+ Recordings are available on{' '} + + Youtube + +

Open Source is not only about technology. It's about people too! Human connections that will expand your network and enable you From 5034a7a5be3950c616e80edae38b52bba149691c Mon Sep 17 00:00:00 2001 From: Irfan Asif Date: Sun, 22 May 2022 16:24:23 +0530 Subject: [PATCH 3/4] [ADD] new Menubar component --- app/components/layout.js | 4 +- app/components/newMenuBar.js | 273 ++++++++++++++++++ app/styles/Menubar.module.css | 45 +++ .../sub-menu/models/sub-menu.settings.json | 3 + 4 files changed, 324 insertions(+), 1 deletion(-) create mode 100644 app/components/newMenuBar.js diff --git a/app/components/layout.js b/app/components/layout.js index d21faf98..250328a0 100644 --- a/app/components/layout.js +++ b/app/components/layout.js @@ -1,5 +1,6 @@ import '../styles/Layout.module.css'; import Footer from './footer'; +import NewMenubar from './newMenuBar'; import Menubar from './menubar'; import { useRouter } from 'next/router'; @@ -7,7 +8,8 @@ function Layout(props) { const { pathname } = useRouter(); return ( <> - + {/**/} + {props.children}

{/* announcement component here*/} diff --git a/app/components/newMenuBar.js b/app/components/newMenuBar.js new file mode 100644 index 00000000..16be9272 --- /dev/null +++ b/app/components/newMenuBar.js @@ -0,0 +1,273 @@ +import { useEffect, useRef, useState } from 'react'; +import { Navbar, Nav, Container, Col, Row, Offcanvas } from 'react-bootstrap'; +import styles from '../styles/Menubar.module.css'; +import { FirebaseAuthMenuButton } from './auth/firebase'; +import BrandLogo from './brandlogo'; + +const ArrowIcon = () => { + return ( + + + + ); +}; + +const MobileNav = ({ nav_Items }) => { + const [dropDown, setDropDown] = useState({ show: false, _id: 0 }); + + return ( + + + +
+ + +
+ + + + Rocket Chat Community + + + {nav_Items?.map((nav_Item) => + nav_Item.url ? ( +
+ { + setDropDown({ show: false, _id: 0 }); + }} + > + + + {nav_Item.label} + + + +
+ ) : ( +
+ { + if (dropDown._id === nav_Item.id) { + setDropDown({ show: false, _id: 0 }); + } else { + setDropDown({ show: true, _id: nav_Item.id }); + } + }} + > + + {nav_Item.label} + + + {nav_Item.sub_menus?.length > 1 && ( + + + + )} + + + {dropDown._id === nav_Item.id && dropDown.show ? ( +
+
+ {nav_Item.sub_menus.map( + (item) => + item.parent_id === null && ( + <> + + {nav_Item.sub_menus.map( + (subItem) => + subItem.parent_id === item.id && ( + + ) + )} + + ) + )} +
+
+ ) : ( + '' + )} +
+ ) + )} + + + +
+ +
+ + + + ); +}; + +const DesktopNav = ({ nav_Items }) => { + const [isShown, setIsShown] = useState(0); + const clickRef = useRef(null); + + const handleClickOutside = (event) => { + if (clickRef.current && !clickRef.current.contains(event.target)) { + setIsShown(false); + } + }; + + useEffect(() => { + document.addEventListener('click', handleClickOutside, true); + return () => { + document.removeEventListener('click', handleClickOutside, true); + }; + }, []); + + return ( + + + +
+ +
+ + ); +}; + +export default function NewMenubar(props) { + return ( + + + + + ); +} diff --git a/app/styles/Menubar.module.css b/app/styles/Menubar.module.css index 11d342c5..ce8e96a4 100644 --- a/app/styles/Menubar.module.css +++ b/app/styles/Menubar.module.css @@ -96,3 +96,48 @@ margin-top: 10px; transform: rotate(0deg); } + +.rotate { + transform: rotate(-180deg); + transition: all 0.1s; +} +.navbar_subitems { + position: absolute; + transform: translate(-5rem, 30px); + background-color: white; + padding: 0rem; + max-width: 36rem; + z-index: 10; +} + +.navbar_subitems_items { + padding: 1rem 1rem 1rem 2rem; + width: 18rem; +} + +.subItemLinks { + cursor: pointer; + + text-decoration: none; + color: black; +} + +.color { + color: red; +} +.arrow { + margin-left: 80%; +} + +.arrowRotate { + margin-left: 80%; + transform: rotate(180deg); +} +.navbar_item_hover:hover { + cursor: pointer; + color: red; +} + +.dropdown { + cursor: pointer; +} diff --git a/cms/api/sub-menu/models/sub-menu.settings.json b/cms/api/sub-menu/models/sub-menu.settings.json index 9202b7dc..8ace4990 100644 --- a/cms/api/sub-menu/models/sub-menu.settings.json +++ b/cms/api/sub-menu/models/sub-menu.settings.json @@ -17,6 +17,9 @@ }, "url": { "type": "string" + }, + "parent_id": { + "type": "integer" } } } From b2b5a52f2301db38727703c75a4565142a84799c Mon Sep 17 00:00:00 2001 From: Irfan Asif Date: Fri, 27 May 2022 15:44:46 +0530 Subject: [PATCH 4/4] [FIX] build issue --- app/components/newMenuBar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/newMenuBar.js b/app/components/newMenuBar.js index 16be9272..c731e7ef 100644 --- a/app/components/newMenuBar.js +++ b/app/components/newMenuBar.js @@ -180,7 +180,7 @@ const DesktopNav = ({ nav_Items }) => { width={132} />