Skip to content
This repository was archived by the owner on Apr 21, 2025. It is now read-only.

mobile item page formatting tweaks #562

Draft
0xTranqui wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

mobile item page formatting tweaks #562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba30bcc
cool ideas
0xTranqui Mar 30, 2024
e57b2bb
sublte tweeks before sharing
0xTranqui Mar 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions apps/site/app/channel/[id]/[index]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,12 @@ export default async function ItemPage({
))

return (
<Stack className="h-[calc(100dvh-var(--header-height))] md:flex-row ">
<div className="bg-[#F3F4F6] w-full h-full md:w-[78%]">{content}</div>
<Stack className="h-[calc(100dvh-(var(--header-height)))] md:flex-row ">
<div className="bg-[#F3F4F6] w-full h-[70dvh] md:h-full md:w-[78%]">
{content}
</div>
<Separator className="hidden md:block bg-border" orientation="vertical" />
{/* <div>hi</div> */}
<div className="md:overflow-y-auto md:w-[22%]">
<ItemSidebar
// @ts-ignore
Expand Down
29 changes: 15 additions & 14 deletions apps/site/components/server/ItemSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,13 @@ export function ItemSidebar({
// </div>

return (
<Stack className="p-5 h-[320px] md:h-full border-t border-border md:border-none">
<Flex className="justify-between items-center pb-[30px]">
<Typography>Info</Typography>
<Stack className="p-5 gap-y-5 md:gap-y-[30px] h-[calc(100dvh-(var(--header-height)+70dvh))] md:h-full border-t border-border md:border-none">
<Flex className="justify-between items-center">
<Typography className="hidden md:block">Info</Typography>
<div className="md:hidden">
<Typography className="truncate">{itemMetadata?.name}</Typography>
<Username id={itemContext.item.createdById} />
</div>
<Flex className="gap-x-2">
<Button variant="link" disabled={invalidPrev}>
<Link href={`/channel/${itemContext.channelId}/${prevIndex}`}>
Expand All @@ -102,23 +106,20 @@ export function ItemSidebar({
</Link>
</Button>
</Flex>
{/* <IndexInfoToggle /> */}
{/* <Link
href={`/channel/${itemContext.channelId}`}
className="underline-offset-2 transition-all hover:underline"
>
<Typography>Go to channel</Typography>
</Link> */}
</Flex>
<Flex className="md:hidden">
<AddToChannelDialog item={itemContext.item} />
</Flex>
<Stack className="justify-between md:justify-start">
<Stack className="gap-y-5">
<Stack className="hidden md:flex gap-y-5">
{/* <Stack className=""> */}
<div>
<Typography className="truncate">{itemMetadata?.name}</Typography>
<Username id={itemContext.item.createdById} />
</div>
<Typography>{'--'}</Typography>
</Stack>
<Stack className=" gap-y-[7px] pt-5 md:pt-[45px]">
<Stack className=" gap-y-[7px] md:pt-[45px]">
<Flex className="justify-between">
<Typography>Channel</Typography>
<Flex className="items-center space-x-[6px]">
Expand Down Expand Up @@ -166,12 +167,12 @@ export function ItemSidebar({
</Stack>
</Stack>

<Flex className="py-[30px]">
<Flex className="hidden md:block">
<AddToChannelDialog item={itemContext.item} />
</Flex>

{/* <Separator /> */}
<Flex className="py-[30px]">
<Flex className="pt-5 md:pt-[30px]">
<Typography>{`Index [${itemIndex}/${indexLength}]`}</Typography>
</Flex>

Expand Down