Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: figure out responsive issues

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-12 23:12:12 -05:00
parent b441b781a0
commit 272a74cf5d
10 changed files with 191 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/account/[[...account]]/page.tsx
+3 -2
View File
@@ -8,8 +8,9 @@ export default function AccountPage() {
<UserProfile <UserProfile
appearance={{ appearance={{
elements: { elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white', card: 'sm:pb-4 shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
navbar: 'dark:bg-secondary-gray [&_*]:dark:text-white', navbar: 'hidden',
navbarMobileMenuRow: 'hidden',
formFieldInput: 'dark:bg-primary-gray dark:text-white', formFieldInput: 'dark:bg-primary-gray dark:text-white',
profileSectionTitle: 'dark:border-white dark:border-opacity-10', profileSectionTitle: 'dark:border-white dark:border-opacity-10',
breadcrumbsItem: 'dark:text-white', breadcrumbsItem: 'dark:text-white',
src/app/layout.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export default function RootLayout({
suppressHydrationWarning suppressHydrationWarning
> >
<body <body
className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className} overflow-auto`} className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className}`}
> >
<ClerkProvider <ClerkProvider
publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY} publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
@@ -37,7 +37,7 @@ export default function RootLayout({
showSpinner={false} showSpinner={false}
/> />
<Navbar /> <Navbar />
<div className='p-4 w-full h-full flex flex-col'> <div className='flex flex-col p-4 w-full h-full overflow-y-auto'>
{children} {children}
<Footer /> <Footer />
</div> </div>
src/app/login/[[...login]]/page.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { SignIn } from '@clerk/nextjs';
export default function LoginPage() { export default function LoginPage() {
return ( return (
<main className='flex flex-col items-center'> <main className='flex flex-col flex-1 items-center'>
<SignIn <SignIn
appearance={{ appearance={{
elements: { elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white', card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github: socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10', 'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google: socialButtonsIconButton__google:
src/app/posts/[id]/page.tsx
+5 -3
View File
@@ -28,14 +28,14 @@ export default function PostPage({
return ( return (
<main className='flex flex-col flex-1 w-full items-center'> <main className='flex flex-col flex-1 w-full items-center'>
<div className='flex flex-col items-center w-full max-w-4xl gap-4'> <div className='flex flex-col w-full max-w-4xl gap-4'>
{post === undefined ? ( {post === undefined ? (
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<SpinningLoader className='animate-spin w-5 h-5' /> Loading post... <SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
</div> </div>
) : ( ) : (
<> <>
<div className='p-1 rounded-md border border-gray-600'> <div className='flex flex-col min-w-0 p-1 rounded-md border border-gray-600'>
<Post <Post
post={post} post={post}
limit={false} limit={false}
@@ -54,7 +54,9 @@ export default function PostPage({
/> />
</div> </div>
)} )}
<Editor /> <div className='flex w-full'>
<Editor parentPostId={post._id} />
</div>
</div> </div>
</> </>
)} )}
src/app/signup/[[...signup]]/page.tsx
+2 -2
View File
@@ -4,11 +4,11 @@ import { SignUp } from '@clerk/nextjs';
export default function SignUpPage() { export default function SignUpPage() {
return ( return (
<main className='flex flex-col items-center'> <main className='flex flex-col flex-1 items-center'>
<SignUp <SignUp
appearance={{ appearance={{
elements: { elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white', card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github: socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10', 'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google: socialButtonsIconButton__google:
src/components/Editor.tsx
+9 -2
View File
@@ -12,10 +12,16 @@ import { basicSetup } from 'codemirror';
import { useMutation } from 'convex/react'; import { useMutation } from 'convex/react';
import { FormEvent, useState } from 'react'; import { FormEvent, useState } from 'react';
import { api } from '../../convex/_generated/api'; import { api } from '../../convex/_generated/api';
import { Doc } from '../../convex/_generated/dataModel'; import { Doc, Id } from '../../convex/_generated/dataModel';
import PostContent from './PostContent'; import PostContent from './PostContent';
export default function Editor({ post }: { post?: Doc<'posts'> }) { export default function Editor({
parentPostId,
post,
}: {
parentPostId?: Id<'posts'>;
post?: Doc<'posts'>;
}) {
const { user, isSignedIn } = useUser(); const { user, isSignedIn } = useUser();
const editorTheme = new Compartment(); const editorTheme = new Compartment();
const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']); const [currentDoc, setCurrentDoc] = useState(post?.content ?? ['']);
@@ -52,6 +58,7 @@ export default function Editor({ post }: { post?: Doc<'posts'> }) {
setCreatingOrUpdating(true); setCreatingOrUpdating(true);
const result = await createOrUpdatePost({ const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id, id: post?._id,
clerkUserId: user.id, clerkUserId: user.id,
content: currentDoc, content: currentDoc,
src/components/Navbar.tsx
+107 -27
View File
@@ -1,16 +1,39 @@
import { SignedIn, SignedOut, currentUser } from '@clerk/nextjs'; 'use client';
import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
import Link from 'next/link'; import Link from 'next/link';
import { BiPlus, BiSolidMessageSquare } from 'react-icons/bi'; import { useEffect, useState } from 'react';
import { BiLogIn, BiPlus } from 'react-icons/bi';
import { BsPersonPlusFill } from 'react-icons/bs';
import { ImProfile } from 'react-icons/im';
import {
RiMenuFoldLine,
RiMenuUnfoldLine,
RiUserFollowFill,
} from 'react-icons/ri';
import ThemeButton from './ThemeButton'; import ThemeButton from './ThemeButton';
import UserButton from './UserButton'; import UserButton from './UserButton';
export default async function Navbar() { export default function Navbar() {
const user = await currentUser(); const { user } = useUser();
const [navOpen, setNavOpen] = useState(false);
useEffect(() => {
function handler() {
if (navOpen) {
setNavOpen(false);
}
}
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return ( return (
<nav className='flex items-center justify-between p-5 shadow-md dark:bg-secondary-gray'> <nav className='flex flex-col items-center gap-4 p-5 shadow-md dark:bg-secondary-gray md:flex-row md:justify-between'>
<ul className='flex items-center gap-4'> <div className='flex items-center justify-between w-full md:max-w-min'>
<li>
<Link <Link
href='/' href='/'
className='italic' className='italic'
@@ -18,54 +41,111 @@ export default async function Navbar() {
conve conve
<span className='font-bold text-4xl text-primary-accent'>X</span> <span className='font-bold text-4xl text-primary-accent'>X</span>
</Link> </Link>
</li> <button
onClick={() => setNavOpen(!navOpen)}
type='button'
className='flex items-center justify-center md:hidden'
>
{navOpen ? <RiMenuUnfoldLine /> : <RiMenuFoldLine />}
</button>
</div>
<div
className='hidden flex-1 flex-col gap-4 w-full items-center md:flex md:flex-row md:justify-between'
style={{ display: navOpen ? 'flex' : '' }}
>
<ul className='flex flex-col w-full items-start gap-4 md:flex-row md:items-center md:max-w-min'>
<SignedIn> <SignedIn>
<li> <li className='flex w-full'>
{/* TODO: Style this */} <div className='flex w-full'>
<div>
<input <input
type='text' type='text'
placeholder='Search' placeholder='Search'
className='w-full md:w-[unset] py-1 px-2 rounded-md border border-gray-600 dark:bg-primary-gray dark:border-0'
/> />
</div> </div>
</li> </li>
<li> <li>
<Link href='#'>Following</Link> <div className='flex items-center gap-2'>
</li> <div className='p-1 md:hidden'>
<li> <RiUserFollowFill className='w-6 h-6' />
<Link href={`/profile/${user?.id}`}>Profile</Link> </div>
</li>
<li>
<div className='mx-4'>
<Link <Link
href='/posts/add' onClick={() => setNavOpen(false)}
className='relative' href='#'
> >
<BiSolidMessageSquare className='absolute w-10 h-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-primary-accent' /> Following
<BiPlus className='absolute w-5 h-5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white' />
</Link> </Link>
</div> </div>
</li> </li>
<li>
<div className='flex items-center gap-2'>
<div className='p-1 md:hidden'>
<ImProfile className='w-6 h-6' />
</div>
<Link
onClick={() => setNavOpen(false)}
href={`/profile/${user?.id}`}
>
Profile
</Link>
</div>
</li>
<li className='flex items-center gap-2 max-w-min whitespace-nowrap'>
<div className='p-1 bg-primary-accent rounded-md rounded-bl-none'>
<Link
onClick={() => setNavOpen(false)}
href='/posts/add'
>
<BiPlus className='w-6 h-6 text-white' />
</Link>
</div>
<span className='md:hidden'>Add Post</span>
</li>
</SignedIn> </SignedIn>
</ul> </ul>
<ul className='flex items-center gap-4'> <ul className='flex flex-col w-full items-start gap-4 md:flex-row md:items-center md:max-w-min'>
<li> <li className='flex items-center gap-2'>
<div className='p-1'>
<ThemeButton /> <ThemeButton />
</div>
<span className='md:hidden'>Change Theme</span>
</li> </li>
<SignedIn> <SignedIn>
<li> <li className='flex items-center gap-2'>
<UserButton /> <UserButton />
<span className='md:hidden'>Manage Account</span>
</li> </li>
</SignedIn> </SignedIn>
<SignedOut> <SignedOut>
<li> <li>
<Link href='/login'>Sign in</Link> <div className='flex items-center gap-2'>
<div className='p-1 md:hidden'>
<BiLogIn className='w-6 h-6' />
</div>
<Link
href='/login'
className='whitespace-nowrap'
>
Sign in
</Link>
</div>
</li> </li>
<li> <li>
<Link href='/signup'>Sign up</Link> <div className='flex items-center gap-2'>
<div className='p-1 md:hidden'>
<BsPersonPlusFill className='w-6 h-6' />
</div>
<Link
href='/signup'
className='whitespace-nowrap'
>
Sign up
</Link>
</div>
</li> </li>
</SignedOut> </SignedOut>
</ul> </ul>
</div>
</nav> </nav>
); );
} }
src/components/Post.tsx
+12 -5
View File
@@ -63,8 +63,8 @@ export default function Post({
} }
return ( return (
<div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray'> <div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray flex-wrap'>
<div> <div className='flex-shrink-0'>
<Image <Image
alt='user profile image' alt='user profile image'
src={post.user.clerkImageUrl} src={post.user.clerkImageUrl}
@@ -73,15 +73,22 @@ export default function Post({
className='rounded-full object-cover border-4 border-primary-accent' className='rounded-full object-cover border-4 border-primary-accent'
/> />
</div> </div>
<div className='flex flex-1 flex-col gap-2'> <div className='flex flex-1 flex-col gap-2 min-w-0'>
<div className='flex items-center justify-between gap-2'> <div className='flex items-center justify-between gap-2'>
<div className='flex items-center gap-2 flex-wrap min-w-0'>
<div
className='overflow-hidden text-ellipsis'
title={username}
>
{username}
</div>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
<div>{username}</div>
<GoDotFill className='w-3 h-3' /> <GoDotFill className='w-3 h-3' />
<div className='text-xs'> <div className='text-xs'>
{`${postMonth} ${dayOfMonth}, ${postYear}`} {`${postMonth} ${dayOfMonth}, ${postYear}`}
</div> </div>
</div> </div>
</div>
<div className='relative'> <div className='relative'>
<button onClick={() => setModalOpen(!modalOpen)}> <button onClick={() => setModalOpen(!modalOpen)}>
<BiDotsHorizontalRounded /> <BiDotsHorizontalRounded />
@@ -114,7 +121,7 @@ export default function Post({
</div> </div>
</div> </div>
<div <div
className={`${limit ? 'max-h-80' : ''} overflow-hidden text-ellipsis`} className={`${limit ? 'max-h-80' : ''} flex flex-col overflow-hidden`}
> >
<PostContent content={Text.of(content).toString()} /> <PostContent content={Text.of(content).toString()} />
</div> </div>
src/components/ThemeButton.tsx
+3 -3
View File
@@ -17,11 +17,11 @@ export default function ThemeButton() {
onClick={() => setTheme(isDark ? 'light' : 'dark')} onClick={() => setTheme(isDark ? 'light' : 'dark')}
> >
{mounted === false ? ( {mounted === false ? (
<Loader className='animate-spin w-5 h-5' /> <Loader className='animate-spin w-6 h-6' />
) : isDark ? ( ) : isDark ? (
<BsMoonStarsFill className='w-5 h-5' /> <BsMoonStarsFill className='w-6 h-6' />
) : ( ) : (
<BsSunFill className='w-5 h-5' /> <BsSunFill className='w-6 h-6' />
)} )}
</button> </button>
); );
src/components/UserProfile.tsx
+9 -4
View File
@@ -12,9 +12,9 @@ export default function UserProfile({ user }: { user: UserDto }) {
return ( return (
<div className='w-full'> <div className='w-full'>
<div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 pl-5 pr-40'> <div className='shadow-md bg-gradient-to-r from-violet-600 via-violet-600 to-indigo-600 rounded-t-md pt-20 px-5'>
<div className='flex items-center gap-4 -mb-[25px]'> <div className='flex items-center gap-4 -mb-[25px]'>
<div> <div className='flex-shrink-0'>
<Image <Image
alt='user profile image' alt='user profile image'
src={user.clerkImageUrl} src={user.clerkImageUrl}
@@ -23,8 +23,13 @@ export default function UserProfile({ user }: { user: UserDto }) {
className='rounded-full object-cover border-4 border-primary-accent' className='rounded-full object-cover border-4 border-primary-accent'
/> />
</div> </div>
<div className='text-white'> <div className='flex flex-col flex-1 min-w-0 text-white'>
<h1 className='font-bold'>{username}</h1> <h1
className='font-bold overflow-hidden text-ellipsis'
title={username}
>
{username}
</h1>
<div className='flex gap-2 items-center text-sm'> <div className='flex gap-2 items-center text-sm'>
<AiFillCalendar className='w-4 h-4' /> <AiFillCalendar className='w-4 h-4' />
{`Joined ${monthJoined} ${yearJoined}`} {`Joined ${monthJoined} ${yearJoined}`}