git.iko.soy/urbit.org
on master help sign in
EventPreview: truncate description to one line
b7fe8bcMatilde Park
components/EventPreview.js+3−37
compare with master
unifiedsplit
@@ -15,42 +15,6 @@ import {
15 formatTimeZone,
15 formatTimeZone,
16} from "../lib/lib";
16} from "../lib/lib";
17
17
18−// JAL(2021.9.13) Couldn't quite get this to work properly. There's a trailing
19−// "and"
20−//
21−// function GuestList({ guests, textClass }) {
22−
23−// const renderGuests = guests?.length > 2 ? guests?.slice(0,2) : guests;
24−// const noRenderGuestsCount = guests?.slice(2).length;
25−
26−// return (
27−// <p className={textClass + " type-sub"}>
28−// <b>
29−// {renderGuests?.length > 1 ? "With guests " : "With guest "}
30−// </b>
31−// <ReadableList>
32−// {renderGuests?.map((guest, index) => (
33−// <>
34−// <Person
35−// key={`${guest.name}-${guest.patp}`}
36−// nameClassNames={textClass}
37−// patpClassNames={textClass}
38−// name={guest.name}
39−// patp={guest.patp}
40−// />
41−// {renderGuests?.length > 1 ? <span>, </span> : <></>}
42−// </>
43−// ))}
44−// {noRenderGuestsCount > 1 ?
45−// <Name>{noRenderGuestsCount} more </Name>
46−// :
47−// <></>
48−// }
49−// </ReadableList>
50−// </p>
51−// );
52−// }
53−
54export default function EventPreview({ event, className, big }) {
18export default function EventPreview({ event, className, big }) {
55 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
19 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
56 const grayText = event?.dark ? "text-washedWhite" : "text-wall-400";
20 const grayText = event?.dark ? "text-washedWhite" : "text-wall-400";
@@ -83,7 +47,9 @@ export default function EventPreview({ event, className, big }) {
83 } flex-col h-full`}
47 } flex-col h-full`}
84 >
48 >
85 <h3 className={`${blackText} mb-2`}>{event.title}</h3>
49 <h3 className={`${blackText} mb-2`}>{event.title}</h3>
50+ <p className={blackText + " truncate text-sm"}>
86− <p className={blackText + ""}>{event.description}</p>
51+ {event.description}
52+ </p>
87 </div>
53 </div>
88
54
89 <div className="absolute p-6 left-0 bottom-0 w-full pr-32">
55 <div className="absolute p-6 left-0 bottom-0 w-full pr-32">