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

fix: styles for the schedule component, make it mobile-friendly (#15178)

Browse Source 
* fix styles for the schedule component, make it mobile-friendly

* CR changes

* no need that condition
This commit is contained in:
Olga Stogova authored and GitHub committed 2024-05-24 11:06:40 +00:00
1 parent ffe6a46e66
commit 58e6f18594
1 file changed
+16 -15
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/schedules/components/Schedule.tsx
+16 -15
View File
@@ -74,7 +74,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
return (
<div
className={classNames(
"mb-4 flex w-full flex-col gap-4 last:mb-0 sm:flex-row sm:px-0",
"flex w-full flex-col gap-4 last:mb-0 sm:flex-row sm:gap-6 sm:px-0",
className?.scheduleDay
)}
data-testid={weekday}>
@@ -102,8 +102,9 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
</div>
</div>
<>
{watchDayRange ? (
<div className="flex sm:ml-2">
{!watchDayRange && <SkeletonText className="ml-1 mt-2.5 h-6 w-48" />}
{watchDayRange.length > 0 && (
<div className="flex sm:gap-2">
<DayRanges
userTimeFormat={userTimeFormat}
labels={labels}
@@ -115,10 +116,8 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
timeRangeField: className?.timeRangeField,
}}
/>
{!!watchDayRange.length && !disabled && <div className="block">{CopyButton}</div>}
{!disabled && <div className="block">{CopyButton}</div>}
</div>
) : (
<SkeletonText className="ml-1 mt-2.5 h-6 w-48" />
)}
</>
</div>
@@ -215,7 +214,7 @@ export const ScheduleComponent = <
const { i18n } = useLocale();
return (
<div className={classNames("p-4", className?.schedule)}>
<div className={classNames("flex flex-col gap-4 p-2 sm:p-4", className?.schedule)}>
{/* First iterate for each day */}
{weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
const weekdayIndex = (num + weekStart) % 7;
@@ -271,11 +270,13 @@ export const DayRanges = <TFieldValues extends FieldValues>({
name,
});
if (!fields.length) return null;
return (
<div className={classNames("", className?.dayRanges)}>
<div className={classNames("flex flex-col gap-2", className?.dayRanges)}>
{fields.map((field, index: number) => (
<Fragment key={field.id}>
<div className="mb-2 flex last:mb-0">
<div className="flex gap-1 last:mb-0 sm:gap-2">
<Controller
name={`${name}.${index}`}
render={({ field }) => (
@@ -291,7 +292,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
disabled={disabled}
data-testid="add-time-availability"
tooltip={labels?.addTime ?? t("add_time_availability")}
className="text-default mx-2"
className="text-default"
type="button"
color="minimal"
variant="icon"
@@ -314,7 +315,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
/>
)}
{index !== 0 && (
<RemoveTimeButton index={index} remove={remove} className="text-default mx-2 border-none" />
<RemoveTimeButton index={index} remove={remove} className="text-default border-none" />
)}
</div>
</Fragment>
@@ -364,10 +365,10 @@ const TimeRangeField = ({
} & ControllerRenderProps) => {
// this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
return (
<div className={classNames("flex flex-row gap-1", className)}>
<div className={classNames("flex flex-row gap-2 sm:gap-3", className)}>
<LazySelect
userTimeFormat={userTimeFormat}
className="flex w-[100px]"
className="block w-[90px] sm:w-[100px]"
isDisabled={disabled}
value={value.start}
menuPlacement="bottom"
@@ -376,10 +377,10 @@ const TimeRangeField = ({
onChange({ ...value, start: new Date(option?.value as number) });
}}
/>
<span className="text-default mx-2 w-2 self-center"> - </span>
<span className="text-default w-2 self-center"> - </span>
<LazySelect
userTimeFormat={userTimeFormat}
className="inline-block w-[100px] rounded-md"
className="block w-[90px] rounded-md sm:w-[100px]"
isDisabled={disabled}
value={value.end}
min={value.start}