commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

Improved event description truncation (actually removed it mostly) (#5374)

Browse Source 
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Jeroen Reumkens
2022-11-15 08:36:20 +00:00
committed by GitHub
co-authored by Peer Richelsen
parent f822177788
commit 02e3738a17
4 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/pages/event-types/index.tsx
+6 -6
View File
@@ -56,11 +56,11 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
return (
<Link href={`/event-types/${type.id}?tabName=setup`}>
<a
className="flex-grow truncate text-sm"
className="overflow-hidden pr-4 text-sm"
title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
<div>
<span
className="truncate font-semibold text-gray-700 ltr:mr-1 rtl:ml-1"
className="font-semibold text-gray-700 ltr:mr-1 rtl:ml-1"
data-testid={"event-type-title-" + type.id}>
{type.title}
</span>
@@ -252,8 +252,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
const calLink = `${CAL_URL}/${embedLink}`;
return (
<li key={type.id}>
<div className="flex items-center justify-between hover:bg-neutral-50">
<div className="group flex w-full items-center justify-between px-4 py-4 pr-0 sm:px-6">
<div className="flex w-full items-center justify-between hover:bg-neutral-50">
<div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
{!(firstItem && firstItem.id === type.id) && (
<button
className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
@@ -270,7 +270,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
</button>
)}
<MemoizedItem type={type} group={group} readOnly={readOnly} />
<div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
<div className="mt-4 hidden sm:mt-0 sm:flex">
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
{type.users?.length > 1 && (
<AvatarGroup
@@ -391,7 +391,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
</div>
</div>
</div>
<div className="mr-5 flex flex-shrink-0 sm:hidden">
<div className="min-w-9 mr-5 flex sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
<Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
apps/web/playwright/event-types.e2e.ts
+4 -4
View File
@@ -22,7 +22,7 @@ test.describe("Event Types tests", () => {
});
test("has at least 2 events", async ({ page }) => {
const $eventTypes = page.locator("[data-testid=event-types] > *");
const $eventTypes = page.locator("[data-testid=event-types] > li a");
const count = await $eventTypes.count();
expect(count).toBeGreaterThanOrEqual(2);
});
@@ -110,7 +110,7 @@ test.describe("Event Types tests", () => {
expect(formSlug).toBe(firstSlug);
});
test("edit first event", async ({ page }) => {
const $eventTypes = page.locator("[data-testid=event-types] > *");
const $eventTypes = page.locator("[data-testid=event-types] > li a");
const firstEventTypeElement = $eventTypes.first();
await firstEventTypeElement.click();
await page.waitForNavigation({
@@ -134,13 +134,13 @@ test.describe("Event Types tests", () => {
});
test("has at least 2 events where first is enabled", async ({ page }) => {
const $eventTypes = page.locator("[data-testid=event-types] > *");
const $eventTypes = page.locator("[data-testid=event-types] > li a");
const count = await $eventTypes.count();
expect(count).toBeGreaterThanOrEqual(2);
});
test("edit first event", async ({ page }) => {
const $eventTypes = page.locator("[data-testid=event-types] > *");
const $eventTypes = page.locator("[data-testid=event-types] > li a");
const firstEventTypeElement = $eventTypes.first();
await firstEventTypeElement.click();
await page.waitForNavigation({
apps/web/playwright/hash-my-url.e2e.ts
+2 -2
View File
@@ -18,7 +18,7 @@ test.describe("hash my url", () => {
await page.goto("/event-types");
// We wait until loading is finished
await page.waitForSelector('[data-testid="event-types"]');
await page.locator('//ul[@data-testid="event-types"]/li[1]').click();
await page.locator("ul[data-testid=event-types] > li a").first().click();
// We wait for the page to load
await page.locator(".primary-navigation >> text=Advanced").click();
// ignore if it is already checked, and click if unchecked
@@ -45,7 +45,7 @@ test.describe("hash my url", () => {
await page.goto("/event-types");
// We wait until loading is finished
await page.waitForSelector('[data-testid="event-types"]');
await page.click('//ul[@data-testid="event-types"]/li[1]');
await page.locator("ul[data-testid=event-types] > li a").first().click();
// We wait for the page to load
await page.locator(".primary-navigation >> text=Advanced").click();
// we wait for the hashedLink setting to load
packages/ui/v2/modules/event-types/EventTypeDescription.tsx
+4 -4
View File
@@ -35,10 +35,10 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
<>
<div className={classNames("dark:text-darkgray-800 text-neutral-500", className)}>
{eventType.description && (
<h2 className="dark:text-darkgray-800 max-w-[200px] overflow-hidden text-ellipsis py-2 text-sm text-gray-600 opacity-60 sm:max-w-[500px]">
{eventType.description.substring(0, 100)}
{eventType.description.length > 100 && "..."}
</h2>
<p className="dark:text-darkgray-800 max-w-[280px] break-words py-2 text-sm text-gray-600 opacity-60 sm:max-w-[500px]">
{eventType.description.substring(0, 300)}
{eventType.description.length > 300 && "..."}
</p>
)}
<ul className="mt-2 flex flex-wrap space-x-2 sm:flex-nowrap">
<li>