open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Shrink avatar, paddding, gaps for mobile screens (#275)

Browse Source 
* Shrink avatar, paddding, gaps for mobile screens

* Adjust padding, add arrow to input area

* Padding and reply ui adjustments
This commit is contained in:
Ian Philips 2022-05-23 16:09:40 -06:00 committed by GitHub
parent 854daaebb7
commit fc320ca1e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
web/components/feed/feed-comments.tsx
View File

@ -23,6 +23,7 @@ import { BetStatusText } from 'web/components/feed/feed-bets'
import { Col } from 'web/components/layout/col' import { Col } from 'web/components/layout/col'
import { getProbability } from 'common/calculate' import { getProbability } from 'common/calculate'
import { LoadingIndicator } from 'web/components/loading-indicator' import { LoadingIndicator } from 'web/components/loading-indicator'
import { PaperAirplaneIcon } from '@heroicons/react/outline'
export function FeedCommentThread(props: { export function FeedCommentThread(props: {
contract: Contract contract: Contract
@ -53,13 +54,20 @@ export function FeedCommentThread(props: {
if (showReply && inputRef) inputRef.focus() if (showReply && inputRef) inputRef.focus()
}, [inputRef, showReply]) }, [inputRef, showReply])
return ( return (
<div className={'w-full flex-col flex-col pr-6'}> <div className={'flex-col pr-1'}>
{commentsList.map((comment, commentIdx) => ( {commentsList.map((comment, commentIdx) => (
<div <div
key={comment.id} key={comment.id}
id={comment.id} id={comment.id}
className={commentIdx === 0 ? '' : 'mt-4 ml-8'} className={clsx('relative', commentIdx === 0 ? '' : 'mt-3 ml-6')}
> >
{/*draw a gray line from the comment to the left:*/}
{commentIdx != 0 && (
<span
className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
aria-hidden="true"
/>
)}
<FeedComment <FeedComment
contract={contract} contract={contract}
comment={comment} comment={comment}
@ -80,7 +88,11 @@ export function FeedCommentThread(props: {
</div> </div>
))} ))}
{showReply && ( {showReply && (
<div className={'ml-8 w-full pt-6'}> <div className={'-pb-2 ml-6 flex flex-col pt-5'}>
<span
className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
aria-hidden="true"
/>
<CommentInput <CommentInput
contract={contract} contract={contract}
betsByCurrentUser={(user && betsByUserId[user.id]) ?? []} betsByCurrentUser={(user && betsByUserId[user.id]) ?? []}
@ -111,7 +123,6 @@ export function FeedComment(props: {
betsBySameUser, betsBySameUser,
probAtCreatedTime, probAtCreatedTime,
truncate, truncate,
smallAvatar,
onReplyClick, onReplyClick,
} = props } = props
const { text, userUsername, userName, userAvatarUrl, createdTime } = comment const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
@ -144,18 +155,18 @@ export function FeedComment(props: {
return ( return (
<Row <Row
className={clsx( className={clsx(
'flex space-x-3 transition-all duration-1000', 'flex space-x-1.5 transition-all duration-1000 sm:space-x-3',
highlighted ? `-m-2 rounded bg-indigo-500/[0.2] p-2` : '' highlighted ? `-m-2 rounded bg-indigo-500/[0.2] p-2` : ''
)} )}
> >
<Avatar <Avatar
className={clsx(smallAvatar && 'ml-1')} className={'ml-1'}
size={smallAvatar ? 'sm' : undefined} size={'sm'}
username={userUsername} username={userUsername}
avatarUrl={userAvatarUrl} avatarUrl={userAvatarUrl}
/> />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="mt-0.5 text-sm text-gray-500"> <p className="mt-0.5 pl-0.5 text-sm text-gray-500">
<UserLink <UserLink
className="text-gray-500" className="text-gray-500"
username={userUsername} username={userUsername}
@ -321,12 +332,17 @@ export function CommentInput(props: {
return ( return (
<> <>
<Row className={'mb-2 flex w-full gap-2'}> <Row className={'mb-2 gap-1 sm:gap-2'}>
<div className={'mt-1'}> <div className={''}>
<Avatar avatarUrl={user?.avatarUrl} username={user?.username} /> <Avatar
avatarUrl={user?.avatarUrl}
username={user?.username}
size={'sm'}
className={'ml-1'}
/>
</div> </div>
<div className={'min-w-0 flex-1'}> <div className={'min-w-0 flex-1'}>
<div className="text-sm text-gray-500"> <div className="pl-0.5 text-sm text-gray-500">
<div className={'mb-1'}> <div className={'mb-1'}>
{mostRecentCommentableBet && ( {mostRecentCommentableBet && (
<BetStatusText <BetStatusText
@ -358,7 +374,12 @@ export function CommentInput(props: {
</div> </div>
<Row className="grid grid-cols-8 gap-1.5 text-gray-700"> <Row className="grid grid-cols-8 gap-1.5 text-gray-700">
<Col className={'col-span-8 sm:col-span-6'}> <Col
className={clsx(
'col-span-8 sm:col-span-6',
!user && 'col-span-8'
)}
>
<Textarea <Textarea
ref={setRef} ref={setRef}
value={comment} value={comment}
@ -386,13 +407,13 @@ export function CommentInput(props: {
}} }}
/> />
</Col> </Col>
<Col {!user && (
className={clsx( <Col
'col-span-8 sm:col-span-2', className={clsx(
focused ? 'justify-end' : 'justify-center' 'col-span-8 sm:col-span-2',
)} focused ? 'justify-end' : 'justify-center'
> )}
{!user && ( >
<button <button
className={ className={
'btn btn-outline btn-sm text-transform: capitalize' 'btn btn-outline btn-sm text-transform: capitalize'
@ -401,14 +422,25 @@ export function CommentInput(props: {
> >
Sign in to Comment Sign in to Comment
</button> </button>
</Col>
)}
<Col
className={clsx(
'col-span-1 sm:col-span-2',
focused ? 'justify-end' : 'justify-center'
)} )}
>
{user && !isSubmitting && ( {user && !isSubmitting && (
<button <button
className={clsx( className={clsx(
'btn text-transform: col-span-8 block capitalize sm:col-span-2', 'btn btn-ghost btn-sm block flex flex-row capitalize',
'absolute bottom-4 right-1 col-span-1',
parentComment ? ' bottom-6 right-2.5' : '',
'sm:relative sm:bottom-0 sm:right-0 sm:col-span-2',
focused && comment focused && comment
? 'btn-outline btn-sm ' ? 'sm:btn-outline'
: 'btn-ghost btn-sm pointer-events-none text-gray-500' : 'pointer-events-none text-gray-500'
)} )}
onClick={() => { onClick={() => {
if (!focused) return if (!focused) return
@ -417,7 +449,15 @@ export function CommentInput(props: {
} }
}} }}
> >
{parentComment || answerOutcome ? 'Reply' : 'Comment'} <span className={'hidden sm:block'}>
{parentComment || answerOutcome ? 'Reply' : 'Comment'}
</span>
{focused && (
<PaperAirplaneIcon
className={'m-0 min-w-[22px] rotate-90 p-0 sm:hidden'}
height={25}
/>
)}
</button> </button>
)} )}
{isSubmitting && ( {isSubmitting && (

8
web/components/feed/feed-items.tsx
View File

@ -54,7 +54,7 @@ export function FeedItems(props: {
<div className={clsx('flow-root', className)} ref={setElem}> <div className={clsx('flow-root', className)} ref={setElem}>
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}> <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
{items.map((item, activityItemIdx) => ( {items.map((item, activityItemIdx) => (
<div key={item.id} className={'relative pb-6'}> <div key={item.id} className={'relative pb-4'}>
{activityItemIdx !== items.length - 1 || {activityItemIdx !== items.length - 1 ||
item.type === 'answergroup' ? ( item.type === 'answergroup' ? (
<span <span
@ -62,7 +62,7 @@ export function FeedItems(props: {
aria-hidden="true" aria-hidden="true"
/> />
) : null} ) : null}
<div className="relative flex items-start space-x-3"> <div className="relative flex-col items-start space-x-3">
<FeedItem item={item} /> <FeedItem item={item} />
</div> </div>
</div> </div>
@ -121,7 +121,7 @@ export function FeedQuestion(props: {
const isNew = createdTime > Date.now() - DAY_MS const isNew = createdTime > Date.now() - DAY_MS
return ( return (
<> <div className={'flex gap-2'}>
<Avatar <Avatar
username={contract.creatorUsername} username={contract.creatorUsername}
avatarUrl={contract.creatorAvatarUrl} avatarUrl={contract.creatorAvatarUrl}
@ -170,7 +170,7 @@ export function FeedQuestion(props: {
/> />
)} )}
</div> </div>
</> </div>
) )
} }

2
web/pages/[username]/[contractSlug].tsx
View File

@ -185,7 +185,7 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
/> />
)} )}
<Col className="w-full justify-between rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8"> <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white py-6 pl-1 pr-2 sm:px-2 md:px-6 md:py-8">
{backToHome && ( {backToHome && (
<button <button
className="btn btn-sm mb-4 items-center gap-2 self-start border-0 border-gray-700 bg-white normal-case text-gray-700 hover:bg-white hover:text-gray-700 lg:hidden" className="btn btn-sm mb-4 items-center gap-2 self-start border-0 border-gray-700 bg-white normal-case text-gray-700 hover:bg-white hover:text-gray-700 lg:hidden"