Skip to content

Feat/responsive #165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 3, 2024
Merged

Feat/responsive #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07a500b
feat: make dashboard responsive
Laphatize Aug 3, 2024
9f51c6c
feat: mobile responsiveness
Laphatize Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
150 changes: 93 additions & 57 deletions src/components/StandardNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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 && (
Expand All @@ -242,16 +257,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
<div className="flex">
<div className="-ml-2 mr-2 flex items-center md:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="hover-bg-neutral-900 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<Disclosure.Button className="transition-transform duration-300 hover-bg-neutral-900 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon
className="block h-6 w-6"
className={`block h-6 w-6 transition-opacity duration-300 ${open ? 'opacity-100' : 'opacity-0'}`}
aria-hidden="true"
/>
) : (
<Bars3Icon
className="block h-6 w-6"
className={`block h-6 w-6 transition-opacity duration-300 ${open ? 'opacity-0' : 'opacity-100'}`}
aria-hidden="true"
/>
)}
Expand Down Expand Up @@ -565,72 +580,93 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
</div>
</div>

<Disclosure.Panel className="md:hidden">
<div className="space-y-1 bg-neutral-800/50 pb-3 pt-2">
{/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300 hover:text-white" */}
<Disclosure.Button
as="a"
href="../dashboard"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-700 sm:pl-5 sm:pr-6"
>
Dashboard
</Disclosure.Button>
<Disclosure.Button
as="a"
href="../learn"
className=" block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-700 sm:pl-5 sm:pr-6"
>
Learn
</Disclosure.Button>
<Disclosure.Button
as="a"
href="../groups"
className="block hidden border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-700 sm:pl-5 sm:pr-6"
>
Classes
</Disclosure.Button>
<Disclosure.Button
as="a"
href="../practice"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-700 sm:pl-5 sm:pr-6"
>
Practice
</Disclosure.Button>
<Disclosure.Button
as="a"
href="../live"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-700 sm:pl-5 sm:pr-6"
>
Live
</Disclosure.Button>
</div>
<div className="border-t border-neutral-800 bg-neutral-800/50 pb-3 pt-4">
<div className="space-y-1">
<Transition
show={open}
enter="transition ease-out duration-200"
enterFrom="opacity-0 transform -translate-y-1"
enterTo="opacity-100 transform translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 transform translate-y-0"
leaveTo="opacity-0 transform -translate-y-1"
>
<Disclosure.Panel ref={panelRef} className="md:hidden">
<div className="space-y-1 bg-neutral-800/50 pb-3 pt-2">
{/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300 hover:text-white" */}
<Disclosure.Button
as="a"
href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
href="../dashboard"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-100 sm:pl-5 sm:pr-6"
>
Profile
Dashboard
</Disclosure.Button>
<Disclosure.Button
as="a"
href="#"
className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
href="../practice"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-100 sm:pl-5 sm:pr-6"
>
Settings
Practice
</Disclosure.Button>
<Disclosure.Button
as="a"
href="../leaderboards"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-100 sm:pl-5 sm:pr-6"
>
Leaderboards
</Disclosure.Button>

<Disclosure.Button
as="a"
onClick={logout}
className="hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-800 sm:px-6"
href="../groups"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300 hover:text-gray-100 sm:pl-5 sm:pr-6"
>
Sign out
Classes
</Disclosure.Button>
</div>
</div>
</Disclosure.Panel>
<div className="border-t border-neutral-800 bg-neutral-800/50 pb-3 pt-4">
<div className="space-y-1">
<Disclosure.Button
as="a"
href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/users/${username}`}
className="flex hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-100 sm:px-6"
>
<UserCircleIcon className="mr-4 block h-6 w-6" aria-hidden="true" />
Profile
</Disclosure.Button>
<Disclosure.Button
as="a"
href="/settings"
className="flex hover-bg-neutral-900 block px-4 py-2 text-base font-medium text-gray-300 hover:text-gray-100 sm:px-6"
>
<Cog6ToothIcon className="mr-4 block h-6 w-6" aria-hidden="true" />
Settings
</Disclosure.Button>

<Disclosure.Button
as="a"
onClick={logout}
className="flex cursor-pointer block px-4 py-2 text-base font-medium text-red-500 hover:text-red-400 sm:px-6"
>
<ArrowRightIcon className="mr-4 block h-6 w-6" aria-hidden="true" />
Sign out
</Disclosure.Button>
</div>
</div>
<div className="border-t border-neutral-800 bg-neutral-800/50 pb-3 pt-4">
<div className="px-4">
<div
type="text"
className="flex w-full items-center rounded-lg border border-transparent bg-neutral-800 px-4 py-2 text-sm font-semibold text-neutral-500 placeholder-gray-300 hover:cursor-pointer hover:text-neutral-50 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
onClick={() => setShowSearchModal(true)}
>
<FontAwesomeIcon
icon={faSearch}
className="mr-1 h-3 w-3"
/>
<span>Search for anything</span>
</div>
</div>
</div>
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
Expand Down
42 changes: 19 additions & 23 deletions src/components/dashboard/DashboardHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
></div>
</div>
<div className="mx-auto max-w-7xl ">
<div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
<div className="flex">
<div className="mx-auto max-w-7xl">
<div className="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
<div className="flex justify-center sm:justify-start">
<Link href={`${baseUrl}/users/${username}`}>
{(pfp && (
<img
className="h-24 w-24 rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
className="h-32 w-32 rounded-full hover:bg-[#212121] sm:h-32 sm:w-32"
src={pfp}
alt=""
/>
Expand All @@ -116,8 +116,8 @@ export function DashboardHeader() {
</Link>
</div>
<div className="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
<div className="mt-6 min-w-0 flex-1 sm:hidden md:block">
<h1 className="flex items-center mt-8 truncate text-2xl font-bold text-white">
<div className="mt-6 min-w-0 flex-1 sm:hidden md:block text-center sm:text-left">
<div className="items-center mt-8 truncate text-3xl sm:text-3xl lg:text-2xl font-bold text-white">
{username || (
<Skeleton
baseColor="#262626"
Expand All @@ -127,17 +127,19 @@ export function DashboardHeader() {
)}

{role === 'ADMIN' && (
<span className="ml-2 rounded-sm bg-red-600 px-1 text-sm">
<i className="fas fa-code fa-fw"></i> Developer
<span className="ml-2 rounded-sm bg-red-600 px-1 text-sm hidden sm:inline">
<i className="fas fa-code fa-fw"></i>
<span className="hidden sm:inline"> Developer</span>
</span>
)}
{role === 'PRO' && (
<span className="ml-2 rounded-sm bg-gradient-to-br from-orange-400 to-yellow-600 px-1 text-sm">
<i className="fas fa-crown fa-fw"></i> Pro
<span className="ml-2 rounded-sm bg-gradient-to-br from-orange-400 to-yellow-600 px-1 text-sm hidden sm:inline">
<i className="fas fa-crown fa-fw"></i>
<span className="hidden sm:inline"> Pro</span>
</span>
)}
</h1>
<p className="text-white">
</div>
<p className="text-white hidden sm:block">
<i className="fas fa-map-marker-alt mt-2"></i>{' '}
{location || (
<Skeleton
Expand All @@ -148,7 +150,7 @@ export function DashboardHeader() {
)}
</p>
</div>
<div className="mt-12 flex justify-stretch px-4 sm:px-4 md:px-0 lg:px-0 ">
<div className="hidden mt-12 flex justify-center sm:justify-stretch px-4 sm:px-4 md:px-0 lg:px-0 ">
<div className="mr-4 hidden">
{github && (
<a className="" href={github}>
Expand All @@ -173,7 +175,7 @@ export function DashboardHeader() {
</div>
<a
href={`/users/${username}`}
className=" duration-4000 mb-0 ml-2 mt-8 flex cursor-pointer items-center space-x-1 rounded-lg bg-neutral-800 px-10 py-1 transition ease-in-out hover:bg-neutral-800/40"
className="duration-400 mb-0 ml-2 flex cursor-pointer items-center space-x-1 rounded-lg bg-neutral-800 px-10 py-1 transition ease-in-out hover:bg-neutral-800/40 sm:block hidden"
>
<p className="mt-0 text-white">
<i className="fas fa-user mr-1"></i> View Profile
Expand All @@ -191,14 +193,8 @@ export function DashboardHeader() {
</div>
</div>
</div>
<div className="mt-6 hidden min-w-0 flex-1 sm:block md:hidden">
<h1 className="truncate text-2xl font-bold text-gray-900">
{username || (
<Skeleton baseColor="#262626" highlightColor="#3a3a3a" />
)}
</h1>
</div>

</div>
</div>
);
}
}
Loading