Address all feedback

Fix icon names
Extract navbar component into a separate function
Rm arrow and indentation
Move group name under logo
Fix visual sidebar stretchy thing
Fix visual bug
This commit is contained in:
Pico2x 2022-09-15 16:48:12 +01:00
parent e8ae9a7394
commit 7d0836b17b
8 changed files with 59 additions and 44 deletions

View File

@ -387,9 +387,7 @@ function ContractSearchControls(props: {
} }
return ( return (
<Col <Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
className={clsx('bg-base-200 sticky top-0 z-20 gap-3 pb-3', className)}
>
<Row className="gap-1 sm:gap-2"> <Row className="gap-1 sm:gap-2">
<input <input
type="text" type="text"

View File

@ -108,6 +108,7 @@ export function CreatorContractsList(props: {
return ( return (
<ContractSearch <ContractSearch
headerClassName="sticky"
user={user} user={user}
defaultSort="newest" defaultSort="newest"
defaultFilter="all" defaultFilter="all"

View File

@ -90,7 +90,7 @@ export function MarketModal(props: {
'!bg-indigo-100 outline outline-2 outline-indigo-300', '!bg-indigo-100 outline outline-2 outline-indigo-300',
}} }}
additionalFilter={{}} /* hide pills */ additionalFilter={{}} /* hide pills */
headerClassName="bg-white" headerClassName="bg-white sticky"
/> />
</div> </div>
</Col> </Col>

View File

@ -1,4 +1,4 @@
import { BookOpenIcon, HomeIcon } from '@heroicons/react/outline' import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
import { Item } from './sidebar' import { Item } from './sidebar'
import clsx from 'clsx' import clsx from 'clsx'
@ -10,7 +10,7 @@ import router from 'next/router'
import { userProfileItem } from './nav-bar' import { userProfileItem } from './nav-bar'
const mobileGroupNavigation = [ const mobileGroupNavigation = [
{ name: 'About', key: 'about', icon: BookOpenIcon }, { name: 'About', key: 'about', icon: ClipboardIcon },
{ name: 'Markets', key: 'markets', icon: HomeIcon }, { name: 'Markets', key: 'markets', icon: HomeIcon },
{ name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon }, { name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
] ]

View File

@ -1,4 +1,4 @@
import { HomeIcon, BookOpenIcon } from '@heroicons/react/outline' import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
import clsx from 'clsx' import clsx from 'clsx'
import { useUser } from 'web/hooks/use-user' import { useUser } from 'web/hooks/use-user'
import { ManifoldLogo } from './manifold-logo' import { ManifoldLogo } from './manifold-logo'
@ -11,10 +11,12 @@ import NotificationsIcon from '../notifications-icon'
import { SidebarItem } from './sidebar' import { SidebarItem } from './sidebar'
import { buildArray } from 'common/util/array' import { buildArray } from 'common/util/array'
import { User } from 'common/user' import { User } from 'common/user'
import { Row } from '../layout/row'
import { Col } from '../layout/col'
const groupNavigation = [ const groupNavigation = [
{ name: 'About', key: 'about', icon: BookOpenIcon },
{ name: 'Markets', key: 'markets', icon: HomeIcon }, { name: 'Markets', key: 'markets', icon: HomeIcon },
{ name: 'About', key: 'about', icon: ClipboardIcon },
{ name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon }, { name: 'Leaderboard', key: 'leaderboards', icon: TrophyIcon },
] ]
@ -28,7 +30,7 @@ const generalNavigation = (user?: User | null) =>
} }
) )
export default function GroupSidebar(props: { export function GroupSidebar(props: {
groupName: string groupName: string
className?: string className?: string
onClick: (key: string) => void onClick: (key: string) => void
@ -45,6 +47,16 @@ export default function GroupSidebar(props: {
className={clsx('flex max-h-[100vh] flex-col', className)} className={clsx('flex max-h-[100vh] flex-col', className)}
> >
<ManifoldLogo className="pt-6" twoLine /> <ManifoldLogo className="pt-6" twoLine />
<Row className="pl-2">
<Col className="flex justify-center">
<CornerDownRightIcon className=" h-6 w-6 text-indigo-700" />
</Col>
<Col>
<div className={' text-2xl text-indigo-700 sm:mb-1 sm:mt-3'}>
{groupName}
</div>
</Col>
</Row>
<div className=" min-h-0 shrink flex-col items-stretch gap-1 pt-6 lg:flex "> <div className=" min-h-0 shrink flex-col items-stretch gap-1 pt-6 lg:flex ">
{user ? ( {user ? (
@ -54,24 +66,15 @@ export default function GroupSidebar(props: {
)} )}
</div> </div>
<div className={' text-2xl text-indigo-700 sm:mb-1 sm:mt-3'}>
{groupName}
</div>
{/* Desktop navigation */} {/* Desktop navigation */}
<div className="relative hidden min-h-0 shrink flex-col items-stretch gap-1 pl-6 pb-0 lg:flex"> {groupNavigation.map((item) => (
{/* adds a purple CornerDownRightIcon pointing to the sidebaritems */} <SidebarItem
<CornerDownRightIcon className="absolute left-0 top-0 mt-2 h-6 w-6 text-indigo-700" /> key={item.key}
item={item}
{groupNavigation.map((item) => ( currentPage={currentKey}
<SidebarItem onClick={props.onClick}
key={item.key} />
item={item} ))}
currentPage={currentKey}
onClick={props.onClick}
/>
))}
</div>
{generalNavigation(user).map((item) => ( {generalNavigation(user).map((item) => (
<SidebarItem <SidebarItem
key={item.key} key={item.key}

View File

@ -120,6 +120,7 @@ function SearchSection(props: {
} }
noControls noControls
maxResults={6} maxResults={6}
headerClassName="sticky"
persistPrefix={`experimental-home-${sort}`} persistPrefix={`experimental-home-${sort}`}
/> />
</Col> </Col>
@ -147,6 +148,7 @@ function GroupSection(props: {
additionalFilter={{ groupSlug: group.slug }} additionalFilter={{ groupSlug: group.slug }}
noControls noControls
maxResults={6} maxResults={6}
headerClassName="sticky"
persistPrefix={`experimental-home-${group.slug}`} persistPrefix={`experimental-home-${group.slug}`}
/> />
</Col> </Col>

View File

@ -49,9 +49,9 @@ import { Spacer } from 'web/components/layout/spacer'
import { usePost } from 'web/hooks/use-post' import { usePost } from 'web/hooks/use-post'
import { useAdmin } from 'web/hooks/use-admin' import { useAdmin } from 'web/hooks/use-admin'
import { track } from '@amplitude/analytics-browser' import { track } from '@amplitude/analytics-browser'
import GroupSidebar from 'web/components/nav/group-sidebar'
import { GroupNavBar } from 'web/components/nav/group-nav-bar' import { GroupNavBar } from 'web/components/nav/group-nav-bar'
import { ArrowLeftIcon } from '@heroicons/react/solid' import { ArrowLeftIcon } from '@heroicons/react/solid'
import { GroupSidebar } from 'web/components/nav/group-sidebar'
export const getStaticProps = fromPropz(getStaticPropz) export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: { params: { slugs: string[] } }) { export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@ -207,6 +207,7 @@ export default function GroupPage(props: {
</div> </div>
</div> </div>
<ContractSearch <ContractSearch
headerClassName="md:sticky"
user={user} user={user}
defaultSort={'newest'} defaultSort={'newest'}
defaultFilter={suggestedFilter} defaultFilter={suggestedFilter}
@ -254,22 +255,7 @@ export default function GroupPage(props: {
return ( return (
<> <>
<header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12"> <TopGroupNavBar group={group} />
<div className="flex items-center border-b border-gray-200 bg-white px-4">
<div className="flex-shrink-0">
<Link href="/">
<a className="text-indigo-700 hover:text-gray-500 ">
<ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
</a>
</Link>
</div>
<div className="ml-3">
<h1 className="text-lg font-medium text-indigo-700">
{group.name}
</h1>
</div>
</div>
</header>
<div> <div>
<div <div
className={ className={
@ -290,7 +276,9 @@ export default function GroupPage(props: {
description={`Created by ${creator.name}. ${group.about}`} description={`Created by ${creator.name}. ${group.about}`}
url={groupPath(group.slug)} url={groupPath(group.slug)}
/> />
<main className={'px-2 pt-1 xl:col-span-8'}>{pageContent}</main> <main className={'px-2 pt-1 lg:col-span-8 lg:pt-6 xl:col-span-8'}>
{pageContent}
</main>
</div> </div>
<GroupNavBar <GroupNavBar
currentPage={sidebarPages[sidebarIndex].key} currentPage={sidebarPages[sidebarIndex].key}
@ -301,6 +289,27 @@ export default function GroupPage(props: {
) )
} }
export function TopGroupNavBar(props: { group: Group }) {
return (
<header className="sticky top-0 z-50 w-full pb-2 md:hidden lg:col-span-12">
<div className="flex items-center border-b border-gray-200 bg-white px-4">
<div className="flex-shrink-0">
<Link href="/">
<a className="text-indigo-700 hover:text-gray-500 ">
<ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
</a>
</Link>
</div>
<div className="ml-3">
<h1 className="text-lg font-medium text-indigo-700">
{props.group.name}
</h1>
</div>
</div>
</header>
)
}
function JoinOrAddQuestionsButtons(props: { function JoinOrAddQuestionsButtons(props: {
group: Group group: Group
user: User | null | undefined user: User | null | undefined
@ -530,6 +539,7 @@ function AddContractButton(props: { group: Group; user: User }) {
<div className={'overflow-y-scroll sm:px-8'}> <div className={'overflow-y-scroll sm:px-8'}>
<ContractSearch <ContractSearch
user={user} user={user}
headerClassName="md:sticky"
hideOrderSelector={true} hideOrderSelector={true}
onContractClick={addContractToCurrentGroup} onContractClick={addContractToCurrentGroup}
cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }} cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}

View File

@ -26,6 +26,7 @@ const Home = () => {
user={user} user={user}
persistPrefix="home-search" persistPrefix="home-search"
useQueryUrlParam={true} useQueryUrlParam={true}
headerClassName="sticky"
/> />
</Col> </Col>
<button <button