Event row style improvements (#5533)

* Made full row of event type clickable, and fixed event type loader dimensions.

* Fixed skeletons for teams and workflows.

* Fixed skeleton for workflow detail page.

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
pull/5298/head^2
Jeroen Reumkens 2022-11-15 16:30:24 +01:00 committed by GitHub
parent a5249b6cb5
commit d66f3d1dc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 16 additions and 16 deletions

View File

@ -5,8 +5,8 @@ function SkeletonLoader() {
return ( return (
<SkeletonContainer> <SkeletonContainer>
<div className="mb-4 flex items-center"> <div className="mb-4 flex items-center">
<SkeletonAvatar className="h-2 w-2" /> <SkeletonAvatar className="h-8 w-8" />
<div className="space-y-1"> <div className="flex flex-col space-y-1">
<SkeletonText className="h-4 w-16" /> <SkeletonText className="h-4 w-16" />
<SkeletonText className="h-4 w-24" /> <SkeletonText className="h-4 w-24" />
</div> </div>
@ -27,17 +27,17 @@ function SkeletonItem() {
<li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6"> <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
<div className="flex-grow truncate text-sm"> <div className="flex-grow truncate text-sm">
<div> <div>
<SkeletonText className="h-[5px] w-8" /> <SkeletonText className="h-5 w-32" />
</div> </div>
<div className=""> <div className="">
<ul className="mt-2 flex space-x-4 rtl:space-x-reverse "> <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
<li className="flex items-center whitespace-nowrap"> <li className="flex items-center whitespace-nowrap">
<Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" /> <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
<SkeletonText className="h-1 w-3" /> <SkeletonText className="h-4 w-12" />
</li> </li>
<li className="flex items-center whitespace-nowrap"> <li className="flex items-center whitespace-nowrap">
<Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" /> <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
<SkeletonText className="h-1 w-4" /> <SkeletonText className="h-4 w-12" />
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -56,7 +56,7 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
return ( return (
<Link href={`/event-types/${type.id}?tabName=setup`}> <Link href={`/event-types/${type.id}?tabName=setup`}>
<a <a
className="overflow-hidden pr-4 text-sm" className="w-full overflow-hidden pr-4 text-sm"
title={`${type.title} ${type.description ? ` ${type.description}` : ""}`}> title={`${type.title} ${type.description ? ` ${type.description}` : ""}`}>
<div> <div>
<span <span

View File

@ -19,18 +19,18 @@ function SkeletonItem() {
<li className="group flex w-full items-center justify-between px-3 py-4"> <li className="group flex w-full items-center justify-between px-3 py-4">
<div className="flex-grow truncate text-sm"> <div className="flex-grow truncate text-sm">
<div className="flex justify-start space-x-2 px-2"> <div className="flex justify-start space-x-2 px-2">
<SkeletonText className="h-3 w-3 rounded-full" /> <SkeletonText className="h-10 w-10 rounded-full" />
<div className="space-y-2"> <div className="flex flex-col space-y-2">
<SkeletonText className="h-1 w-8" /> <SkeletonText className="h-4 w-32" />
<SkeletonText className="h-1 w-4" /> <SkeletonText className="h-4 w-16" />
</div> </div>
</div> </div>
</div> </div>
<div className="mt-4 hidden flex-shrink-0 pr-4 sm:mt-0 sm:ml-5 lg:flex"> <div className="mt-4 hidden flex-shrink-0 pr-4 sm:mt-0 sm:ml-5 lg:flex">
<div className="flex justify-between space-x-2 rtl:space-x-reverse"> <div className="flex justify-between space-x-2 rtl:space-x-reverse">
<SkeletonText className="h-1 w-3" /> <SkeletonText className="h-4 w-12" />
<SkeletonText className="h-1 w-1" /> <SkeletonText className="h-4 w-4" />
<SkeletonText className="h-1 w-1" /> <SkeletonText className="h-4 w-4" />
</div> </div>
</div> </div>
</li> </li>

View File

@ -3,8 +3,8 @@ import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
function SkeletonLoader() { function SkeletonLoader() {
return ( return (
<SkeletonContainer> <SkeletonContainer>
<div className="mt-20 ml-2 md:flex"> <div className="ml-2 md:flex">
<div className="mr-6 md:flex-none"> <div className="mr-6 flex flex-col md:flex-none">
<SkeletonText className="h-4 w-28" /> <SkeletonText className="h-4 w-28" />
<SkeletonText className="mt-2 mb-6 h-8 w-full md:w-64" /> <SkeletonText className="mt-2 mb-6 h-8 w-full md:w-64" />
<SkeletonText className="h-4 w-28" /> <SkeletonText className="h-4 w-28" />

View File

@ -3,7 +3,7 @@ import { SkeletonText } from "@calcom/ui/v2";
function SkeletonLoader() { function SkeletonLoader() {
return ( return (
<ul className="mt-5 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mt-20 sm:overflow-hidden"> <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />
<SkeletonItem /> <SkeletonItem />