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:
parent
e8ae9a7394
commit
7d0836b17b
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 },
|
||||||
]
|
]
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue
Block a user