Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Button cannot appear as a descendant of button #350

Merged
merged 11 commits into from
Mar 26, 2024
Merged

fix: Button cannot appear as a descendant of button #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8b72556
move buttons out of collapse trigger - News card
Xavier-Charles Mar 25, 2024
e16b59e
move buttons out of collapse trigger - Blog card
Xavier-Charles Mar 25, 2024
a08a53d
move buttons out of collapse trigger - events card
Xavier-Charles Mar 25, 2024
f66b67b
move buttons out of collapse trigger - image card
Xavier-Charles Mar 25, 2024
bf2a0a3
move buttons out of collapse trigger - podcast card
Xavier-Charles Mar 25, 2024
b4b35d7
move buttons out of collapse trigger - social card
Xavier-Charles Mar 25, 2024
6a896e2
move buttons out of collapse trigger - tvl card
Xavier-Charles Mar 25, 2024
06726ee
move buttons out of collapse trigger - video card
Xavier-Charles Mar 25, 2024
43eaa3f
move buttons out of collapse trigger - price card
Xavier-Charles Mar 25, 2024
61830c6
move buttons out of collapse trigger - gas card
Xavier-Charles Mar 25, 2024
a25dc63
make function prop optional
Xavier-Charles Mar 26, 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
113 changes: 44 additions & 69 deletions packages/frontend/src/mobile-components/feed/BlogCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,79 +34,54 @@ export const BlogCard: FC<{

return (
<FeedItemDisclosure>
{({ open }) => (
<>
<FeedItemDisclosureButton>
<div className="flex flex-col w-full">
<div className="flex flex-col">
<div className="flex items-center">
<FeedItemDisclosureButtonImage
icon={getFeedItemIcon(type)}
/>
<div className="text-primaryVariant100 fontGroup-mini leading-[18px] flex flex-wrap whitespace-nowrap">
<p className="text-primaryVariant100 fontGroup-mini leading-[18px] flex flex-wrap whitespace-nowrap">
{computeDuration(date)}
<span className="mx-1 my-0 self-center">
•
</span>{" "}
<FeedSourceInfo
name={sourceName}
img={sourceIcon}
/>{" "}
</p>
</div>
</div>
<p className="mt-2 mb-0 fontGroup-highlight line-clamp-3">
{title}
<FeedItemDisclosureButton>
<div className="flex flex-col w-full">
<div className="flex flex-col">
<div className="flex items-center">
<FeedItemDisclosureButtonImage
icon={getFeedItemIcon(type)}
/>
<div className="text-primaryVariant100 fontGroup-mini leading-[18px] flex flex-wrap whitespace-nowrap">
<p className="text-primaryVariant100 fontGroup-mini leading-[18px] flex flex-wrap whitespace-nowrap">
{computeDuration(date)}
<span className="mx-1 my-0 self-center">
•
</span>{" "}
<FeedSourceInfo
name={sourceName}
img={sourceIcon}
/>{" "}
</p>
</div>

{!open && (
<div className="flex justify-between">
<div className="flex-col">
<TagButtons
truncated
tags={tags}
onClick={() => {}}
/>
</div>
<div className="flex-col min-w-max ml-2">
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
</div>
</div>
)}
</div>
</FeedItemDisclosureButton>
<FeedItemDisclosurePanel>
<p className="m-0 text-primaryVariant100 line-clamp-4">
{shortDescription}
<p className="mt-2 mb-0 fontGroup-highlight line-clamp-3">
{title}
</p>
<ReadMoreLink url={url} />
<div className="my-2 flex justify-between">
<TagButtons tags={tags} onClick={() => {}} />
<div className="min-w-max ml-2 mt-0.5">
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
</div>
</div>
</FeedItemDisclosurePanel>
</>
)}
</div>
</div>
</FeedItemDisclosureButton>
<FeedItemDisclosurePanel>
<p className="m-0 text-primaryVariant100 line-clamp-4">
{shortDescription}
</p>
<ReadMoreLink url={url} />
</FeedItemDisclosurePanel>
<div className="flex justify-between my-2">
<div className="flex-col">
<TagButtons truncated tags={tags} onClick={() => {}} />
</div>
<div className="flex-col min-w-max ml-2">
<ActionButtons
isAuthenticated={isAuthenticated}
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isLiked={item.isLiked}
/>
</div>
</div>
</FeedItemDisclosure>
);
};
59 changes: 22 additions & 37 deletions packages/frontend/src/mobile-components/feed/EventCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,28 +110,6 @@ export const EventCard: FC<{
</div>
</div>
</div>
{!open && (
<div className="flex justify-between">
<div className="flex-col">
<TagButton
className="bg-[#C1DF91] text-background mt-3"
name={category}
onClick={() => {}}
/>
</div>
<div className="flex-col min-w-max ml-2">
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
</div>
</div>
)}
</div>
</FeedItemDisclosureButton>
<FeedItemDisclosurePanel>
Expand Down Expand Up @@ -160,29 +138,36 @@ export const EventCard: FC<{
className="m-0 text-primaryVariant100 prose-p:text-primaryVariant100 prose-a:text-secondaryOrange50 line-clamp-4"
/>
<ReadMoreLink url={url} />

<div className="my-2 flex justify-between">
<div className="flex flex-col">
</FeedItemDisclosurePanel>
<div className="flex justify-between my-2">
<div className="flex-col">
<div className="flex-col">
<TagButton
className="bg-[#C1DF91] text-background mt-3"
name={category}
onClick={() => {}}
/>
<TagButtons tags={tags} onClick={() => {}} />
</div>
<div className="min-w-max ml-2 mt-0.5">
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
{open && (
<TagButtons
truncated
tags={tags}
onClick={() => {}}
/>
</div>
)}
</div>
</FeedItemDisclosurePanel>
<div className="flex-col min-w-max ml-2">
<ActionButtons
isAuthenticated={isAuthenticated}
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isLiked={item.isLiked}
/>
</div>
</div>
</>
)}
</FeedItemDisclosure>
Expand Down
15 changes: 11 additions & 4 deletions packages/frontend/src/mobile-components/feed/FeedElements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,18 @@ export const TagButtons: FC<{
);

export const FeedItemDisclosure: FC<{
children: ({ open }: { open: boolean }) => JSX.Element;
children: (({ open }: { open: boolean }) => JSX.Element) | ReactNode;
}> = ({ children }) => {
return (
<div className="border-b border-borderLine">
<Disclosure>{({ open }) => children({ open })}</Disclosure>
<Disclosure>
{({ open }) => {
if (typeof children === "function") {
return children({ open });
}
return <span>{children}</span>;
}}
</Disclosure>
</div>
);
};
Expand Down Expand Up @@ -114,7 +121,7 @@ export const FeedItemDisclosureButton: FC<{
children?: ReactNode;
}> = ({ children }) => {
return (
<Disclosure.Button className="flex w-full justify-between rounded-lg py-4 text-left text-sm font-medium focus:outline-none cursor-pointer">
<Disclosure.Button className="flex w-full justify-between rounded-lg pt-4 text-left text-sm font-medium focus:outline-none cursor-pointer">
{children}
</Disclosure.Button>
);
Expand Down Expand Up @@ -142,7 +149,7 @@ export const FeedItemDisclosurePanel: FC<{
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel className="pt-2 text-primaryVariant100 fontGroup-normal">
<Disclosure.Panel className="pt-6 text-primaryVariant100 fontGroup-normal">
{children}
</Disclosure.Panel>
</Transition>
Expand Down
58 changes: 20 additions & 38 deletions packages/frontend/src/mobile-components/feed/GasCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,30 +87,6 @@ export const GasCard: FC<{
/>
</div>
</div>
<div className="flex justify-between">
<div className="flex-col">
{!open && (
<TagButtons
truncated
tags={tags}
onClick={() => {}}
/>
)}
</div>
<div className="flex-col min-w-max ml-2">
{!open && (
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
)}
</div>
</div>
</div>
</FeedItemDisclosureButton>
<FeedItemDisclosurePanel>
Expand All @@ -134,21 +110,27 @@ export const GasCard: FC<{
isCard
/>
</div>
<div className="my-2 flex justify-between">
<TagButtons tags={tags} onClick={() => {}} />
<div className="min-w-max ml-2 mt-0.5">
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
</div>
</div>
</FeedItemDisclosurePanel>
<div className="flex justify-between my-2">
<div className="flex-col">
<TagButtons
truncated
tags={tags}
onClick={() => {}}
/>
</div>
<div className="flex-col min-w-max ml-2">
<ActionButtons
isAuthenticated={isAuthenticated}
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isLiked={item.isLiked}
/>
</div>
</div>
</>
)}
</FeedItemDisclosure>
Expand Down
58 changes: 20 additions & 38 deletions packages/frontend/src/mobile-components/feed/ImageCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,30 +68,6 @@ export const ImageCard: FC<{
</div>
</div>
</div>
<div className="flex justify-between">
<div className="flex-col">
{!open && (
<TagButtons
truncated
tags={tags}
onClick={() => {}}
/>
)}
</div>
<div className="flex-col min-w-max ml-2">
{!open && (
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
)}
</div>
</div>
</div>
</FeedItemDisclosureButton>
<FeedItemDisclosurePanel>
Expand All @@ -105,21 +81,27 @@ export const ImageCard: FC<{
{shortDescription}
</p>
<ReadMoreLink url={url} />
<div className="my-2 flex justify-between">
<TagButtons tags={tags} onClick={() => {}} />
<div className="min-w-max ml-2 mt-0.5">
<ActionButtons
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isAuthenticated={isAuthenticated}
isLiked={item.isLiked}
/>
</div>
</div>
</FeedItemDisclosurePanel>
<div className="flex justify-between my-2">
<div className="flex-col">
<TagButtons
truncated
tags={tags}
onClick={() => {}}
/>
</div>
<div className="flex-col min-w-max ml-2">
<ActionButtons
isAuthenticated={isAuthenticated}
onLike={onLike}
onCommentClick={onLike}
onShare={onShare}
likes={likes}
comments={comments}
isLiked={item.isLiked}
/>
</div>
</div>
</>
)}
</FeedItemDisclosure>
Expand Down
Loading
Loading