Skip to content
Snippets Groups Projects
Commit 56f3237c authored by Yusuf Akgül's avatar Yusuf Akgül :hatching_chick:
Browse files

Merge branch 'mobile' into 'main' 

no more mobile scuffed, still needs nav

See merge request !48
parents 02f5f605 4d286c3d
No related branches found
No related tags found
1 merge request!48no more mobile scuffed, still needs nav
Pipeline #40014 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 75 additions and 82 deletions
app/(content)/(gaming)/games/page.tsx
+ 1
− 3
View file @ 56f3237c
...@@ -9,9 +9,7 @@ export default async function GamesPage() { ...@@ -9,9 +9,7 @@ export default async function GamesPage() {
<GlobalLayout <GlobalLayout
mainContent={ mainContent={
<> <>
<div className="fixed top-30 z-40"> <ScrollToTop />
<ScrollToTop />
</div>
<InfiniteScrollGames /> <InfiniteScrollGames />
</> </>
} }
......
app/(content)/(home)/home/page.tsx
+ 2
− 4
View file @ 56f3237c
...@@ -14,10 +14,8 @@ export default async function HomePage() { ...@@ -14,10 +14,8 @@ export default async function HomePage() {
<GlobalLayout <GlobalLayout
mainContent={ mainContent={
<> <>
<div className="fixed top-30 z-40"> <ScrollToTop />
<ScrollToTop /> <div className="w-full h-full space-y-6 flex flex-col">
</div>
<div className="w-full space-y-6 flex flex-col">
<CreateGweet /> <CreateGweet />
<Gweets /> <Gweets />
</div> </div>
......
app/(content)/layout.tsx
+ 4
− 4
View file @ 56f3237c
...@@ -11,14 +11,14 @@ export default async function ContentLayout({ ...@@ -11,14 +11,14 @@ export default async function ContentLayout({
const user = await getCurrentUser() const user = await getCurrentUser()
return ( return (
<main className="flex min-h-screen flex-col space-y-6 align-middle"> <main className="flex min-h-screen flex-col md:space-y-6 align-middle">
<Header user={user} /> <Header user={user} />
<div className="container grid flex-1 gap-12 grid-cols-5"> <div className="md:container grid flex-1 gap-12 grid-cols-5">
<aside className="self-start sticky top-[89px] col-span-1"> <aside className="self-start sticky top-[89px] hidden md:col-span-1 md:block">
<Sidebar items={dashboardConfig.sidebarNav} user={user} /> <Sidebar items={dashboardConfig.sidebarNav} user={user} />
</aside> </aside>
<div className="flex flex-1 flex-col w-full h-full col-span-4 pb-6"> <div className="flex flex-1 flex-col w-full h-full col-span-5 md:col-span-4 md:pb-6">
{children} {children}
</div> </div>
</div> </div>
......
components/create-gweet/components/create-gweet-wrapper.tsx
+ 1
− 1
View file @ 56f3237c
...@@ -12,7 +12,7 @@ export const CreateGweetWrapper = ({ ...@@ -12,7 +12,7 @@ export const CreateGweetWrapper = ({
const [isComment, setIsComment] = useState(true) const [isComment, setIsComment] = useState(true)
return ( return (
<div className="px-6"> <div className="px-3 md:px-6">
<CreateGweet <CreateGweet
replyToGweetId={replyToGweetId} replyToGweetId={replyToGweetId}
placeholder="Gweet your reply..." placeholder="Gweet your reply..."
......
components/create-gweet/components/create-gweet.tsx
+ 47
− 52
View file @ 56f3237c
...@@ -102,7 +102,7 @@ export const CreateGweet = ({ ...@@ -102,7 +102,7 @@ export const CreateGweet = ({
} }
}, [form, isSuccess]) }, [form, isSuccess])
const chooseImages = async ( let chooseImages = async (
event: React.ChangeEvent<HTMLInputElement>, event: React.ChangeEvent<HTMLInputElement>,
setChosenImages: (images: IChosenImages[]) => void, setChosenImages: (images: IChosenImages[]) => void,
) => { ) => {
...@@ -196,9 +196,9 @@ export const CreateGweet = ({ ...@@ -196,9 +196,9 @@ export const CreateGweet = ({
</div> </div>
)} )}
<div className="relative"> <div className="relative p-1 md:p-0">
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onGweet)} className="space-y-6"> <form onSubmit={form.handleSubmit(onGweet)} className="space-y-3">
<Card className="p-3 flex items-start relative"> <Card className="p-3 flex items-start relative">
<UserAvatar <UserAvatar
className="mr-3" className="mr-3"
...@@ -222,23 +222,12 @@ export const CreateGweet = ({ ...@@ -222,23 +222,12 @@ export const CreateGweet = ({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Textarea <Textarea
placeholder={placeholder || placeholder={placeholder || isComment ? "Gweet your reply" : "What's on your mind?"}
chosenImages.length !== 0 ?
"Tell us something about your media."
:
"What's on your mind?"
}
className="resize-none min-h-[100px]" className="resize-none min-h-[100px]"
disabled={isLoading || !session.user} disabled={isLoading || !session.user}
{...field} {...field}
/> />
</FormControl> </FormControl>
{!isComment ?
<FormDescription>
Your gweets will be public, and everyone can see them.
</FormDescription>
: null
}
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
...@@ -255,51 +244,57 @@ export const CreateGweet = ({ ...@@ -255,51 +244,57 @@ export const CreateGweet = ({
disabled={isLoading || !session.user} disabled={isLoading || !session.user}
/> />
{chosenImages.length > 0 && ( {chosenImages.length > 0 && (
<div className={`grid object-cover h-[600px] pt-2 ${chosenImages.length === 1 ? "grid-cols-1" <>
: chosenImages.length === 2 ? "grid-cols-2 gap-3" <div className={`grid object-cover h-[600px] pt-2 ${chosenImages.length === 1 ? "grid-cols-1"
: chosenImages.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3" : chosenImages.length === 2 ? "grid-cols-2 gap-3"
: "" : chosenImages.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
}`} : ""
> }`}
{chosenImages.map((image, i) => { >
const isFirstImage = chosenImages.length === 3 && i === 0 {chosenImages.map((image, i) => {
return ( const isFirstImage = chosenImages.length === 3 && i === 0
<Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""} ${isLoading ? "opacity-50" : ""}`}> return (
<Button <Card key={i} className={`relative max-h-[600px] overflow-hidden ${isFirstImage ? "row-span-2" : ""} ${isLoading ? "opacity-50" : ""}`}>
type="button" <Button
size="icon" type="button"
variant="secondary" size="icon"
className="rounded-full absolute top-1 right-1 z-40" variant="secondary"
disabled={isLoading} className="rounded-full absolute top-1 right-1 z-40"
onClick={() => { disabled={isLoading}
setChosenImages( onClick={() => {
chosenImages.filter((img, j) => j !== i), setChosenImages(
) chosenImages.filter((img, j) => j !== i),
}} )
> }}
<Icons.close /> >
</Button> <Icons.close />
<Image </Button>
src={image.url as string} <Image
alt="gweet image" src={image.url as string}
fill alt="gweet image"
className="object-cover rounded-lg" fill
/> className="object-cover rounded-lg"
</Card> />
) </Card>
})} )
</div> })}
</div>
<p className="pt-2 text-sm text-muted-foreground">Give your media a story before you can post.</p>
</>
)} )}
{/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */} {/* {quoted_gweet && <QuotedGweet gweet={quoted_gweet} />} */}
</div> </div>
</Card> </Card>
<div className="flex justify-end"> <div className="flex justify-end">
<Button type="submit" size="lg" className="w-20" disabled={disable}> <Button type="submit" size="lg" className="w-20" disabled={disable}
variant={form.watch("gweet") && form.watch("gweet").length > 240 ? "destructive" : "default"}>
{isLoading ? ( {isLoading ? (
<Icons.spinner className="h-4 w-4 animate-spin" /> <Icons.spinner className="animate-spin" />
) : ( ) : (
isComment ? 'Reply' : 'Gweet' form.watch("gweet") && form.watch("gweet").length > 240 ? form.watch("gweet").length :
isComment ? 'Reply' : 'Gweet'
)} )}
</Button> </Button>
</div> </div>
......
components/global-layout.tsx
+ 2
− 2
View file @ 56f3237c
export const GlobalLayout = ({ mainContent, sideContent }: { mainContent: JSX.Element, sideContent?: JSX.Element }) => { export const GlobalLayout = ({ mainContent, sideContent }: { mainContent: JSX.Element, sideContent?: JSX.Element }) => {
return ( return (
<div className="grid grid-cols-4 gap-12 h-full w-full"> <div className="grid grid-cols-4 gap-12 h-full w-full">
<div className="col-span-3 flex justify-center"> <div className="col-span-4 md:col-span-3 flex justify-center">
{mainContent} {mainContent}
</div> </div>
<aside className="self-start sticky top-[89px] col-span-1 space-y-6"> <aside className="self-start sticky top-[89px] hidden md:col-span-1 md:block space-y-6">
{sideContent} {sideContent}
</aside> </aside>
</div> </div>
......
components/gweets/components/actions/comment-button.tsx
+ 1
− 1
View file @ 56f3237c
...@@ -7,7 +7,7 @@ export const CommentButton = ({ gweet }: { gweet: IGweet }) => { ...@@ -7,7 +7,7 @@ export const CommentButton = ({ gweet }: { gweet: IGweet }) => {
return ( return (
<div className="relative inline-flex items-center"> <div className="relative inline-flex items-center">
<Button variant="ghost" size="icon" className="hover:bg-sky-800 z-40"> <Button variant="ghost" size="icon" className="hover:bg-sky-800 z-40">
<Icons.messagecircle className="w-6 h-6" /> <Icons.messagecircle />
</Button> </Button>
{gweet.allComments.length > 0 && ( {gweet.allComments.length > 0 && (
......
components/gweets/components/actions/like-button.tsx
+ 2
− 2
View file @ 56f3237c
...@@ -28,8 +28,8 @@ export const LikeButton = ({ gweet }: { gweet: IGweet }) => { ...@@ -28,8 +28,8 @@ export const LikeButton = ({ gweet }: { gweet: IGweet }) => {
variant="ghost" size="icon" className="hover:bg-red-800" variant="ghost" size="icon" className="hover:bg-red-800"
> >
{hasLiked ? {hasLiked ?
<Icons.heart className="w-6 h-6 fill-red-600 text-red-600" /> <Icons.heart className="fill-red-600 text-red-600" />
: <Icons.heart className="w-6 h-6" /> : <Icons.heart className="" />
} }
</Button> </Button>
......
components/gweets/components/actions/regweet-button.tsx
+ 2
− 2
View file @ 56f3237c
...@@ -27,8 +27,8 @@ export const RegweetButton = ({ gweet }: { gweet: IGweet }) => { ...@@ -27,8 +27,8 @@ export const RegweetButton = ({ gweet }: { gweet: IGweet }) => {
variant="ghost" size="icon" className="hover:bg-green-800 z-40" variant="ghost" size="icon" className="hover:bg-green-800 z-40"
> >
{hasRegweeted ? {hasRegweeted ?
<Icons.regweet className="w-6 h-6 text-green-600" /> <Icons.regweet className="text-green-600" />
: <Icons.regweet className="w-6 h-6" /> : <Icons.regweet />
} }
</Button> </Button>
......
components/gweets/components/gweet-actions.tsx
+ 1
− 1
View file @ 56f3237c
...@@ -10,7 +10,7 @@ export const GweetActions = ({ ...@@ -10,7 +10,7 @@ export const GweetActions = ({
gweet: IGweet gweet: IGweet
}) => { }) => {
return ( return (
<div className="space-x-12 w-64"> <div className="space-x-12 w-64 justify-center">
<CommentButton gweet={gweet} /> <CommentButton gweet={gweet} />
<RegweetButton gweet={gweet} /> <RegweetButton gweet={gweet} />
<LikeButton gweet={gweet} /> <LikeButton gweet={gweet} />
......
components/gweets/components/gweet-details.tsx
+ 1
− 1
View file @ 56f3237c
...@@ -58,7 +58,7 @@ export const GweetDetails = () => { ...@@ -58,7 +58,7 @@ export const GweetDetails = () => {
{/* {gweet?.quotedGweet && <QuotedGweet gweet={gweet?.quotedGweet} />} */} {/* {gweet?.quotedGweet && <QuotedGweet gweet={gweet?.quotedGweet} />} */}
</div> </div>
<div className="flex flex-col items-center flex-wrap flex-grow sm:flex-row space-y-3 sm:space-y-0"> <div className="flex flex-col items-center flex-wrap flex-grow sm:flex-row space-y-3 sm:space-y-0 justify-center">
<div className="flex-grow text-muted-foreground"> <div className="flex-grow text-muted-foreground">
<GweetCreationDate date={gweet.createdAt} /> <GweetCreationDate date={gweet.createdAt} />
</div> </div>
......
components/gweets/components/gweet.tsx
+ 3
− 3
View file @ 56f3237c
...@@ -15,10 +15,10 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => { ...@@ -15,10 +15,10 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => {
<div <div
tabIndex={0} tabIndex={0}
onClick={() => router.push(`/${gweet.author.username}/status/${gweet.id}`)} onClick={() => router.push(`/${gweet.author.username}/status/${gweet.id}`)}
className={cn(buttonVariants({ variant: "ghost" }), "flex flex-col flex-grow h-auto w-full text-left cursor-pointer items-start p-3 space-y-3")} className={cn(buttonVariants({ variant: "ghost" }), "flex flex-col flex-grow h-auto w-full text-left cursor-pointer items-start p-3")}
> >
{gweet?.replyToGweetId && ( {gweet?.replyToGweetId && (
<div> <div className="pb-3">
<span className="text-muted-foreground">Replying to </span> <span className="text-muted-foreground">Replying to </span>
<Link <Link
href={`/${gweet?.comment.author.username}`} href={`/${gweet?.comment.author.username}`}
...@@ -31,7 +31,7 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => { ...@@ -31,7 +31,7 @@ export const Gweet = ({ gweet }: { gweet: IGweet }) => {
</div> </div>
)} )}
<div className="flex flex-row h-auto w-full"> <div className="flex flex-row h-auto w-full pb-3">
<Link <Link
href={`/${gweet.author.username}`} href={`/${gweet.author.username}`}
className="h-fit" className="h-fit"
......
components/nav-header.tsx
+ 1
− 1
View file @ 56f3237c
...@@ -10,7 +10,7 @@ import { UserAccountDropdown } from "./user-nav" ...@@ -10,7 +10,7 @@ import { UserAccountDropdown } from "./user-nav"
export const Header = ({ user }: { user: User | undefined }) => { export const Header = ({ user }: { user: User | undefined }) => {
return ( return (
<header className="sticky top-0 z-50 border-b bg-background"> <header className="sticky top-0 z-50 border-b bg-background">
<div className="container flex h-16 items-center justify-between"> <div className="mx-3 md:container flex h-16 items-center justify-between">
<div className="flex gap-6 md:gap-10"> <div className="flex gap-6 md:gap-10">
<Link href="/home" className="items-center space-x-2 flex"> <Link href="/home" className="items-center space-x-2 flex">
<Button variant="ghost" size="logo"> <Button variant="ghost" size="logo">
......
components/scroll-to-top.tsx
+ 7
− 5
View file @ 56f3237c
...@@ -9,7 +9,7 @@ export default function ScrollToTop() { ...@@ -9,7 +9,7 @@ export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false) const [isVisible, setIsVisible] = useState(false)
const toggleVisibility = () => { const toggleVisibility = () => {
if (window.pageYOffset > 300) { if (window.scrollY > 300) {
setIsVisible(true) setIsVisible(true)
} else { } else {
setIsVisible(false) setIsVisible(false)
...@@ -29,9 +29,11 @@ export default function ScrollToTop() { ...@@ -29,9 +29,11 @@ export default function ScrollToTop() {
}, []) }, [])
return ( return (
<Button size="lg" onClick={scrollToTop} <div className="fixed z-50 m-3 flex justify-center">
className={cn(isVisible ? "block" : "hidden", "")}> <Button size="lg" onClick={scrollToTop}
<Icons.arrowupline className="h-3 w-3" aria-hidden="true" /> className={cn(isVisible ? "block" : "hidden", "")}>
</Button> <Icons.arrowupline className="h-3 w-3" aria-hidden="true" />
</Button>
</div>
) )
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment