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 (
|
||||
<Col
|
||||
className={clsx('bg-base-200 sticky top-0 z-20 gap-3 pb-3', className)}
|
||||
>
|
||||
<Col className={clsx('bg-base-200 top-0 z-20 gap-3 pb-3', className)}>
|
||||
<Row className="gap-1 sm:gap-2">
|
||||
<input
|
||||
type="text"
|
||||
|
|
|
@ -108,6 +108,7 @@ export function CreatorContractsList(props: {
|
|||
|
||||
return (
|
||||
<ContractSearch
|
||||
headerClassName="sticky"
|
||||
user={user}
|
||||
defaultSort="newest"
|
||||
defaultFilter="all"
|
||||
|
|
|
@ -90,7 +90,7 @@ export function MarketModal(props: {
|
|||
'!bg-indigo-100 outline outline-2 outline-indigo-300',
|
||||
}}
|
||||
additionalFilter={{}} /* hide pills */
|
||||
headerClassName="bg-white"
|
||||
headerClassName="bg-white sticky"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { BookOpenIcon, HomeIcon } from '@heroicons/react/outline'
|
||||
import { ClipboardIcon, HomeIcon } from '@heroicons/react/outline'
|
||||
import { Item } from './sidebar'
|
||||
|
||||
import clsx from 'clsx'
|
||||
|
@ -10,7 +10,7 @@ import router from 'next/router'
|
|||
import { userProfileItem } from './nav-bar'
|
||||
|
||||
const mobileGroupNavigation = [
|
||||
{ name: 'About', key: 'about', icon: BookOpenIcon },
|
||||
{ name: 'About', key: 'about', icon: ClipboardIcon },
|
||||
{ name: 'Markets', key: 'markets', icon: HomeIcon },
|
||||
{ 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 { useUser } from 'web/hooks/use-user'
|
||||
import { ManifoldLogo } from './manifold-logo'
|
||||
|
@ -11,10 +11,12 @@ import NotificationsIcon from '../notifications-icon'
|
|||
import { SidebarItem } from './sidebar'
|
||||
import { buildArray } from 'common/util/array'
|
||||
import { User } from 'common/user'
|
||||
import { Row } from '../layout/row'
|
||||
import { Col } from '../layout/col'
|
||||
|
||||
const groupNavigation = [
|
||||
{ name: 'About', key: 'about', icon: BookOpenIcon },
|
||||
{ name: 'Markets', key: 'markets', icon: HomeIcon },
|
||||
{ name: 'About', key: 'about', icon: ClipboardIcon },
|
||||
{ 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
|
||||
className?: string
|
||||
onClick: (key: string) => void
|
||||
|
@ -45,6 +47,16 @@ export default function GroupSidebar(props: {
|
|||
className={clsx('flex max-h-[100vh] flex-col', className)}
|
||||
>
|
||||
<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 ">
|
||||
{user ? (
|
||||
|
@ -54,15 +66,7 @@ export default function GroupSidebar(props: {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className={' text-2xl text-indigo-700 sm:mb-1 sm:mt-3'}>
|
||||
{groupName}
|
||||
</div>
|
||||
|
||||
{/* Desktop navigation */}
|
||||
<div className="relative hidden min-h-0 shrink flex-col items-stretch gap-1 pl-6 pb-0 lg:flex">
|
||||
{/* adds a purple CornerDownRightIcon pointing to the sidebaritems */}
|
||||
<CornerDownRightIcon className="absolute left-0 top-0 mt-2 h-6 w-6 text-indigo-700" />
|
||||
|
||||
{groupNavigation.map((item) => (
|
||||
<SidebarItem
|
||||
key={item.key}
|
||||
|
@ -71,7 +75,6 @@ export default function GroupSidebar(props: {
|
|||
onClick={props.onClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{generalNavigation(user).map((item) => (
|
||||
<SidebarItem
|
||||
key={item.key}
|
||||
|
|
|
@ -120,6 +120,7 @@ function SearchSection(props: {
|
|||
}
|
||||
noControls
|
||||
maxResults={6}
|
||||
headerClassName="sticky"
|
||||
persistPrefix={`experimental-home-${sort}`}
|
||||
/>
|
||||
</Col>
|
||||
|
@ -147,6 +148,7 @@ function GroupSection(props: {
|
|||
additionalFilter={{ groupSlug: group.slug }}
|
||||
noControls
|
||||
maxResults={6}
|
||||
headerClassName="sticky"
|
||||
persistPrefix={`experimental-home-${group.slug}`}
|
||||
/>
|
||||
</Col>
|
||||
|
|
|
@ -49,9 +49,9 @@ import { Spacer } from 'web/components/layout/spacer'
|
|||
import { usePost } from 'web/hooks/use-post'
|
||||
import { useAdmin } from 'web/hooks/use-admin'
|
||||
import { track } from '@amplitude/analytics-browser'
|
||||
import GroupSidebar from 'web/components/nav/group-sidebar'
|
||||
import { GroupNavBar } from 'web/components/nav/group-nav-bar'
|
||||
import { ArrowLeftIcon } from '@heroicons/react/solid'
|
||||
import { GroupSidebar } from 'web/components/nav/group-sidebar'
|
||||
|
||||
export const getStaticProps = fromPropz(getStaticPropz)
|
||||
export async function getStaticPropz(props: { params: { slugs: string[] } }) {
|
||||
|
@ -207,6 +207,7 @@ export default function GroupPage(props: {
|
|||
</div>
|
||||
</div>
|
||||
<ContractSearch
|
||||
headerClassName="md:sticky"
|
||||
user={user}
|
||||
defaultSort={'newest'}
|
||||
defaultFilter={suggestedFilter}
|
||||
|
@ -254,22 +255,7 @@ export default function GroupPage(props: {
|
|||
|
||||
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">
|
||||
{group.name}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<TopGroupNavBar group={group} />
|
||||
<div>
|
||||
<div
|
||||
className={
|
||||
|
@ -290,7 +276,9 @@ export default function GroupPage(props: {
|
|||
description={`Created by ${creator.name}. ${group.about}`}
|
||||
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>
|
||||
<GroupNavBar
|
||||
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: {
|
||||
group: Group
|
||||
user: User | null | undefined
|
||||
|
@ -530,6 +539,7 @@ function AddContractButton(props: { group: Group; user: User }) {
|
|||
<div className={'overflow-y-scroll sm:px-8'}>
|
||||
<ContractSearch
|
||||
user={user}
|
||||
headerClassName="md:sticky"
|
||||
hideOrderSelector={true}
|
||||
onContractClick={addContractToCurrentGroup}
|
||||
cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
|
||||
|
|
|
@ -26,6 +26,7 @@ const Home = () => {
|
|||
user={user}
|
||||
persistPrefix="home-search"
|
||||
useQueryUrlParam={true}
|
||||
headerClassName="sticky"
|
||||
/>
|
||||
</Col>
|
||||
<button
|
||||
|
|
Loading…
Reference in New Issue
Block a user