From 07a500bdd2501f677fa8da9a62c220a6c25176de Mon Sep 17 00:00:00 2001 From: Pranav Ramesh Date: Sat, 3 Aug 2024 00:08:59 -0400 Subject: [PATCH 1/2] feat: make dashboard responsive --- src/components/StandardNav.jsx | 143 +++++++++++-------- src/components/dashboard/DashboardHeader.jsx | 42 +++--- src/pages/dashboard.jsx | 38 +---- 3 files changed, 107 insertions(+), 116 deletions(-) diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx index 186916de..164c557c 100644 --- a/src/components/StandardNav.jsx +++ b/src/components/StandardNav.jsx @@ -1,4 +1,4 @@ -import { Fragment, useEffect, useState } from 'react'; +import { Fragment, useEffect, useState, useRef } from 'react'; import { Disclosure, Menu, Popover, Transition } from '@headlessui/react'; import { Dialog } from '@headlessui/react'; @@ -218,6 +218,21 @@ export function StandardNav({ guestAllowed, alignCenter = true }) { : 'text-gray-300 hover:text-gray-50 border-transparent' }`; + const panelRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event) => { + if (panelRef.current && !panelRef.current.contains(event.target)) { + setOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [panelRef]); + return ( <> {isPopoverOpen && ( @@ -242,16 +257,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
{/* Mobile menu button */} - + Open main menu {open ? (
- -
- {/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300 hover:text-white" */} - - Dashboard - - - Learn - - - Classes - - - Practice - - - Live - -
-
-
+ + +
+ {/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300 hover:text-white" */} - Profile + Dashboard - Settings + Practice - - Sign out + Classes
-
- +
+
+ + + + + + + +
+
+
+
+
setShowSearchModal(true)} + > + + Search for anything +
+
+
+ + )} diff --git a/src/components/dashboard/DashboardHeader.jsx b/src/components/dashboard/DashboardHeader.jsx index 2bd6e369..e8cdfb46 100644 --- a/src/components/dashboard/DashboardHeader.jsx +++ b/src/components/dashboard/DashboardHeader.jsx @@ -90,17 +90,17 @@ export function DashboardHeader() { backgroundImage: 'url("https://images.unsplash.com/photo-1633259584604-afdc243122ea?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80")', }} - className="h-20 w-full object-cover lg:h-20" + className="h-20 w-full object-cover lg:h-20 " alt="" >
-
-
-
+
+
+
{(pfp && ( @@ -116,8 +116,8 @@ export function DashboardHeader() {
-
-

+
+
{username || ( - Developer + + + Developer )} {role === 'PRO' && ( - - Pro + + + Pro )} -

-

+

+

{' '} {location || (

-
-
-

- {username || ( - - )} -

-
+
); -} +} \ No newline at end of file diff --git a/src/pages/dashboard.jsx b/src/pages/dashboard.jsx index c65a434d..1a92080c 100644 --- a/src/pages/dashboard.jsx +++ b/src/pages/dashboard.jsx @@ -164,47 +164,13 @@ export default function Dashboard() { -
-
- -
-
-
- - ​ - -
-
-
- -
-
-

- Mobile Device Warning -

-
-

- We regret to inform you that CTFGuide is not optimized for use on mobile devices. While you can still access our website on your phone or tablet, we strongly recommend using a desktop or laptop computer for the best experience. -

-
-
-
-
- -
-
-
-
+
-
+
{showOnboarding && (
From 9f51c6c06c724d6d919eb5a7e27c38fb7a09a9df Mon Sep 17 00:00:00 2001 From: Pranav Ramesh Date: Sat, 3 Aug 2024 03:01:08 -0400 Subject: [PATCH 2/2] feat: mobile responsiveness --- .env.development | 2 +- package.json | 2 + src/components/StandardNav.jsx | 9 +- src/pages/challenges/[...id].jsx | 159 ++++++++++++++++----- src/pages/leaderboards.jsx | 53 ++++++- src/pages/users/[user].jsx | 238 +++++++++++++++++++++++++++++-- src/styles/tailwind.css | 9 +- yarn.lock | 39 ++++- 8 files changed, 460 insertions(+), 51 deletions(-) diff --git a/.env.development b/.env.development index ce0b2196..7b4ac54c 100644 --- a/.env.development +++ b/.env.development @@ -23,7 +23,7 @@ NEXT_PUBLIC_APP_STORAGE_BUCKET=ctfguide-dev.appspot.com NEXT_PUBLIC_APP_MESSAGING_SENDER_ID=792987058367 NEXT_PUBLIC_APP_ID=1:792987058367:web:c48935325e46043c3cc60a NEXT_PUBLIC_APP_MEASUREMENT_ID=G-7ZNKM9VFN2 -NEXT_PUBLIC_TERM_URL=https://dev-terminal-api.ctfguide.com/ +NEXT_PUBLIC_TERM_URL=https://prod-terminal-api.ctfguide.com/ NEXT_PUBLIC_APP_STRIPE_KEY=pk_test_51MAliSF4qMywXyoUvCPG6HDRQaRy4ach2pfDIj4sklm4k22VinqVcygs61F7UWosnZo6Ig1iFykui6rsbR0tRStm00LRZCrXQ8 diff --git a/package.json b/package.json index b6526b72..b2867c26 100644 --- a/package.json +++ b/package.json @@ -65,9 +65,11 @@ "react-markdown": "^9.0.1", "react-markdown-editor-lite": "^1.3.4", "react-resizable": "^3.0.5", + "react-responsive": "^10.0.0", "react-router-dom": "^6.9.0", "react-select-country-list": "^2.2.3", "react-simplemde-editor": "^5.2.0", + "react-swipeable": "^7.0.1", "react-text-loop": "^2.3.0", "react-text-transition": "^3.1.0", "react-toastify": "^10.0.5", diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx index 164c557c..f8f87590 100644 --- a/src/components/StandardNav.jsx +++ b/src/components/StandardNav.jsx @@ -606,6 +606,13 @@ export function StandardNav({ guestAllowed, alignCenter = true }) { > Practice + + Leaderboards +