Skip to content

Fix/truck profile nav UI #171

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

Draft
Yizhen-Zheng wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Fix/truck profile nav UI #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1accf42
cleanup: comment out all console log
Yizhen-Zheng Mar 24, 2025
ea744d2
fix: desktop food truck profile
Yizhen-Zheng Apr 20, 2025
e55f120
fix: add top nav bar on desktop
Yizhen-Zheng Apr 20, 2025
26ad2f8
fix: stylize nav bar desktop
Yizhen-Zheng Apr 20, 2025
fb711b9
fix: stylize nav bar desktop, change style
Yizhen-Zheng Apr 20, 2025
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: 3 additions & 1 deletion app/truck-profile/[truckId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ export default async function TruckProfile({

return (
<>
<FoodTruckProfile truckId={truckId} />
<div className="md:flex md:justify-center md:items-center md:min-h-screen">
<FoodTruckProfile truckId={truckId} />
</div>
</>
);
}
26 changes: 13 additions & 13 deletions components/food-truck/food-truck-profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,19 +150,19 @@ export default function FoodTruckProfile({ truckId }: FoodTruckProfileProps) {
}, [sightings]);

return (
<div className="p-3 min-h-screen">
<div className="p-3 min-h-screen md:w-[768px] md:min-w-[768px] md:flex md:flex-col md:items-center ">
{foodTruck && (
<div className="relative rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary width-full">
<div className="relative rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary width-full md:w-full md:h-[55svh]">
<Image
className="h-[200px] object-cover"
className="h-[200px] object-cover md:h-4/5 md:w-full"
src={foodTruck.avatar as string}
alt="Picture of a food truck"
width={600}
height={600}
></Image>

<div className="flex flex-row">
<div className="px-3 py-2 truncate">
<div className="flex flex-row md:bottom-0 md:flex md:h-1/5">
<div className="px-3 py-2 truncate md:mt-1">
<h2 className="text-xl font-semibold truncate">
{foodTruck.name}
</h2>
Expand Down Expand Up @@ -231,12 +231,12 @@ export default function FoodTruckProfile({ truckId }: FoodTruckProfileProps) {
</ul>
</div>
) : (
<div className="mt-4 text-sm ml-2">
<div className="mt-4 text-sm ml-2 md:w-full">
Insufficient data to calculate chance
</div>
)}

<div className="border-b border-gray-200 mt-4">
<div className="border-b border-gray-200 mt-4 md:w-full">
<nav className="flex -mb-px">
{["reviews", "sightings"].map((tab) => (
<button
Expand All @@ -255,29 +255,29 @@ export default function FoodTruckProfile({ truckId }: FoodTruckProfileProps) {
</div>

{/* Reviews Tab */}
<div className="pt-2">
<div className="pt-2 md:w-full md:h-[40vh] ">
{activeTab === "reviews" && (
<>
<div className="flex">
<div className="flex md:mt-1 md:mb-1 ">
<h1
className={`${montserrat.className} text-2xl text-primary tracking-tight`}
className={`${montserrat.className} text-2xl text-primary tracking-tight `}
>
<strong>Recent Reviews</strong>
</h1>
<button
className="bg-primary p-2 mr-2 text-primary-foreground rounded-xl flex-none w-9 h-9 flex justify-center items-center ml-auto mb-2"
className="bg-primary p-2 mr-2 text-primary-foreground rounded-xl flex-none w-9 h-9 flex justify-center items-center ml-auto mb-2 md:w-auto"
onClick={() => {
if (!user) {
return router.push("/sign-in?error=Not signed in");
}

handleToggleAddReview();
}}
>
<p className=" hidden md:mr-2 md:flex">Add Review</p>
<IoCreateOutline size={24} />
</button>
</div>
<div className="grid grid-cols-1 gap-y-3">
<div className="grid grid-cols-1 gap-y-3 ">
{reviews.length > 0 ? (
reviews.map((review) => (
<ReviewCard key={review.id} reviewsData={review} />
Expand Down
6 changes: 3 additions & 3 deletions components/food-truck/reviews-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ export default function ReviewCard({ reviewsData }: ReviewCardProps) {
</div>
</Link>
) : (
<div className="rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary">
<div className="flex flex-col">
<div className="rounded-xl bg-background overflow-clip shadow-md ring-1 ring-primary relative ">
<div className="flex flex-col ">
<div className="p-2">
<StarRating rating={reviewsData.rating} isClickable={false} />
<p className="my-2">{reviewsData.content}</p>
</div>
<Image
className="h-[300px] object-cover"
className="h-[300px] object-cover md:w-full md:h-[55vh]"
src={reviewsData.image}
alt="Picture of a food truck"
width={600}
Expand Down
2 changes: 1 addition & 1 deletion components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function Header({ user }: HeaderProps) {
return (
<>
<button
className="fixed top-3 right-2 z-30 text-gray-700 text-2xl border-2 border-primary bg-muted rounded-xl text-primary w-10 h-10 mr-[3px] flex justify-center items-center"
className="fixed top-3 right-2 z-30 text-gray-700 text-2xl border-2 border-primary bg-muted rounded-xl text-primary w-10 h-10 mr-[3px] flex justify-center items-center md:hidden"
onClick={handleToggle}
>
{!isDisplayed ? <LuMenu /> : <LuX />}
Expand Down
8 changes: 5 additions & 3 deletions components/logout-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ export default function LogoutButton({ handleToggle }: LogoutButtonProps) {
signOutAction();
handleToggle();
}}
className="flex font-semibold items-center w-48 h-12 p-3 mt-3 last:mb-4"
className="flex font-semibold items-center w-48 h-12 p-3 mt-3 last:mb-4, md:last:mb-0 md:mt-0"
>
<LuLogOut size={26} />
<p className="ml-2">Logout</p>
<div className="flex font-semibold items-center w-48 h-9 p-3 mt-3 md:max-w-[36] md:justify-center md:p-0 md:rounded-xl md:mb-2 md:mt-2">
<LuLogOut size={26} />
<p className="ml-2 ">Logout</p>
</div>
</button>
);
}
38 changes: 20 additions & 18 deletions components/map/map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,9 @@ export default function Map() {
// -----Effect-----
//initial display markers
useEffect(() => {
if (!initialSightingLoaded && map && isLoaded) {
if (!initialSightingLoaded && map && isLoaded && filterRef.current) {
if (initialSightingId && !isNaN(initialSightingId)) {
console.log(initialSightingId);
displayInitSighting(
initialSightingId,
map,
Expand All @@ -164,23 +165,24 @@ export default function Map() {
);
}
if (initialDisplay === "active") {
if (!displaySightingsMarker) {
const displayActiveAtInit = async () => {
const data = await getSightingActiveInLastWeek();
if (data instanceof PostgrestError) {
console.error(data);
return;
}
makeSightingMarkerUsingSighting(
map as google.maps.Map,
setSighting,
setSelectedSighting,
data
);
};
displayActiveAtInit();
setDisplaySightingsMarker(true);
}
filterRef.current.sightings();
// if (!displaySightingsMarker) {
// const displayActiveAtInit = async () => {
// const data = await getSightingActiveInLastWeek();
// if (data instanceof PostgrestError) {
// console.error(data);
// return;
// }
// makeSightingMarkerUsingSighting(
// map as google.maps.Map,
// setSighting,
// setSelectedSighting,
// data
// );
// };
// displayActiveAtInit();
// setDisplaySightingsMarker(true);
// }
}
setInitialSightingLoaded(true);
}
Expand Down
19 changes: 12 additions & 7 deletions components/nav-button-mobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,19 @@ export default function NavButtonMobile({
const pathname = usePathname();

const Icon = NavButton.icon;

// return differently for map button
const isMap = NavButton.href.toString().includes("/truck-map");
return (
<>
{NavButton.href !== "/truck-map" ? (
{!isMap ? (
<Link
onClick={handleToggle}
href={NavButton.href}
className={`mt-${NavButton.marginTop} last:mb-4`}
className={`mt-${NavButton.marginTop} last:mb-4 md:last:mb-0 md:mt-0 `}
>
<div
className={clsx(
"flex font-semibold items-center w-48 h-12 p-3 mt-3",
"flex font-semibold items-center w-48 h-12 p-3 mt-3 md:max-w-[36] md:justify-center md:p-0 md:rounded-xl md:mb-2 md:mt-2",
{
"bg-primary text-background": pathname === NavButton.href,
}
Expand All @@ -38,12 +39,16 @@ export default function NavButtonMobile({
</div>
</Link>
) : (
<a onClick={handleToggle} href={NavButton.href}>
<a
onClick={handleToggle}
href={NavButton.href.toString()}
className=" "
>
<div
className={clsx(
"flex font-semibold items-center w-48 h-12 p-3 mt-3",
"flex font-semibold items-center w-48 h-12 p-3 mt-3 md:max-w-1/5 md:justify-center md:rounded-xl md:mb-2 md:mt-2 ",
{
"bg-primary text-background": pathname === NavButton.href,
"bg-primary text-background": pathname.includes("/truck-map"),
}
)}
>
Expand Down
7 changes: 5 additions & 2 deletions components/sidebar-mobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,16 @@ export default function SidebarMobile({
"fixed top-0 w-full h-full bg-black bg-opacity-50 z-20",
{
hidden: !isDisplayed,
}
},
"md:hidden"
)}
></div>
<div
className={clsx(
"fixed top-0 right-0 translate-x-0 flex flex-col border-l-[1.5px] border-primary w-48 h-full pt-16 bg-muted transition-transform duration-300 z-20",
{ "translate-x-48": !isDisplayed }
{ "translate-x-48": !isDisplayed },

"md:absolute md:flex-row md:w-4/5 md:max-w-3/4 md:h-16 md:pt-0 md:border-l-0 md:bg-transparent md:translate-x-0 md:items-center md:justify-end md:top-0 md:border-0 md:mr-2"
)}
>
{/* creates a button for each button passed to the component */}
Expand Down