From b68b4c5cf2e41fa3c47c14e92a10fd2c58e00118 Mon Sep 17 00:00:00 2001 From: Jeyavishnu S Date: Thu, 1 Jun 2023 15:49:50 +0530 Subject: [PATCH 1/7] feat: enable Tablet Mode for Teams Section - Created Developer.module.css. - Modified CSS for Tablet Mode. - Fixed layout bugs in Tablet Mode. - Edited CSS to ease transition to TailwindCSS. --- pages/_app.js | 2 +- pages/developers.js | 2 +- styles/Developer.module.css | 139 ++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 styles/Developer.module.css diff --git a/pages/_app.js b/pages/_app.js index 52656f9..d3a4f20 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -12,7 +12,7 @@ import ScrollButton from '../components/scrollToTop/ScrollButton'; const Tablet = () => { const isTablet = useMediaQuery({ minWidth: 601, maxWidth: 1226 }); - return isTablet; + return isTablet && false; }; const closeIcon = ; function MyApp({ Component, pageProps }) { diff --git a/pages/developers.js b/pages/developers.js index cfacafe..39d2867 100644 --- a/pages/developers.js +++ b/pages/developers.js @@ -1,4 +1,4 @@ -import styles from '../styles/Testimonial.module.css'; +import styles from '../styles/Developer.module.css'; import Head from 'next/head'; import { AiFillLinkedin } from 'react-icons/ai'; import Link from 'next/link'; diff --git a/styles/Developer.module.css b/styles/Developer.module.css new file mode 100644 index 0000000..31d022a --- /dev/null +++ b/styles/Developer.module.css @@ -0,0 +1,139 @@ +.container { + width: 100%; + padding-right: 4rem; + padding-left: 4rem; + margin-bottom: 3em; + /* height: 100vh; */ +} + +.testimonial { + padding: 1rem; + flex-basis: 30rem; + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-flow: column; +} + +.testimonial__heading { + text-align: center; + font-size: 3rem; + color: #d7e1ec; +} + +.testimonial__row__1 { + /* display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: masonry; */ + display: flex; + justify-content: space-evenly; + align-items: stretch; + flex-wrap: wrap; + gap: 1rem; +} + +.testimonial__row__2 { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.testimonial__row__2 .testimonial { + padding: 2rem; + flex-basis: auto; +} + +.testimonial__article { + padding: 1.25rem; + border: 1px solid transparent; + border-radius: 1.25rem; + background-image: linear-gradient( + 154deg, + #3a3e41 0%, + #2a2d30 49%, + #242628 100% + ), + linear-gradient(160deg, #434b54 1%, #2a2c2f 45%, #191b1e 75%); + background-clip: padding-box, border-box; + background-origin: padding-box, border-box; + box-shadow: 1.875rem 1.5625rem 1.375rem rgb(21 22 24 / 24%), + -4px -4px 15px rgb(195 200 205 / 4%); + display: flex; + flex: 1; +} + +.testimonial__img { + padding-left: 2rem; + padding-right: 2rem; +} +.developer__img{ + padding-left: 2rem; + padding-right: 1rem; + border-radius: 50%; + width: 4.75rem; + height: 3.25rem; + background: linear-gradient(-32deg, #1a1d21 3%, #393d42 44% 56%, #1a1d21 97%) + 0% 0%/200% 200%; + box-shadow: 4px 4px 18px rgb(0 0 0 / 40%), + -4px -2px 16px rgb(195 200 205 / 8%); + margin: 5%; + object-fit: cover; +} +.contributor__img{ + padding-left: 2rem; + padding-right: 1rem; + border-radius: 50%; + width: 4.75rem; + height: 4.5rem; + background: linear-gradient(-32deg, #1a1d21 3%, #393d42 44% 56%, #1a1d21 97%) + 0% 0%/200% 200%; + box-shadow: 4px 4px 18px rgb(0 0 0 / 40%), + -4px -2px 16px rgb(195 200 205 / 8%); + margin: 5%; + object-fit: cover; +} +.testimonial__content > h5 { + color: #d7e1ec; + line-height: 1.7; + font-weight: 500; + letter-spacing: 0; +} + +.testimonial__content > p { + color: #a0a1ac; +} + +.testimonial__content > span { + color: #d7e1ec; +} + +@media (min-width: 1300px) { + .testimonial{ + padding: 0.5em; + } +} + +@media only screen and (max-width: 600px) { + .testimonial__row__1 { + display: block; + } + .testimonial{ + padding: 1em; + } + /* .testimonial__row__2 { + display: block; + } */ + .testimonial__content > p { + width: 105%; + margin-top: 5px; + } + .container { + padding-right: 0; + padding-left: 0; + } + .testimonial__heading { + font-size: 2rem; + } +} From e92a59ebdbf19c2b8c261f9d4b1b50adab23575c Mon Sep 17 00:00:00 2001 From: Jeyavishnu S Date: Sun, 4 Jun 2023 07:47:23 +0530 Subject: [PATCH 2/7] fix: modify tablet function - Tablet function now takes nextjs router object as argument. - Anyone wanting to enable a page can add to the conditions in the return statement easily. --- pages/_app.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/pages/_app.js b/pages/_app.js index d3a4f20..19698c3 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -9,14 +9,22 @@ import { Modal } from 'react-responsive-modal'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import ScrollButton from '../components/scrollToTop/ScrollButton'; +import { useRouter } from 'next/router'; -const Tablet = () => { +// takes router as argument to get path or page name +const Tablet = Router => { + console.log(Router.pathname=="/developers"); const isTablet = useMediaQuery({ minWidth: 601, maxWidth: 1226 }); - return isTablet && false; + // only allows /developers route in tablet mode. + return isTablet && !(Router.pathname == "/developers"); }; const closeIcon = ; + function MyApp({ Component, pageProps }) { - return Tablet() ? ( + // useRouter for passing router object to tablet function on render. + const router = useRouter(); + + return Tablet(router) ? ( <>

This Web service is not available in Tablet mode :(

From d7d830bc7961f0fccdb15cb7cbeb959d55b63786 Mon Sep 17 00:00:00 2001 From: Jeyavishnu S Date: Sun, 4 Jun 2023 07:50:41 +0530 Subject: [PATCH 3/7] fix: Remove console logs - Removed uneccessary console logs in the code. --- pages/_app.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/_app.js b/pages/_app.js index 19698c3..aec9d4a 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -13,10 +13,9 @@ import { useRouter } from 'next/router'; // takes router as argument to get path or page name const Tablet = Router => { - console.log(Router.pathname=="/developers"); const isTablet = useMediaQuery({ minWidth: 601, maxWidth: 1226 }); // only allows /developers route in tablet mode. - return isTablet && !(Router.pathname == "/developers"); + return isTablet && !(Router.pathname == '/developers'); }; const closeIcon = ; From 3cd1745017bdf03bb205e8182411ee07b217584c Mon Sep 17 00:00:00 2001 From: Jeyavishnu S Date: Wed, 7 Jun 2023 17:00:34 +0530 Subject: [PATCH 4/7] fix: edit navbar for tablet mode. - navbar changes layout to a flex container with space-between. - Mobile navbar becomes visible at max-width: 775px - Changes to VOVOCA icon in navbar for better layout and responsiveness. --- components/Navbar/Navbar.jsx | 13 +++++++-- components/Navbar/Navbar.module.css | 43 +++++++++++++++++++++-------- 2 files changed, 41 insertions(+), 15 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index daa83d7..44b12d4 100644 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -1,14 +1,19 @@ import React, { useEffect, useState } from 'react'; import style from './Navbar.module.css'; import { Modal } from 'react-responsive-modal'; -import { FaTimes, FaUserCircle, FaCode } from 'react-icons/fa'; +import { + FaTimes, + FaUserCircle, + FaCode, + FaBars, + FaPowerOff, +} from 'react-icons/fa'; import Login from '../homepage/Header/Login'; import style_modal from '../../styles/Modal.module.css'; import cookie from 'js-cookie'; import Link from 'next/link'; import Signup from '../homepage/Header/Signup'; import { useSelector, useDispatch } from 'react-redux'; -import { FaPowerOff } from 'react-icons/fa'; import { IoMdLogIn } from 'react-icons/io'; import { AiFillHome, AiFillInfoCircle } from 'react-icons/ai'; import { BsFillPeopleFill, BsFillMusicPlayerFill } from 'react-icons/bs'; @@ -159,7 +164,9 @@ const Navbar = () => { } > -
VOVOCA
+
+ VOVOCA +
    diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index a2c53c3..5cece85 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -4,9 +4,14 @@ font-size: 2vw; line-height: 2vw; text-shadow: 0 0 1vw #4ce2ec; - padding-top: 1.1em; - margin-left: 5%; cursor: pointer; + margin-left: 1rem; +} + +.neon__container { + display:flex; + align-items: center; + height: 100%; } .neon { @@ -14,10 +19,14 @@ -moz-animation: neon 5s ease infinite; -webkit-animation: neon 5s ease infinite; } + +.nav__bar { + margin-right: 1rem; +} + .nav__items { list-style: none; display: flex; - margin: 30px; position: relative; z-index: 2; } @@ -57,10 +66,10 @@ display: flex; justify-content: space-between; align-items: center; - height: 75px !important; + /* height: 75px !important; */ z-index: 100; - padding-top: 51px; - padding-bottom: 51px; + /* padding-top: 51px; */ + /* padding-bottom: 51px; */ } .scroll__header .neon{ padding-top: unset; @@ -69,12 +78,7 @@ .mobile__header,.dashnav_mobile { display: none; } -@media (max-width: 1300px) { - .neon{ - padding-top: 1.5em; - } -} -@media only screen and (max-width: 600px) { +@media only screen and (max-width: 775px) { .navbar__box { display: none; } @@ -158,4 +162,19 @@ 0 0 5vw #800e0b, 0 0 0.2vw #800e0b, 0.5vw 0.5vw 0.1vw #40340a; color: #ebc886; } +} + +/* Navbar rules for Tablet Mode */ +@media only screen and ( max-width: 898px) { + .list__items { + margin: 0; + } + .nav__bar { + width: 100%; + padding-left: 1rem; + } + .nav__items { + display: flex; + justify-content: space-between; + } } \ No newline at end of file From 0dd74b61aba7f63d0069ec34f00605cae9054c26 Mon Sep 17 00:00:00 2001 From: Jeyavishnu S Date: Wed, 7 Jun 2023 17:34:32 +0530 Subject: [PATCH 5/7] fix: further modify Navbar - additional bug fixed for the tablet mode navbar. --- components/Navbar/Navbar.jsx | 12 +++--------- components/Navbar/Navbar.module.css | 7 ++++--- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index 44b12d4..0a3bc58 100644 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -1,13 +1,7 @@ import React, { useEffect, useState } from 'react'; import style from './Navbar.module.css'; import { Modal } from 'react-responsive-modal'; -import { - FaTimes, - FaUserCircle, - FaCode, - FaBars, - FaPowerOff, -} from 'react-icons/fa'; +import { FaTimes, FaUserCircle, FaCode, FaPowerOff } from 'react-icons/fa'; import Login from '../homepage/Header/Login'; import style_modal from '../../styles/Modal.module.css'; import cookie from 'js-cookie'; @@ -190,9 +184,9 @@ const Navbar = () => {
  • Team
    • {authenticated.isAuthenticated === true ? ( - + diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index 5e53a33..d51d15b 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -163,19 +163,4 @@ 0 0 5vw #800e0b, 0 0 0.2vw #800e0b, 0.5vw 0.5vw 0.1vw #40340a; color: #ebc886; } -} - -/* Navbar rules for Tablet Mode */ -@media only screen and ( max-width: 898px) { - .list__items { - margin: 0; - } - .nav__bar { - width: 100%; - padding-left: 1rem; - } - .nav__items { - justify-content: space-between; - gap: 0px; - } } \ No newline at end of file From 6f8cf23370a3e34514d67a894464161a6ec97704 Mon Sep 17 00:00:00 2001 From: Jeyavishnu S Date: Thu, 8 Jun 2023 17:23:45 +0530 Subject: [PATCH 7/7] fix: remove dashboard icon in tablet mode - edited CSS rules to remove icon in tablet mode. --- components/Navbar/Navbar.jsx | 4 ++++ components/Navbar/Navbar.module.css | 9 ++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components/Navbar/Navbar.jsx b/components/Navbar/Navbar.jsx index b8f9439..52f5931 100644 --- a/components/Navbar/Navbar.jsx +++ b/components/Navbar/Navbar.jsx @@ -197,6 +197,10 @@ const Navbar = () => { alignItems: 'center', }} > + Dashboard

    diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index d51d15b..109f483 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -163,4 +163,11 @@ 0 0 5vw #800e0b, 0 0 0.2vw #800e0b, 0.5vw 0.5vw 0.1vw #40340a; color: #ebc886; } -} \ No newline at end of file +} + +/* Navbar rules for Tablet Mode */ +@media only screen and ( max-width: 898px) { + .dashboard__icon { + display: none; + } +} \ No newline at end of file