ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

many small design enhancements

Browse Source
This commit is contained in:
keyan 2021-11-12 16:39:52 -06:00
parent 8e7dc9c7c3
commit dd97710d71
19 changed files with 78 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/comment.module.css
View File

@ -75,6 +75,10 @@
background-color: var(--theme-commentBg); background-color: var(--theme-commentBg);
} }
.hunk {
margin-bottom: 0;
}
.comment:not(:last-child) { .comment:not(:last-child) {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;

2
components/comments-flat.js
View File

@ -23,7 +23,7 @@ export default function CommentsFlat ({ variables, comments, cursor, ...props })
{comments.map(item => ( {comments.map(item => (
<div <div
key={item.id} key={item.id}
className='clickToContext' className='clickToContext py-2'
onClick={() => { onClick={() => {
router.push({ router.push({
pathname: '/items/[id]', pathname: '/items/[id]',

2
components/discussion-form.js
View File

@ -81,7 +81,7 @@ export function DiscussionForm ({
label={<>{textLabel} <small className='text-muted ml-2'>optional</small></>} label={<>{textLabel} <small className='text-muted ml-2'>optional</small></>}
name='text' name='text'
as={TextareaAutosize} as={TextareaAutosize}
minRows={4} minRows={6}
hint={editThreshold hint={editThreshold
? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div> ? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div>
: null} : null}

2
components/footer.js
View File

@ -95,7 +95,7 @@ export default function Footer ({ noLinks }) {
</div>} </div>}
{data && {data &&
<div <div
className={`text-small mx-auto mb-2 ${styles.connect}`} className={`text-small mx-auto mb-1 ${styles.connect}`}
> >
<span className='nav-item text-muted mr-2'>connect:</span> <span className='nav-item text-muted mr-2'>connect:</span>
<CopyInput <CopyInput

16
components/header.js
View File

@ -12,8 +12,18 @@ import { useLightning } from './lightning'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { randInRange } from '../lib/rand' import { randInRange } from '../lib/rand'
const formatSats = n => {
if (n < 1e3) return n
if (n >= 1e3 && n < 1e6) return +(n / 1e3).toFixed(1) + 'k'
if (n >= 1e6 && n < 1e9) return +(n / 1e6).toFixed(1) + 'm'
if (n >= 1e9 && n < 1e12) return +(n / 1e9).toFixed(1) + 'b'
if (n >= 1e12) return +(n / 1e12).toFixed(1) + 't'
}
function WalletSummary ({ me }) { function WalletSummary ({ me }) {
return `${me?.sats} \\ ${me?.stacked}` if (!me) return null
return `${formatSats(me.sats)} \\ ${formatSats(me.stacked)}`
} }
export default function Header () { export default function Header () {
@ -41,7 +51,7 @@ export default function Header () {
<Head> <Head>
<link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} /> <link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
</Head> </Head>
<div className='position-relative mr-1'> <div className='position-relative'>
<NavDropdown className='px-0' title={`@${me?.name}`} alignRight> <NavDropdown className='px-0' title={`@${me?.name}`} alignRight>
<Link href={'/' + me?.name} passHref> <Link href={'/' + me?.name} passHref>
<NavDropdown.Item> <NavDropdown.Item>
@ -133,7 +143,7 @@ export default function Header () {
return ( return (
<> <>
<Container className='px-sm-0'> <Container className='px-sm-0'>
<Navbar> <Navbar className='pb-1'>
<Nav <Nav
className={styles.navbarNav} className={styles.navbarNav}
activeKey={path} activeKey={path}

13
components/header.module.css
View File

@ -18,6 +18,14 @@
background-color: transparent !important; background-color: transparent !important;
} }
.navLink:first-child {
padding-left: 0 !important;
}
.navLink:last-child {
padding-right: 0 !important;
}
.navbarNav { .navbarNav {
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
@ -25,8 +33,3 @@
align-items: center; align-items: center;
height: 39px; height: 39px;
} }
.easein {
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

20
components/item-full.js
View File

@ -18,12 +18,13 @@ function BioItem ({ item, handleClick }) {
<> <>
<ItemText item={item} /> <ItemText item={item} />
{me?.name === item.user.name && {me?.name === item.user.name &&
<Button <div className='text-right'>
onClick={handleClick} <Button
size='md' variant='link' onClick={handleClick}
className='text-right' size='md' variant='link'
>edit bio >edit bio
</Button>} </Button>
</div>}
<Reply parentId={item.id} /> <Reply parentId={item.id} />
</> </>
) )
@ -47,10 +48,13 @@ export default function ItemFull ({ item, bio, ...props }) {
<> <>
{item.parentId {item.parentId
? <Comment item={item} replyOpen includeParent noComments {...props} /> ? <Comment item={item} replyOpen includeParent noComments {...props} />
: (bio : (
<div className='mt-1'>{
bio
? <BioItem item={item} {...props} /> ? <BioItem item={item} {...props} />
: <TopLevelItem item={item} {...props} /> : <TopLevelItem item={item} {...props} />
)} }
</div>)}
{item.comments && {item.comments &&
<div className={styles.comments}> <div className={styles.comments}>
<Comments comments={item.comments} /> <Comments comments={item.comments} />

17
components/item.module.css
View File

@ -5,7 +5,7 @@
} }
.upvote { .upvote {
margin-top: 9px; margin-top: 3px;
} }
.link { .link {
@ -40,6 +40,8 @@ a.link:visited {
.hunk { .hunk {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
margin-bottom: .3rem;
line-height: 1rem;
} }
.main { .main {
@ -48,21 +50,20 @@ a.link:visited {
} }
.children { .children {
margin-top: 1rem; margin-top: .25rem;
margin-left: 24px; margin-left: 24px;
} }
.rank { .rank {
font-weight: 600; font-weight: 600;
margin-top: 8px; margin-top: 4px;
display: flex; display: flex;
color: grey; color: grey;
font-size: 90%; font-size: 90%;
min-width: 18px;
} }
.skeleton .other { .skeleton .other {
height: 17px; height: 14px;
align-items: center; align-items: center;
} }
@ -70,8 +71,8 @@ a.link:visited {
background-color: grey; background-color: grey;
width: 500px; width: 500px;
border-radius: .4rem; border-radius: .4rem;
height: 19px; height: 17px;
margin: 3px 0px; margin: 0;
} }
.skeleton .link { .skeleton .link {
@ -79,7 +80,7 @@ a.link:visited {
background-color: grey; background-color: grey;
width: 800px; width: 800px;
border-radius: .3rem; border-radius: .3rem;
margin: 3px 0px; margin: 2px 0px;
} }
.skeleton .otherItem { .skeleton .otherItem {

2
components/more-footer.js
View File

@ -32,5 +32,5 @@ export default function MoreFooter ({ cursor, fetchMore, Skeleton }) {
) )
} }
return <div className='d-flex justify-content-center mt-4 mb-2'><Footer /></div> return <div className='d-flex justify-content-center mt-3 mb-1'><Footer /></div>
} }

9
components/notifications.js
View File

@ -30,13 +30,16 @@ function Notification ({ n }) {
<small className='font-weight-bold text-info ml-2'>you were mentioned in</small>} <small className='font-weight-bold text-info ml-2'>you were mentioned in</small>}
<div className={ <div className={
n.__typename === 'Votification' || n.__typename === 'Mention' n.__typename === 'Votification' || n.__typename === 'Mention'
? `ml-sm-4 ml-3 ${n.item.title ? 'pb-2' : ''}` ? 'ml-sm-4 ml-3'
: '' : 'py-2'
} }
> >
{n.item.title {n.item.title
? <Item item={n.item} /> ? <Item item={n.item} />
: <Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying to you on:' : undefined} clickToContext />} : (
<div className='pb-2'>
<Comment item={n.item} noReply includeParent rootText={n.__typename === 'Reply' ? 'replying to you on:' : undefined} clickToContext />
</div>)}
</div> </div>
</div> </div>
) )

4
components/price.js
View File

@ -38,14 +38,14 @@ export default function Price ({ onReady }) {
if (asSats) { if (asSats) {
return ( return (
<Button className='text-reset py-0' onClick={handleClick} variant='link'> <Button className='text-reset px-1 py-0' onClick={handleClick} variant='link'>
{fixed(100000000 / data.data.amount, 0) + ' sats/$'} {fixed(100000000 / data.data.amount, 0) + ' sats/$'}
</Button> </Button>
) )
} }
return ( return (
<Button className='text-reset py-0' onClick={handleClick} variant='link'> <Button className='text-reset px-1 py-0' onClick={handleClick} variant='link'>
{'$' + fixed(data.data.amount, 2)} {'$' + fixed(data.data.amount, 2)}
</Button> </Button>
) )

2
components/reply.js
View File

@ -77,7 +77,7 @@ export default function Reply ({ parentId, onSuccess, replyOpen }) {
<MarkdownInput <MarkdownInput
name='text' name='text'
as={TextareaAutosize} as={TextareaAutosize}
minRows={4} minRows={6}
autoFocus={!replyOpen} autoFocus={!replyOpen}
required required
hint={me?.freeComments ? <span className='text-success'>{me.freeComments} free comments left</span> : null} hint={me?.freeComments ? <span className='text-success'>{me.freeComments} free comments left</span> : null}

5
components/reply.module.css
View File

@ -1,7 +1,7 @@
.reply { .reply {
max-width: 600px; max-width: 600px;
padding-right: 15px; padding-right: 15px;
padding-bottom: .5rem; padding-bottom: 1rem;
} }
.replyButtons { .replyButtons {
@ -10,7 +10,8 @@
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding-bottom: .5rem; padding-bottom: .25rem;
line-height: 1rem;
} }
.skeleton .input { .skeleton .input {

1
components/text.module.css
View File

@ -2,6 +2,7 @@
font-size: 90%; font-size: 90%;
font-family: inherit; font-family: inherit;
word-break: break-word; word-break: break-word;
line-height: 1rem;
} }
.text p { .text p {

2
pages/[name]/index.js
View File

@ -65,7 +65,7 @@ export function BioForm ({ handleSuccess, bio }) {
<MarkdownInput <MarkdownInput
name='bio' name='bio'
as={TextareaAutosize} as={TextareaAutosize}
minRows={4} minRows={6}
/> />
<ActionTooltip> <ActionTooltip>
<SubmitButton variant='secondary' className='mt-3'>{bio?.text ? 'save' : 'create'}</SubmitButton> <SubmitButton variant='secondary' className='mt-3'>{bio?.text ? 'save' : 'create'}</SubmitButton>

10
pages/[name]/posts.js
View File

@ -20,10 +20,12 @@ export default function UserPosts ({ data: { user, moreItems: { items, cursor }
<Layout noSeo> <Layout noSeo>
<Seo user={user} /> <Seo user={user} />
<UserHeader user={user} /> <UserHeader user={user} />
<Items <div className='mt-2'>
items={items} cursor={cursor} <Items
variables={{ sort: 'user', name: user.name }} items={items} cursor={cursor}
/> variables={{ sort: 'user', name: user.name }}
/>
</div>
</Layout> </Layout>
) )
} }

2
pages/top/[[...within]].js
View File

@ -15,7 +15,7 @@ export default function Index ({ data: { moreItems: { items, cursor } } }) {
return ( return (
<Layout> <Layout>
<Navbar> <Navbar className='pt-0'>
<Nav <Nav
className={styles.navbarNav} className={styles.navbarNav}
activeKey={path} activeKey={path}

6
styles/globals.scss
View File

@ -92,7 +92,7 @@ body {
.clickToContext { .clickToContext {
border-radius: .4rem; border-radius: .4rem;
padding: .2rem 0; padding: 0;
cursor: pointer; cursor: pointer;
} }
@ -196,6 +196,10 @@ footer {
} }
} }
textarea.form-control {
line-height: 1rem;
}
.nav-tabs { .nav-tabs {
border-bottom: 0; border-bottom: 0;
} }

4
styles/item.module.css
View File

@ -1,10 +1,10 @@
.comments { .comments {
margin-top: 1rem; margin-top: .5rem;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.comments { .comments {
margin-top: 1rem; margin-top: .5rem;
margin-left: -15px; margin-left: -15px;
margin-right: -15px; margin-right: -15px;
} }