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);
}
.hunk {
margin-bottom: 0;
}
.comment:not(:last-child) {
border-bottom-left-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 => (
<div
key={item.id}
className='clickToContext'
className='clickToContext py-2'
onClick={() => {
router.push({
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></>}
name='text'
as={TextareaAutosize}
minRows={4}
minRows={6}
hint={editThreshold
? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div>
: null}

2
components/footer.js
View File

@ -95,7 +95,7 @@ export default function Footer ({ noLinks }) {
</div>}
{data &&
<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>
<CopyInput

16
components/header.js
View File

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

13
components/header.module.css
View File

@ -18,15 +18,18 @@
background-color: transparent !important;
}
.navLink:first-child {
padding-left: 0 !important;
}
.navLink:last-child {
padding-right: 0 !important;
}
.navbarNav {
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
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} />
{me?.name === item.user.name &&
<Button
onClick={handleClick}
size='md' variant='link'
className='text-right'
>edit bio
</Button>}
<div className='text-right'>
<Button
onClick={handleClick}
size='md' variant='link'
>edit bio
</Button>
</div>}
<Reply parentId={item.id} />
</>
)
@ -47,10 +48,13 @@ export default function ItemFull ({ item, bio, ...props }) {
<>
{item.parentId
? <Comment item={item} replyOpen includeParent noComments {...props} />
: (bio
: (
<div className='mt-1'>{
bio
? <BioItem item={item} {...props} />
: <TopLevelItem item={item} {...props} />
)}
}
</div>)}
{item.comments &&
<div className={styles.comments}>
<Comments comments={item.comments} />

17
components/item.module.css
View File

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

4
components/price.js
View File

@ -38,14 +38,14 @@ export default function Price ({ onReady }) {
if (asSats) {
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/$'}
</Button>
)
}
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)}
</Button>
)

2
components/reply.js
View File

@ -77,7 +77,7 @@ export default function Reply ({ parentId, onSuccess, replyOpen }) {
<MarkdownInput
name='text'
as={TextareaAutosize}
minRows={4}
minRows={6}
autoFocus={!replyOpen}
required
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 {
max-width: 600px;
padding-right: 15px;
padding-bottom: .5rem;
padding-bottom: 1rem;
}
.replyButtons {
@ -10,7 +10,8 @@
font-weight: bold;
display: inline-block;
cursor: pointer;
padding-bottom: .5rem;
padding-bottom: .25rem;
line-height: 1rem;
}
.skeleton .input {

1
components/text.module.css
View File

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

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

@ -65,7 +65,7 @@ export function BioForm ({ handleSuccess, bio }) {
<MarkdownInput
name='bio'
as={TextareaAutosize}
minRows={4}
minRows={6}
/>
<ActionTooltip>
<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>
<Seo user={user} />
<UserHeader user={user} />
<Items
items={items} cursor={cursor}
variables={{ sort: 'user', name: user.name }}
/>
<div className='mt-2'>
<Items
items={items} cursor={cursor}
variables={{ sort: 'user', name: user.name }}
/>
</div>
</Layout>
)
}

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

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

6
styles/globals.scss
View File

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

4
styles/item.module.css
View File

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