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

small ui stuff

This commit is contained in:
keyan 2021-05-05 13:13:14 -05:00
parent 10d848b5bd
commit d4d1169058
12 changed files with 105 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/comment.js
View File

@ -106,8 +106,6 @@ export default function Comment ({ item, children, replyOpen, includeParent, cac
}
export function CommentSkeleton ({ skeletonChildren }) {
const comments = skeletonChildren > 0 ? new Array(skeletonChildren).fill(null) : []
return (
<div className={styles.comment}>
<div className={`${itemStyles.item} ${itemStyles.skeleton} ${styles.item} ${styles.skeleton}`}>
@ -127,10 +125,8 @@ export function CommentSkeleton ({ skeletonChildren }) {
<div className={`${itemStyles.other} ${styles.reply} clouds`} />
</div>
<div className={`${styles.comments} ml-sm-1 ml-md-3`}>
{comments
? comments.map((_, i) => (
<CommentSkeleton key={i} skeletonChildren={skeletonChildren - 1} />
))
{skeletonChildren
? <CommentSkeleton skeletonChildren={skeletonChildren - 1} />
: null}
</div>
</div>

6
components/comments.js
View File

@ -8,11 +8,7 @@ export default function Comments ({ comments, ...props }) {
}
export function CommentsSkeleton () {
const comments = new Array(1).fill(null)
return comments.map((_, i) => (
<CommentSkeleton key={i} skeletonChildren={2} />
))
return <CommentSkeleton skeletonChildren={7} />
}
export function CommentsQuery ({ query, ...props }) {

17
components/header.js
View File

@ -4,12 +4,13 @@ import Nav from 'react-bootstrap/Nav'
import Link from 'next/link'
import styles from './header.module.css'
import { useRouter } from 'next/router'
import { Container, NavDropdown } from 'react-bootstrap'
import { Button, Container, NavDropdown } from 'react-bootstrap'
import Price from './price'
export default function Header () {
const [session, loading] = useSession()
const router = useRouter()
const path = router.asPath.split('?')[0]
const Corner = () => {
if (loading) {
@ -18,15 +19,25 @@ export default function Header () {
if (session) {
return (
<div className='d-flex align-items-center'>
<NavDropdown title={`@${session.user.name}`} alignRight>
<Link href={'/' + session.user.name} passHref>
<NavDropdown.Item>profile</NavDropdown.Item>
</Link>
<Link href='/fund' passHref>
<NavDropdown.Item className='text-success'>fund [0,0]</NavDropdown.Item>
</Link>
<NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
</NavDropdown>
<Nav.Item>
<Link href='/fund' passHref>
<Nav.Link className='text-success pl-0'>[0,0]</Nav.Link>
</Link>
</Nav.Item>
</div>
)
} else {
return <Nav.Link href='/login' onClick={signIn}>login</Nav.Link>
return path !== '/login' && <Button href='/login' onClick={signIn}>login</Button>
}
}
@ -34,7 +45,7 @@ export default function Header () {
<>
<Container className='px-sm-0'>
<Navbar className={styles.navbar}>
<Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={router.asPath.split('?')[0]}>
<Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={path}>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} mr-2 d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
</Link>

0
components/invoice.js Normal file
View File

1
components/upvote.module.css
View File

@ -1,6 +1,5 @@
.upvote {
fill: grey;
min-width: fit-content;
user-select: none;
}

42
fragments/comments.js
View File

@ -43,6 +43,48 @@ export const COMMENTS = gql`
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
comments {
...CommentFields
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

1
package.json
View File

@ -17,6 +17,7 @@
"ln-service": "^51.7.0",
"next": "10.0.9",
"next-auth": "^3.13.3",
"qrcode.react": "^1.0.1",
"react": "17.0.1",
"react-bootstrap": "^1.5.2",
"react-dom": "17.0.1",

9
pages/fund.js Normal file
View File

@ -0,0 +1,9 @@
import Layout from '../components/layout'
export default function Fund () {
return (
<Layout>
<div>fund</div>
</Layout>
)
}

4
pages/items/[id].js
View File

@ -8,6 +8,7 @@ import { COMMENTS } from '../../fragments/comments'
import { ITEM_FIELDS } from '../../fragments/items'
import { gql, useQuery } from '@apollo/client'
import styles from '../../styles/item.module.css'
import Head from 'next/head'
export async function getServerSideProps ({ params: { id } }) {
return {
@ -63,6 +64,9 @@ function LoadItem ({ query }) {
? <Comment item={item} replyOpen includeParent noComments />
: (
<>
<Head>
<title>{item.title} \ stacker news</title>
</Head>
<Item item={item}>
{item.text && <Text>{item.text}</Text>}
<Reply parentId={item.id} />

9
styles/globals.scss
View File

@ -52,6 +52,15 @@ $container-max-widths: (
src: url(/Lightningvolt-xoqm.ttf);
}
body {
background-image: linear-gradient(180deg, #f5f5f5, #f5f5f5, white);
background-attachment:fixed;
min-height: 100vh;
height: 100%;
z-index: -2;
position: relative;
}
.form-label {
font-size: 92%;
font-weight: bold;

2
styles/post.module.css
View File

@ -7,6 +7,8 @@
padding: 0;
top: 0;
z-index: -1;
padding-right: 15px;
padding-left: 15px
}
.post {

16
yarn.lock
View File

@ -4259,7 +4259,7 @@ prop-types-extra@^1.1.0:
react-is "^16.3.2"
warning "^4.0.0"
prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -4346,6 +4346,20 @@ pushdata-bitcoin@1.0.1, pushdata-bitcoin@^1.0.1:
dependencies:
bitcoin-ops "^1.3.0"
qr.js@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
qrcode.react@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
dependencies:
loose-envify "^1.4.0"
prop-types "^15.6.0"
qr.js "0.0.0"
qs@6.7.0:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"