feat(calendar): мобильные стили (#867)

* feat(calendar): make responsive * fix(calendar-range): popover min-width * fix(calendar-range): up-down margin * fix(calendar-range): unite media * fix(calendar-range): popover issue
core-ds · Dec 8, 2021 · febf545 · febf545
1 parent 3cd3c63
commit febf545
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 0 deletions.
diff --git a/packages/calendar-input/src/Component.tsx b/packages/calendar-input/src/Component.tsx
@@ -45,6 +45,11 @@ export type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'>
      */
     inputClassName?: string;
 
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+
     /**
      * Доп. пропсы для календаря
      */
@@ -131,13 +136,20 @@ export type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'>
      * Позиционирование поповера с календарем
      */
     popoverPosition?: PopoverProps['position'];
+
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
 };
 
 export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
     (
         {
             block = false,
             className,
+            inputClassName,
+            popoverClassName,
             defaultOpen = false,
             defaultMonth,
             defaultValue = '',
@@ -159,6 +171,7 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
             readOnly,
             Calendar = DefaultCalendar,
             popoverPosition = 'bottom-start',
+            useAnchorWidth,
             rightAddons,
             ...restProps
         },
@@ -361,8 +374,10 @@ export const CalendarInput = forwardRef<HTMLInputElement, CalendarInputProps>(
                 {shouldRenderPopover && (
                     <Popover
                         open={open}
+                        useAnchorWidth={useAnchorWidth}
                         anchorElement={inputWrapperRef.current as HTMLElement}
                         popperClassName={styles.calendarContainer}
+                        className={popoverClassName}
                         position={popoverPosition}
                         offset={[0, 8]}
                         withTransition={false}

diff --git a/packages/calendar-input/src/index.module.css b/packages/calendar-input/src/index.module.css
@@ -23,6 +23,11 @@
     box-shadow: var(--shadow-s);
     border: 1px solid var(--calendar-input-popover-border-color);
     border-radius: var(--calendar-input-popover-border-radius);
+
+    @media (max-width: 374px) {
+        width: 100%;
+        min-width: 288px;
+    }
 }
 
 .calendarIcon {

diff --git a/packages/calendar-range/src/Component.tsx b/packages/calendar-range/src/Component.tsx
@@ -280,6 +280,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
         <div className={cn(styles.component, className)} data-test-id={dataTestId}>
             <CalendarInput
                 {...inputFromProps}
+                useAnchorWidth={false}
                 calendarPosition={calendarPosition}
                 onInputChange={handleInputFromChange}
                 onCalendarChange={handleFromCalendarChange}
@@ -302,6 +303,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
             <div onMouseOver={handleCalendarToMouseOver}>
                 <CalendarInput
                     {...inputToProps}
+                    useAnchorWidth={false}
                     calendarPosition={calendarPosition}
                     popoverPosition='bottom-end'
                     onInputChange={handleInputToChange}

diff --git a/packages/calendar/src/components/days-table/index.module.css b/packages/calendar/src/components/days-table/index.module.css
@@ -44,6 +44,10 @@
 
     height: 40px;
     color: var(--color-light-text-secondary);
+
+    @media (max-width: 374px) {
+        height: 36px;
+    }
 }
 
 .day {
@@ -60,6 +64,11 @@
     border-radius: var(--calendar-day-border-radius);
     color: var(--color-light-text-primary);
 
+    @media (max-width: 374px) {
+        width: 36px;
+        height: 36px;
+    }
+
     &.event {
         &:before {
             content: '';

diff --git a/packages/calendar/src/components/header/index.module.css b/packages/calendar/src/components/header/index.module.css
@@ -18,16 +18,31 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @media (max-width: 374px) {
+        justify-content: space-between;
+        width: 256px;
+        margin: 0 auto;
+    }
 }
 
 .month {
     width: 131px;
+
+    @media (max-width: 374px) {
+        width: auto;
+        flex-grow: 1;
+    }
 }
 
 .year {
     width: 105px;
 
     margin-left: var(--gap-xs);
+
+    @media (max-width: 374px) {
+        width: 90px;
+    }
 }
 
 .buttonContent {
@@ -56,6 +71,10 @@
     width: 24px;
     height: 24px;
     margin-left: var(--gap-xs);
+
+    @media (max-width: 374px) {
+        margin-left: auto;
+    }
 }
 
 .arrow {
@@ -73,4 +92,8 @@
         right: 0;
         transform: rotateY(180deg);
     }
+
+    @media (max-width: 374px) {
+        display: none;
+    }
 }
diff --git a/packages/calendar/src/components/months-table/index.module.css b/packages/calendar/src/components/months-table/index.module.css
@@ -7,6 +7,11 @@
     width: 318px;
     margin: auto -3px;
     justify-content: flex-start;
+
+    @media (max-width: 374px) {
+        /* 2 кнопки по 125px + 2 отступа по 6px */
+        width: 262px;
+    }
 }
 
 .button {
@@ -16,4 +21,10 @@
     &:nth-last-child(-n + 3) {
         margin-bottom: 0;
     }
+
+    @media (max-width: 374px) {
+        margin: 0 3px var(--gap-2xs);
+        width: 125px;
+        height: 36px;
+    }
 }
diff --git a/packages/calendar/src/components/years-table/index.module.css b/packages/calendar/src/components/years-table/index.module.css
@@ -27,4 +27,12 @@
     &:nth-last-child(-n + 3) {
         margin-bottom: 0;
     }
+
+    @media (max-width: 374px) {
+        margin: 0 3px var(--gap-2xs);
+
+        /* ширина блока, 16 боковые отступы, 2*6px между кнопками */
+        width: calc((288px - 32px - 12px) / 3);
+        height: 36px;
+    }
 }
diff --git a/packages/calendar/src/index.module.css b/packages/calendar/src/index.module.css
@@ -8,6 +8,12 @@
     flex-direction: column;
     overflow: hidden;
     outline: none;
+
+    @media (max-width: 374px) {
+        align-items: center;
+        width: 100%;
+        height: 320px;
+    }
 }
 
 .container {
@@ -18,8 +24,16 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden;
+
+    @media (max-width: 374px) {
+        width: 288px;
+    }
 }
 
 .sixWeeks {
     height: 379px;
+
+    @media (max-width: 374px) {
+        height: 360px;
+    }
 }