Groups UX on mobile

This commit is contained in:
Ian Philips 2022-07-07 06:53:14 -06:00
parent a23c744c3e
commit 93b2900015
4 changed files with 46 additions and 14 deletions

View File

@ -2,6 +2,8 @@ import Link from 'next/link'
import clsx from 'clsx' import clsx from 'clsx'
import { firebaseLogin, User } from 'web/lib/firebase/users' import { firebaseLogin, User } from 'web/lib/firebase/users'
import React from 'react' import React from 'react'
import { PlusIcon } from '@heroicons/react/outline'
import { Row } from 'web/components/layout/row'
export const createButtonStyle = export const createButtonStyle =
'border-w-0 mx-auto mt-4 -ml-1 w-full rounded-md bg-gradient-to-r py-2.5 text-base font-semibold text-white shadow-sm lg:-ml-0 h-11' 'border-w-0 mx-auto mt-4 -ml-1 w-full rounded-md bg-gradient-to-r py-2.5 text-base font-semibold text-white shadow-sm lg:-ml-0 h-11'

View File

@ -97,7 +97,7 @@ export function GroupChat(props: {
} }
return ( return (
<Col className={'flex-1'}> <Col className={'mt-2 flex-1'}>
<Col <Col
className={ className={
'max-h-[65vh] w-full space-y-2 overflow-x-hidden overflow-y-scroll' 'max-h-[65vh] w-full space-y-2 overflow-x-hidden overflow-y-scroll'

View File

@ -16,14 +16,15 @@ export function Tabs(props: {
defaultIndex?: number defaultIndex?: number
labelClassName?: string labelClassName?: string
onClick?: (tabTitle: string, index: number) => void onClick?: (tabTitle: string, index: number) => void
className?: string
}) { }) {
const { tabs, defaultIndex, labelClassName, onClick } = props const { tabs, defaultIndex, labelClassName, onClick, className } = props
const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0) const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
return ( return (
<> <>
<div className="mb-4 border-b border-gray-200"> <div className={clsx('mb-4 border-b border-gray-200', className)}>
<nav className="-mb-px flex space-x-8" aria-label="Tabs"> <nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab, i) => ( {tabs.map((tab, i) => (
<Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}> <Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}>

View File

@ -53,7 +53,7 @@ import { SiteLink } from 'web/components/site-link'
import { ContractSearch } from 'web/components/contract-search' import { ContractSearch } from 'web/components/contract-search'
import clsx from 'clsx' import clsx from 'clsx'
import { FollowList } from 'web/components/follow-list' import { FollowList } from 'web/components/follow-list'
import { SearchIcon } from '@heroicons/react/outline' import { PlusIcon, SearchIcon } from '@heroicons/react/outline'
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[] } }) {
@ -223,9 +223,17 @@ export default function GroupPage(props: {
<Col className="px-3 lg:px-1"> <Col className="px-3 lg:px-1">
<Row className={'items-center justify-between gap-4'}> <Row className={'items-center justify-between gap-4'}>
<div className={'mb-1'}> <div className={'sm:mb-1'}>
<Title className={'line-clamp-2'} text={group.name} /> <div
<Linkify text={group.about} /> className={
'line-clamp-1 my-1 text-lg text-indigo-700 sm:my-3 sm:text-2xl'
}
>
{group.name}
</div>
<div className={'hidden sm:block'}>
<Linkify text={group.about} />
</div>
</div> </div>
<div className="hidden sm:block xl:hidden"> <div className="hidden sm:block xl:hidden">
<JoinOrCreateButton <JoinOrCreateButton
@ -241,6 +249,7 @@ export default function GroupPage(props: {
</Col> </Col>
<Tabs <Tabs
className={'mb-0 sm:mb-2'}
defaultIndex={ defaultIndex={
page === 'rankings' page === 'rankings'
? 2 ? 2
@ -320,11 +329,19 @@ function JoinOrCreateButton(props: {
}) { }) {
const { group, user, isMember } = props const { group, user, isMember } = props
return user && isMember ? ( return user && isMember ? (
<Row className={'justify-between sm:flex-col sm:justify-center'}> <Row
className={'-mt-2 justify-between sm:mt-0 sm:flex-col sm:justify-center'}
>
<CreateQuestionButton <CreateQuestionButton
user={user} user={user}
overrideText={'Add a new question'} overrideText={'Add a new question'}
className={'w-48 flex-shrink-0'} className={'hidden w-48 flex-shrink-0 sm:block'}
query={`?groupId=${group.id}`}
/>
<CreateQuestionButton
user={user}
overrideText={'New question'}
className={'block w-40 flex-shrink-0 sm:hidden'}
query={`?groupId=${group.id}`} query={`?groupId=${group.id}`}
/> />
<AddContractButton group={group} user={user} /> <AddContractButton group={group} user={user} />
@ -357,8 +374,8 @@ function GroupOverview(props: {
} }
return ( return (
<Col> <>
<Col className="gap-2 rounded-b bg-white p-4"> <Col className="gap-2 rounded-b bg-white p-2">
<Row className={'flex-wrap justify-between'}> <Row className={'flex-wrap justify-between'}>
<div className={'inline-flex items-center'}> <div className={'inline-flex items-center'}>
<div className="mr-1 text-gray-500">Created by</div> <div className="mr-1 text-gray-500">Created by</div>
@ -370,6 +387,9 @@ function GroupOverview(props: {
</div> </div>
{isCreator && <EditGroupButton className={'ml-1'} group={group} />} {isCreator && <EditGroupButton className={'ml-1'} group={group} />}
</Row> </Row>
<div className={'block sm:hidden'}>
<Linkify text={group.about} />
</div>
<Row className={'items-center gap-1'}> <Row className={'items-center gap-1'}>
<span className={'text-gray-500'}>Membership</span> <span className={'text-gray-500'}>Membership</span>
{user && user.id === creator.id ? ( {user && user.id === creator.id ? (
@ -406,7 +426,7 @@ function GroupOverview(props: {
<GroupMemberSearch group={group} /> <GroupMemberSearch group={group} />
</Col> </Col>
</Col> </Col>
</Col> </>
) )
} }
@ -588,16 +608,25 @@ function AddContractButton(props: { group: Group; user: User }) {
</div> </div>
</Col> </Col>
</Modal> </Modal>
<div className={'flex w-48 justify-center'}> <div className={'flex justify-center'}>
<button <button
className={clsx( className={clsx(
createButtonStyle, createButtonStyle,
'w-48 whitespace-nowrap border border-black text-black hover:bg-black hover:text-white' 'hidden w-48 whitespace-nowrap border border-black text-black hover:bg-black hover:text-white sm:block'
)} )}
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
> >
Add an old question Add an old question
</button> </button>
<button
className={clsx(
createButtonStyle,
'block w-40 whitespace-nowrap border border-black text-black hover:bg-black hover:text-white sm:hidden'
)}
onClick={() => setOpen(true)}
>
Old question
</button>
</div> </div>
</> </>
) )