navbar layout

api/resolvers/item.js

@@ -139,7 +139,8 @@ export default {
           JOIN "Item" ON ltree2text(subpath("Item"."path", 0, -1)) = p."path"
           ${LEFT_JOIN_SATS})
         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 }) => {
       const { sum: { sats } } = await models.vote.aggregate({

components/header.js

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

components/header.module.css

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

components/item.js

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

components/item.module.css

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

components/layout.js

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

styles/globals.scss

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