-
Notifications
You must be signed in to change notification settings - Fork 17
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.
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
Pc/feat/nav bar update #881
Merged
Merged
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
2a86893
Dropdown bus and subway done. Need to add bus line selection.
PatrickCleary 61b003c
lint is broken...
PatrickCleary deb071d
Fix bug with duplicate dropdowns
PatrickCleary 4a68dca
more padding
PatrickCleary 32702b6
Add bus routes dropdown
PatrickCleary 26b47f1
Add borders
PatrickCleary 07cdbb2
Work in Progress
PatrickCleary 9c3ed69
Fixed mobile scrolling. Align icons + text
PatrickCleary e6f81bf
Add hover + selected logic to all buttons on sidebar.
PatrickCleary d6643a4
Linting (it was broken previously)
PatrickCleary 9299ffb
unused
PatrickCleary 17bd2bc
Merge branch 'main' into pc/feat/nav-bar-update
PatrickCleary 205052a
Merge remote-tracking branch 'origin/main' into pc/feat/nav-bar-update
PatrickCleary c5754c0
style modifications
PatrickCleary 1a5b43a
The people have spoken – icons are in.
PatrickCleary 9568f42
tad more paddidng
PatrickCleary 9aa0851
[sic] grammer
PatrickCleary 6abd94c
lint
PatrickCleary 1e7c46c
small padding changes, remove old prop type.
PatrickCleary File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"trailingComma": "es5", | ||
"tabWidth": 2, | ||
"singleQuote": true, | ||
"printWidth": 100, | ||
"plugins": ["prettier-plugin-tailwindcss"] | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import { SidebarTabs } from '../../../modules/navigation/SidebarTabs'; | ||
import { TRIP_PAGES, BUS_OVERVIEW } from '../../constants/pages'; | ||
import { BusRouteSelection } from './BusRouteSelection'; | ||
|
||
interface BusDropdownProps { | ||
close?: ( | ||
focusableElement?: | ||
| HTMLElement | ||
| React.MouseEvent<HTMLElement, MouseEvent> | ||
| React.MutableRefObject<HTMLElement | null> | ||
| undefined | ||
) => void; | ||
} | ||
|
||
export const BusDropdown: React.FC<BusDropdownProps> = ({ close }) => { | ||
return ( | ||
<div className="rounded-b-md"> | ||
<BusRouteSelection /> | ||
<div | ||
className={ | ||
'flex flex-col gap-[2px] rounded-b-md border border-t-0 border-mbta-bus border-opacity-50 bg-neutral-800 px-1 py-[4px]' | ||
} | ||
role={'navigation'} | ||
> | ||
<SidebarTabs tabs={BUS_OVERVIEW} close={close} /> | ||
<hr className="h-[1px] w-3/4 self-center border-neutral-500" /> | ||
<SidebarTabs tabs={TRIP_PAGES} close={close} /> | ||
</div> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'; | ||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
import { Listbox, Transition } from '@headlessui/react'; | ||
import { ChevronUpDownIcon } from '@heroicons/react/20/solid'; | ||
import { useRouter } from 'next/navigation'; | ||
import React, { Fragment } from 'react'; | ||
import { getBusRoutes } from '../../constants/stations'; | ||
import { getBusRouteSelectionItemHref, useDelimitatedRoute } from '../../utils/router'; | ||
export const BusRouteSelection: React.FC = () => { | ||
const route = useDelimitatedRoute(); | ||
const router = useRouter(); | ||
const busRoutes = getBusRoutes(); | ||
const selected = route.query.busRoute; | ||
return ( | ||
<div className="bg-mbta-lightBus"> | ||
<Listbox | ||
value={selected} | ||
onChange={(key) => router.push(getBusRouteSelectionItemHref(key, route))} | ||
> | ||
<div className="relative text-white text-opacity-95"> | ||
<Listbox.Button className="relative w-full cursor-pointer border border-mbta-bus bg-tm-lightGrey py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"> | ||
<span className="block truncate ">{selected}</span> | ||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> | ||
<ChevronUpDownIcon className="h-5 w-5 " aria-hidden="true" /> | ||
</span> | ||
</Listbox.Button> | ||
<Transition | ||
as={Fragment} | ||
leave="transition ease-in duration-100" | ||
leaveFrom="opacity-100" | ||
leaveTo="opacity-0" | ||
> | ||
<Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"> | ||
{busRoutes.map((busRoute, personIdx) => ( | ||
<Listbox.Option | ||
key={personIdx} | ||
className={({ active }) => | ||
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${ | ||
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900' | ||
}` | ||
} | ||
value={busRoute} | ||
> | ||
{({ selected }) => ( | ||
<> | ||
<span | ||
className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`} | ||
> | ||
{busRoute} | ||
</span> | ||
{selected ? ( | ||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-mbta-bus"> | ||
<FontAwesomeIcon | ||
icon={faCheckCircle} | ||
className="h-5 w-5" | ||
aria-hidden="true" | ||
/> | ||
</span> | ||
) : null} | ||
</> | ||
)} | ||
</Listbox.Option> | ||
))} | ||
</Listbox.Options> | ||
</Transition> | ||
</div> | ||
</Listbox> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react'; | ||
import { useDelimitatedRoute } from '../../utils/router'; | ||
import { BusDropdown } from './BusDropdown'; | ||
import { MenuDropdown } from './MenuDropdown'; | ||
|
||
interface BusSectionProps { | ||
close?: ( | ||
focusableElement?: | ||
| HTMLElement | ||
| React.MouseEvent<HTMLElement, MouseEvent> | ||
| React.MutableRefObject<HTMLElement | null> | ||
| undefined | ||
) => void; | ||
} | ||
|
||
export const BusSection: React.FC<BusSectionProps> = ({ close }) => { | ||
const route = useDelimitatedRoute(); | ||
return ( | ||
<div className="w-full gap-y-2"> | ||
<MenuDropdown line="line-bus" route={route}> | ||
<BusDropdown close={close} /> | ||
</MenuDropdown> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { faTrainSubway, faTrainTram } from '@fortawesome/free-solid-svg-icons'; | ||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
import classNames from 'classnames'; | ||
import Link from 'next/link'; | ||
import React, { useEffect, useState } from 'react'; | ||
import { LINE_OBJECTS } from '../../constants/lines'; | ||
import { BUS_DEFAULTS } from '../../state/defaults/dateDefaults'; | ||
import { lineColorBackground } from '../../styles/general'; | ||
import type { Line } from '../../types/lines'; | ||
import type { Route } from '../../types/router'; | ||
import { getLineSelectionItemHref } from '../../utils/router'; | ||
|
||
interface MenuDropdownProps { | ||
line: Line; | ||
route: Route; | ||
children: React.ReactNode; | ||
} | ||
|
||
export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, children }) => { | ||
const selected = line === route.line; | ||
const [show, setShow] = useState<boolean>(false); | ||
|
||
// Need a timeout so that the selected and previously selected dropdowns do not render as opened simultaneously. | ||
useEffect(() => { | ||
setTimeout(() => setShow(true), 0); | ||
}, [selected]); | ||
return ( | ||
<div className={classNames('w-full')}> | ||
<Link | ||
href={ | ||
line === 'line-bus' | ||
? `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It would be nice to have some helper fns to generate these URLs |
||
: getLineSelectionItemHref(line, route) | ||
} | ||
> | ||
<div | ||
className={classNames( | ||
'flex w-full flex-row items-center gap-2 rounded-t-md py-1 text-sm ', | ||
`${lineColorBackground[line ?? 'DEFAULT']}`, | ||
selected | ||
? `bg-opacity-100 text-white text-opacity-95` | ||
: `bg-opacity-0 hover:rounded-md hover:bg-opacity-30` | ||
)} | ||
> | ||
<div | ||
className={classNames( | ||
lineColorBackground[line ?? 'DEFAULT'], | ||
'flex h-8 w-8 items-center justify-center rounded-full bg-opacity-75' | ||
)} | ||
> | ||
{/* TODO: add bus icon */} | ||
<FontAwesomeIcon icon={line === 'line-green' ? faTrainTram : faTrainSubway} size="lg" /> | ||
</div> | ||
{LINE_OBJECTS[line].name} | ||
</div> | ||
</Link> | ||
{selected && show && children} | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
|
||
interface NavSectionProps { | ||
title: string; | ||
content: React.ReactNode; | ||
} | ||
|
||
export const NavSection: React.FC<NavSectionProps> = ({ title, content }) => { | ||
return <div>{content}</div>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import React from 'react'; | ||
interface NavSectionHeaderProps { | ||
title: string; | ||
} | ||
|
||
export const NavSectionHeader: React.FC<NavSectionHeaderProps> = ({ title }) => { | ||
return <h3 className="text-xs italic text-stone-300">{title}</h3>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import classNames from 'classnames'; | ||
import React from 'react'; | ||
import { SidebarTabs } from '../../../modules/navigation/SidebarTabs'; | ||
import { OVERVIEW_PAGE, LINE_PAGES, TRIP_PAGES } from '../../constants/pages'; | ||
import { lineColorBorder } from '../../styles/general'; | ||
import type { Line } from '../../types/lines'; | ||
|
||
interface SubwayDropdownProps { | ||
line: Line; | ||
close?: ( | ||
focusableElement?: | ||
| HTMLElement | ||
| React.MouseEvent<HTMLElement, MouseEvent> | ||
| React.MutableRefObject<HTMLElement | null> | ||
| undefined | ||
) => void; | ||
} | ||
|
||
export const SubwayDropdown: React.FC<SubwayDropdownProps> = ({ line, close }) => { | ||
return ( | ||
<div | ||
className={classNames( | ||
'flex flex-col gap-[2px] rounded-b-md border border-opacity-50 bg-neutral-800 px-1 py-[4px]', | ||
lineColorBorder[line ?? 'DEFAULT'] | ||
)} | ||
role={'navigation'} | ||
> | ||
<SidebarTabs tabs={OVERVIEW_PAGE} close={close} /> | ||
<hr className="h-[1px] w-3/4 self-center border-neutral-500" /> | ||
<SidebarTabs tabs={LINE_PAGES} close={close} /> | ||
<hr className="h-[1px] w-3/4 self-center border-neutral-500" /> | ||
<SidebarTabs tabs={TRIP_PAGES} close={close} /> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
import { useDelimitatedRoute } from '../../utils/router'; | ||
import { MenuDropdown } from './MenuDropdown'; | ||
import { SubwayDropdown } from './SubwayDropdown'; | ||
|
||
interface SubwaySectionProps { | ||
close?: ( | ||
focusableElement?: | ||
| HTMLElement | ||
| React.MouseEvent<HTMLElement, MouseEvent> | ||
| React.MutableRefObject<HTMLElement | null> | ||
| undefined | ||
) => void; | ||
} | ||
|
||
export const SubwaySection: React.FC<SubwaySectionProps> = ({ close }) => { | ||
const route = useDelimitatedRoute(); | ||
|
||
return ( | ||
<div className="w-full gap-y-2"> | ||
<MenuDropdown line="line-red" route={route}> | ||
<SubwayDropdown line="line-red" close={close} /> | ||
</MenuDropdown> | ||
<MenuDropdown line="line-orange" route={route}> | ||
<SubwayDropdown line="line-orange" close={close} /> | ||
</MenuDropdown> | ||
<MenuDropdown line="line-blue" route={route}> | ||
<SubwayDropdown line="line-blue" close={close} /> | ||
</MenuDropdown> | ||
<MenuDropdown line="line-green" route={route}> | ||
<SubwayDropdown line="line-green" close={close} /> | ||
</MenuDropdown> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I couldn't get prettier to work until I changed this. Is this a bad idea? @devinmatte
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm did a new update break
.js
prettierrcs?