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

navbar layout

Browse Source
This commit is contained in:
keyan 2021-04-28 11:30:02 -05:00
parent 84b69fc481
commit d2c84dbacc
7 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
api/resolvers/item.js
View File

@ -139,7 +139,8 @@ export default {
JOIN "Item" ON ltree2text(subpath("Item"."path", 0, -1)) = p."path" JOIN "Item" ON ltree2text(subpath("Item"."path", 0, -1)) = p."path"
${LEFT_JOIN_SATS}) ${LEFT_JOIN_SATS})
SELECT * FROM base ORDER BY sort_path`) SELECT * FROM base ORDER BY sort_path`)
return nestComments(flat, item.id)[0] const comments = nestComments(flat, item.id)[0]
return comments
}, },
sats: async (item, args, { models }) => { sats: async (item, args, { models }) => {
const { sum: { sats } } = await models.vote.aggregate({ const { sum: { sats } } = await models.vote.aggregate({

32
components/header.js
View File

@ -20,12 +20,12 @@ export default function Header () {
<> <>
<Nav.Item> <Nav.Item>
<Link href={'/' + session.user.name} passHref> <Link href={'/' + session.user.name} passHref>
<Nav.Link>@{session.user.name}</Nav.Link> <Nav.Link className={styles.navLink}>@{session.user.name}</Nav.Link>
</Link> </Link>
</Nav.Item> </Nav.Item>
<Nav.Item> {/* <Nav.Item>
<Nav.Link onClick={signOut}>logout</Nav.Link> <Nav.Link onClick={signOut} className={styles.navLink}>logout</Nav.Link>
</Nav.Item> </Nav.Item> */}
</> </>
) )
} else { } else {
@ -35,31 +35,29 @@ export default function Header () {
return ( return (
<> <>
<Navbar bg='primary' className={styles.navbar}> <Container className='px-sm-0'>
<Container> <Navbar className={styles.navbar}>
<Link href='/' passHref> <Nav className='w-100 justify-content-sm-between justify-content-start flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
<Navbar.Brand className={styles.brand}>STACKER NEWS</Navbar.Brand> <Link href='/' passHref>
</Link> <Navbar.Brand className={`${styles.brand} mr-2 mr-sm-0`}>STACKER NEWS</Navbar.Brand>
<Nav className='mr-auto align-items-center' activeKey={router.asPath.split('?')[0]}> </Link>
<Nav.Item> <Nav.Item>
<Link href='/recent' passHref> <Link href='/recent' passHref>
<Nav.Link>recent</Nav.Link> <Nav.Link className={styles.navLink}>recent</Nav.Link>
</Link> </Link>
</Nav.Item> </Nav.Item>
<Nav.Item> <Nav.Item>
<Link href='/post' passHref> <Link href='/post' passHref>
<Nav.Link>post</Nav.Link> <Nav.Link className={styles.navLink}>post</Nav.Link>
</Link> </Link>
</Nav.Item> </Nav.Item>
<Nav.Item> <Nav.Item>
<Nav.Link href='https://bitcoinerjobs.co' target='_blank'>jobs</Nav.Link> <Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
</Nav.Item> </Nav.Item>
</Nav>
<Nav className='ml-auto align-items-center' activeKey={router.asPath.split('?')[0]}>
<Corner /> <Corner />
</Nav> </Nav>
</Container> </Navbar>
</Navbar> </Container>
</> </>
) )
} }

9
components/header.module.css
View File

@ -4,10 +4,15 @@
padding: 0; padding: 0;
line-height: 100%; line-height: 100%;
margin-bottom: -.3rem; margin-bottom: -.3rem;
margin-right: 0;
text-shadow: 0 0 10px #FADA5E;
}
.navLink {
padding: 0.25rem 1rem;
} }
.navbar { .navbar {
padding: 0rem 1.75rem; padding: .5rem 0;
background-color: transparent !important; background-color: transparent !important;
background-image: linear-gradient(#FADA5E, #FADA5E, transparent)
} }

25
components/item.js
View File

@ -13,31 +13,30 @@ export default function Item ({ item, rank, children }) {
</div>) </div>)
: <div />} : <div />}
<div className={styles.item}> <div className={styles.item}>
<UpVote itemId={item.id} meSats={item.meSats} /> <UpVote itemId={item.id} meSats={item.meSats} className={styles.upvote} />
<div className={styles.hunk}> <div className={styles.hunk}>
<div className={`${styles.main} flex-wrap flex-md-nowrap`}> <div className={`${styles.main} flex-wrap flex-md-nowrap`}>
<Link href={`/items/${item.id}`} passHref> <Link href={`/items/${item.id}`} passHref>
<a className={`${styles.title} text-reset flex-md-fill flex-md-shrink-0 mr-2`}>{item.title}</a> <a className={`${styles.title} text-reset flex-md-shrink-0 mr-2`}>{item.title}</a>
</Link> </Link>
{item.url && <a className={styles.link} href={item.url}>{item.url.replace(/(^\w+:|^)\/\//, '')}</a>} {item.url && <a className={styles.link} href={item.url}>{item.url.replace(/(^\w+:|^)\/\//, '')}</a>}
</div> </div>
<div className={styles.other}> <div className={`${styles.other}`}>
<span>{item.sats} sats</span> <span>{item.sats} sats</span>
{!!item.boost && <span> \ </span>
<> <span>{item.boost} boost</span>
<span> \ </span>
<span>{item.boost} boost</span>
</>}
<span> \ </span> <span> \ </span>
<Link href={`/items/${item.id}`} passHref> <Link href={`/items/${item.id}`} passHref>
<a className='text-reset'>{item.ncomments} comments</a> <a className='text-reset'>{item.ncomments} comments</a>
</Link> </Link>
<span> \ </span> <span> \ </span>
<Link href={`/${item.user.name}`} passHref> <span>
<a>@{item.user.name}</a> <Link href={`/${item.user.name}`} passHref>
</Link> <a>@{item.user.name}</a>
<span> </span> </Link>
<span>{timeSince(new Date(item.createdAt))}</span> <span> </span>
<span>{timeSince(new Date(item.createdAt))}</span>
</span>
</div> </div>
</div> </div>
</div> </div>

1
components/item.module.css
View File

@ -25,6 +25,7 @@
.hunk { .hunk {
overflow: hidden; overflow: hidden;
width: 100%;
} }
.main { .main {

2
components/layout.js
View File

@ -10,7 +10,7 @@ export default function Layout ({ noContain, children }) {
{noContain {noContain
? children ? children
: ( : (
<Container className='my-2 py-2 px-sm-0'> <Container className='my-1 px-sm-0'>
{children} {children}
</Container> </Container>
)} )}

2
styles/globals.scss
View File

@ -8,7 +8,7 @@ $theme-colors: (
"boost" : #7A0CE9, "boost" : #7A0CE9,
); );
$body-bg: #fafafa; $body-bg: #f5f5f5;
$border-radius: .4rem; $border-radius: .4rem;
$enable-transitions: false; $enable-transitions: false;
$enable-gradients: false; $enable-gradients: false;