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

Add Dark mode support to listings and also fix functionality to next/previous buttons #258

Merged
merged 4 commits into from
Aug 6, 2024
Merged

Add Dark mode support to listings and also fix functionality to next/previous buttons #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f72c07
Make dark mode version of ListingGridCard
chennisden Aug 6, 2024
47d16d9
Make previous/next buttons on left/right of screen
chennisden Aug 6, 2024
9abb4d4
Fix Listings button functionality
chennisden Aug 6, 2024
c8627a8
Add dark variants for Previous/Next buttons
chennisden Aug 6, 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
4 changes: 1 addition & 3 deletions frontend/src/components/Image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
const Image = () => {
return (
<div>
<div className="animate-pulse bg-gray-200 w-full aspect-square"></div>
</div>
<div className="animate-pulse bg-gray-200 dark:bg-gray-800 w-full aspect-square" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think there was a reason i wasn't doing this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going to assume it's because backgrounds might be white

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think either way dark mode listings is going to look a little silly; it's just a question of which looks more silly. A question of personal taste, I suppose.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh no, it had to do with getting it to actually be a square - if i removed it then the div didn't render as a square correctly

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With #261 I think this is by far the right thing to do.

);
};

Expand Down
9 changes: 5 additions & 4 deletions frontend/src/components/listings/ListingGridCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const ListingGridCard = (props: Props) => {
className={clsx(
"transition-transform duration-100 ease-in-out transform cursor-pointer",
"flex flex-col max-w-sm rounded material-card bg-white justify-between",
"dark:bg-gray-900",
hovering ? "scale-105" : "scale-100",
)}
onMouseEnter={() => setHovering(true)}
Expand All @@ -43,21 +44,21 @@ const ListingGridCard = (props: Props) => {
)}
<div className="px-4 py-4 h-full">
<CardHeader>
<CardTitle className="text-gray-500 text-xl min-h-6">
<CardTitle className="text-gray-500 dark:text-gray-300 text-xl min-h-6">
{listing ? (
listing.name
) : (
<div className="animate-pulse bg-gray-200 h-6 w-1/2 mb-2"></div>
<div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-6 w-1/2 mb-2"></div>
)}
</CardTitle>
</CardHeader>
<CardContent className="text-gray-500 max-h-32 overflow-hidden">
<CardContent className="text-gray-500 dark:text-gray-300 max-h-32 overflow-hidden">
{listing ? (
listing?.description && (
<RenderDescription description={listing?.description} />
)
) : (
<div className="animate-pulse bg-gray-200 h-6 w-full"></div>
<div className="animate-pulse bg-gray-200 dark:bg-gray-700 h-6 w-full"></div>
)}
</CardContent>
</div>
Expand Down
36 changes: 17 additions & 19 deletions frontend/src/pages/Browse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Browse = () => {

useEffect(() => {
handleSearch();
}, [debouncedSearch]);
}, [debouncedSearch, pageNumber]);

const handleSearch = async () => {
setListingIds(null);
Expand Down Expand Up @@ -87,24 +87,22 @@ const Browse = () => {

{hasButton && (
<div className="flex justify-center mt-4">
<div className="inline-flex">
{prevButton && (
<button
className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"
onClick={() => navigate(`/browse/${pageNumber - 1}`)}
>
Previous
</button>
)}
{nextButton && (
<button
className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r"
onClick={() => navigate(`/browse/${pageNumber + 1}`)}
>
Next
</button>
)}
</div>
{prevButton && (
<button
className="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-l mr-auto"
onClick={() => navigate(`/browse/?page=${pageNumber - 1}`)}
>
Previous
</button>
)}
{nextButton && (
<button
className="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-300 font-bold py-2 px-4 rounded-r ml-auto"
onClick={() => navigate(`/browse/?page=${pageNumber + 1}`)}
>
Next
</button>
)}
</div>
)}
</div>
Expand Down
Loading