Skip to content

Commit 8374d59

Browse files
flovflov
committed
🐛 Frontend bug fixes
1 parent f8d469a commit 8374d59

File tree

6 files changed

+46
-50
lines changed

6 files changed

+46
-50
lines changed

‎pages/trips/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ const Index: FC<{
192192
)}
193193
/>
194194

195-
<div className="relative">
195+
<div className={`relative ${isShowingMap ? 'visible' : 'invisible'}`}>
196196
{!!bounds && (
197197
<Button
198198
color="light"

‎src/components/HitchhikingTrip.tsx

+2-15
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import ExperienceCircle from './helpers/ExperienceCircle';
2323
import { createTripComment } from '../db/comments';
2424
import CountryFlags from './helpers/CountryFlags';
2525
import { TagsForRides, TagsForRide } from './Trips/TagsForRide';
26+
import { RideCardHeader } from './Trips/RideCard';
2627

2728
export function HitchhikingTrip({
2829
user,
@@ -131,21 +132,7 @@ export function HitchhikingTrip({
131132
<Fragment key={`ride${index}`}>
132133
{ride.story && (
133134
<>
134-
<div className="flex items-center gap-2">
135-
<Tooltip content={`${ride.experience} Experience`}>
136-
<ExperienceCircle experience={ride.experience} size={3} />
137-
</Tooltip>
138-
<div className="flex items-center gap-2">
139-
<TagsForRide ride={ride} />
140-
</div>
141-
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
142-
<Link href={`/trips/${trip.to_param}`}>
143-
{ride.title
144-
? ride.title
145-
: `${getOrdinalNumber(ride.number)} ride`}
146-
</Link>
147-
</h2>
148-
</div>
135+
<RideCardHeader ride={ride} trip_param={trip.to_param} />
149136
{ride.story && (
150137
<p className="mt-1 mb-5 font-light text-gray-500 dark:text-gray-400">
151138
{ride.story}

‎src/components/Trips/RideCard.tsx

+40-27
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,45 @@ import ExperienceCircle from '../helpers/ExperienceCircle';
88
import LikeRide from '../helpers/LikeRide';
99
import TagsForRide from './TagsForRide';
1010

11+
export const RideCardHeader: FC<{
12+
ride: Ride;
13+
trip_param: string;
14+
}> = ({ ride, trip_param }) => {
15+
return (
16+
<div className="flex items-center justify-between mb-2">
17+
<div className="flex items-center gap-2">
18+
<Badge size="xs" color="purple">
19+
{getOrdinalNumber(ride.number)}
20+
</Badge>
21+
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
22+
<Link href={`/trips/${trip_param}`}>{ride.title}</Link>
23+
</h2>
24+
</div>
25+
<div className="flex items-center overflow-x-scroll gap-2">
26+
<div className="flex items-center gap-2">
27+
<TagsForRide ride={ride} />
28+
</div>
29+
{ride.vehicle && vehicleToIcon(ride.vehicle)}
30+
{ride.waiting_time && (
31+
<Tooltip content="Waiting time">
32+
<Badge size="xs" color="purple">
33+
{ride.waiting_time}
34+
</Badge>
35+
</Tooltip>
36+
)}
37+
<Tooltip
38+
content={`${getOrdinalNumber(ride.number)} Ride, ${
39+
ride.experience
40+
} Experience`}
41+
>
42+
<ExperienceCircle experience={ride.experience} size={4} />
43+
</Tooltip>
44+
<LikeRide ride={ride} />
45+
</div>
46+
</div>
47+
);
48+
};
49+
1150
const RideCard: FC<{ ride: Ride; trip_param: string }> = ({
1251
ride,
1352
trip_param,
@@ -16,33 +55,7 @@ const RideCard: FC<{ ride: Ride; trip_param: string }> = ({
1655
<Fragment>
1756
{ride.story && (
1857
<>
19-
<div className="flex items-center justify-between mb-2">
20-
<div className="flex items-center gap-2">
21-
<Badge size="xs" color="purple">
22-
{getOrdinalNumber(ride.number)}
23-
</Badge>
24-
<h2 className="text-xl font-bold text-gray-900 dark:text-white">
25-
<Link href={`/trips/${trip_param}`}>{ride.title}</Link>
26-
</h2>
27-
</div>
28-
<div className="flex items-center gap-2">
29-
{ride.vehicle && vehicleToIcon(ride.vehicle)}
30-
<Tooltip
31-
content={`${getOrdinalNumber(ride.number)} Ride, ${
32-
ride.experience
33-
} Experience`}
34-
>
35-
<ExperienceCircle experience={ride.experience} size={4} />
36-
</Tooltip>
37-
<LikeRide ride={ride} />
38-
</div>
39-
</div>
40-
<div className="flex items-center overflow-x-scroll gap-2">
41-
{ride.tags.map((tag, index) => (
42-
<TagsForRide ride={ride} key={`tag${index}`} />
43-
))}
44-
</div>
45-
58+
<RideCardHeader ride={ride} trip_param={trip_param} />
4659
{ride.story && (
4760
<p className="mt-1 mb-5 font-light text-gray-500 dark:text-gray-400">
4861
{ride.story}

‎src/components/Trips/Skeleton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const Skeleton: FC = () => {
44
return (
55
<div
66
role="status"
7-
className="max-w-sm p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-700"
7+
className="p-4 border border-gray-200 rounded shadow animate-pulse md:p-6 dark:border-gray-700"
88
>
99
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
1010
<div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>

‎src/components/Trips/StoryCard.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@ import { FC, Fragment } from 'react';
22
import { Trip } from '../../types';
33
import HitchhikedBy from '../helpers/HitchhikedBy';
44
import RideCard from './RideCard';
5-
import { TagsForRides } from './TagsForRide';
65
import TripHeadline from './TripHeadline';
76

87
const StoryCard: FC<{ trip: Trip }> = ({ trip }) => {
98
return (
109
<Fragment>
1110
<TripHeadline trip={trip} />
12-
<div className="mb-4">
11+
<div className="mb-2">
1312
<HitchhikedBy trip={trip} />
14-
<div className="flex items-center mt-2 overflow-x-auto gap-2 dark:text-white">
15-
<TagsForRides rides={trip.rides} />
16-
</div>
1713
</div>
1814

1915
{trip.rides.map((ride, index) => (

‎styles/globals.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ nav a { text-decoration: none; }
8888
height: 0;
8989
position: absolute;
9090
/* The max width of the info window. */
91-
width: 400px;
91+
width: 200px;
9292

9393
}
9494

0 commit comments

Comments
 (0)