OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS cleanup, dont slice title to arbitrary 42 chars which can break column layouts

Browse Source
This commit is contained in:
shamoon 2023-10-19 23:39:59 -07:00
parent 730ed9eedc
commit 8960cd9e8c
1 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/widgets/calendar/agenda.jsx
View File

@ -7,30 +7,29 @@ import { IoMdCheckmarkCircleOutline } from "react-icons/io";
import { EventContext } from "../../utils/contexts/calendar"; import { EventContext } from "../../utils/contexts/calendar";
export function Event({ event, colorVariants, showDate = false }) { export function Event({ event, colorVariants, showDate = false }) {
const title = event.title.length > 42 ? `${event.title.slice(0, 42)}...` : event.title;
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const { i18n } = useTranslation(); const { i18n } = useTranslation();
return ( return (
<div <div
className="flex flex-row text-theme-700 dark:text-theme-200 text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1" className="flex flex-row text-theme-700 dark:text-theme-200 items-center text-xs text-left h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1"
onMouseEnter={() => setHover(!hover)} onMouseEnter={() => setHover(!hover)}
onMouseLeave={() => setHover(!hover)} onMouseLeave={() => setHover(!hover)}
> >
<span className="inline-flex items-center ml-2 w-10"> <span className="ml-2 w-10">
<span> <span>
{showDate && {showDate &&
event.date.setLocale(i18n.language).startOf("day").toLocaleString({ month: "short", day: "numeric" })} event.date.setLocale(i18n.language).startOf("day").toLocaleString({ month: "short", day: "numeric" })}
</span> </span>
</span> </span>
<span className="inline-flex items-center"> <span className="ml-2 h-2 w-2">
<span className={classNames("inline-flex h-2 w-2 m-1.5 rounded", colorVariants[event.color] ?? "gray")} /> <span className={classNames("block w-2 h-2 rounded", colorVariants[event.color] ?? "gray")} />
</span>
<span className="inline-flex flex-auto w-9/12 text-left text-xs mt-[2px] truncate text-ellipsis overflow-hidden visible">
{hover && event.additional ? event.additional : title}
</span> </span>
<div className="ml-2 h-5 text-left relative truncate" style={{ width: "70%" }}>
<div className="absolute mt-0.5 text-xs">{hover && event.additional ? event.additional : event.title}</div>
</div>
{event.isCompleted && ( {event.isCompleted && (
<span className="text-xs mr-1 mt-1 z-10"> <span className="text-xs mr-1 ml-auto z-10">
<IoMdCheckmarkCircleOutline /> <IoMdCheckmarkCircleOutline />
</span> </span>
)} )}
@ -59,7 +58,7 @@ export default function Agenda({ service, colorVariants, showDate }) {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
if (!showDate) { if (!showDate) {
return <div className="w-full text-center" />; return <div className=" text-center" />;
} }
const eventsArray = Object.keys(events) const eventsArray = Object.keys(events)
@ -72,8 +71,8 @@ export default function Agenda({ service, colorVariants, showDate }) {
if (!eventsArray.length) { if (!eventsArray.length) {
return ( return (
<div className="w-full text-center"> <div className="text-center">
<div className="p-2 w-full"> <div className="p-2 ">
<div <div
className={classNames("flex flex-col pt-1 pb-1", !eventsArray.length && !events.length && "animate-pulse")} className={classNames("flex flex-col pt-1 pb-1", !eventsArray.length && !events.length && "animate-pulse")}
> >
@ -97,16 +96,12 @@ export default function Agenda({ service, colorVariants, showDate }) {
const eventsByDay = days.map((d) => eventsArray.filter((e) => e.date.ts === d)); const eventsByDay = days.map((d) => eventsArray.filter((e) => e.date.ts === d));
return ( return (
<div className="w-full text-center"> <div className="p-2">
<div className="p-2 w-full"> <div className={classNames("flex flex-col pt-1 pb-1", !eventsArray.length && !events.length && "animate-pulse")}>
<div
className={classNames("flex flex-col pt-1 pb-1", !eventsArray.length && !events.length && "animate-pulse")}
>
{eventsByDay.map((eventsDay, i) => ( {eventsByDay.map((eventsDay, i) => (
<AgendaDay events={eventsDay} key={days[i]} colorVariants={colorVariants} /> <AgendaDay events={eventsDay} key={days[i]} colorVariants={colorVariants} />
))} ))}
</div> </div>
</div> </div>
</div>
); );
} }