diff --git a/src/components/E2EEncryptionSupportBanner/E2EEncryptionSupportBanner.styles.scss b/src/components/E2EEncryptionSupportBanner/E2EEncryptionSupportBanner.styles.scss index 982a33717..522cc6735 100644 --- a/src/components/E2EEncryptionSupportBanner/E2EEncryptionSupportBanner.styles.scss +++ b/src/components/E2EEncryptionSupportBanner/E2EEncryptionSupportBanner.styles.scss @@ -1,7 +1,6 @@ .encryption-banner { background-color: #f7d9d9; display: flex; - position: fixed; justify-content: center; padding: $grid-base-two $grid-base-three; @include breakpoint($fromLarge) { diff --git a/src/components/app/NavigationBar.tsx b/src/components/app/NavigationBar.tsx index 33d2e472e..58495cd8e 100644 --- a/src/components/app/NavigationBar.tsx +++ b/src/components/app/NavigationBar.tsx @@ -1,5 +1,12 @@ import * as React from 'react'; -import { useCallback, useContext, useEffect, useRef, useState } from 'react'; +import { + PropsWithChildren, + useCallback, + useContext, + useEffect, + useRef, + useState +} from 'react'; import { Link, useLocation } from 'react-router-dom'; import { UserDataContext, @@ -24,6 +31,8 @@ import { useTranslation } from 'react-i18next'; import { LocaleSwitch } from '../localeSwitch/LocaleSwitch'; import { userHasBudibaseTools } from '../../api/apiGetTools'; import { browserNotificationsSettings } from '../../utils/notificationHelpers'; +import useIsFirstVisit from '../../utils/useIsFirstVisit'; +import { useResponsive } from '../../hooks/useResponsive'; export interface NavigationBarProps { onLogout: any; @@ -36,7 +45,8 @@ export const NavigationBar = ({ routerConfig }: NavigationBarProps) => { const { t: translate } = useTranslation(); - const { userData, isFirstVisit } = useContext(UserDataContext); + const isFirstVisit = useIsFirstVisit(); + const { userData } = useContext(UserDataContext); const { consultingTypes } = useContext(ConsultingTypesContext); const { sessions, dispatch } = useContext(SessionsDataContext); const { selectableLocales } = useContext(LocaleContext); @@ -225,92 +235,98 @@ export const NavigationBar = ({ return (
- {sessions && - routerConfig.navigation - .filter( - (item: any) => - !item.condition || - item.condition( - userData, - consultingTypes, - sessions, - hasTools - ) - ) - .map((item, index) => { - const Icon = item?.icon; - const IconFilled = item?.iconFilled; - return ( - + {sessions && + routerConfig.navigation + .filter( + (item: any) => + !item.condition || + item.condition( + userData, + consultingTypes, + sessions, + hasTools + ) + ) + .map((item, index) => { + const Icon = item?.icon; + const IconFilled = item?.iconFilled; + return ( + + handleKeyDownMenu(e, index) + } + ref={(el) => + (ref_menu.current[index] = el) + } + tabIndex={index === 0 ? 0 : -1} + role="tab" + > +
+ {Icon && ( + + )} + {IconFilled && ( + + )} +
+ + {(({ large }) => { + return ( + <> + + {translate(large)} + + + ); + })(item.titleKeys)} + {Object.keys( pathsToShowUnreadMessageNotification ).includes(item.to) && - 'navigation__item__count--active' - }`} - to={item.to} - onKeyDown={(e) => - handleKeyDownMenu(e, index) - } - ref={(el) => (ref_menu.current[index] = el)} - tabIndex={index === 0 ? 0 : -1} - role="tab" - > -
- {Icon && ( - - )} - {IconFilled && ( - - )} -
- - {(({ large }) => { - return ( - <> - - {translate(large)} - - - ); - })(item.titleKeys)} - {Object.keys( - pathsToShowUnreadMessageNotification - ).includes(item.to) && - pathsToShowUnreadMessageNotification[ - item.to - ] > 0 && ( - - )} - - ); - })} -
0 && ( + + )} + + ); + })} + +
-
+
); }; +const NavGroup = ({ + children, + className +}: PropsWithChildren<{ className: string }>) => { + const { fromL } = useResponsive(); + if (fromL) { + return
{children}
; + } + + return <>{children}; +}; + const NavigationUnreadIndicator = ({ animate }: { animate: boolean }) => { const [visible, setVisible] = useState(false); diff --git a/src/components/app/Routing.tsx b/src/components/app/Routing.tsx index 4373c294b..77e9bc3ed 100644 --- a/src/components/app/Routing.tsx +++ b/src/components/app/Routing.tsx @@ -102,73 +102,96 @@ export const Routing = (props: RoutingProps) => { />
-
+
- {routerConfig.listRoutes.map( - (route: any): JSX.Element => ( - - - - - - ) - )} - -
-
- }> - - {routerConfig.detailRoutes.map( - (route: any): JSX.Element => ( - ( - route.path + ) || []), + ...(routerConfig.detailRoutes?.map( + (route: any) => route.path + ) || []) + ]} + > +
+ + {routerConfig.listRoutes.map( + ( + route: any + ): JSX.Element => ( + - - - )} - /> - ) - )} - - - - {((hasUserProfileRoutes) => { - if (hasUserProfileRoutes) { - return ( -
+ > + + + + ) + )} + +
+
+ } + > - {routerConfig.userProfileRoutes.map( + {typeof routerConfig.userProfileRoutes !== + 'undefined' && + routerConfig.userProfileRoutes.map( + ( + route: any + ): JSX.Element => ( + ( +
+ + + +
+ )} + /> + ) + )} + + {routerConfig.detailRoutes.map( ( route: any ): JSX.Element => ( @@ -177,12 +200,12 @@ export const Routing = (props: RoutingProps) => { route.exact ?? true } - key={`userProfile-${route.path}`} + key={`detail-${route.path}`} path={ route.path } render={( - props + componentProps ) => ( { } > { ) )} -
- ); - } - })( - typeof routerConfig.userProfileRoutes !== - 'undefined' - )} -
- -
- - {routerConfig.profileRoutes - ?.filter( - (route: any) => - !route.condition || - route.condition( - userData, - consultingTypes - ) - ) - .map( - (route: any): JSX.Element => ( - ( - +
+ + route.path + ) || [] + } + > +
+ + {routerConfig.profileRoutes + ?.filter( + (route: any) => + !route.condition || + route.condition( + userData, + consultingTypes + ) + ) + .map( + ( + route: any + ): JSX.Element => ( + ( + + )} + /> + ) + )} + +
+ + route.path + ) || [] + } + > +
+ + {routerConfig.appointmentRoutes?.map( + ( + route: any + ): JSX.Element => ( + ( + + )} /> - )} - /> - ) - )} - -
- -
- - {routerConfig.appointmentRoutes?.map( - (route: any): JSX.Element => ( - ( - + ) )} - /> - ) - )} - -
- -
- - {routerConfig.toolsRoutes?.map( - (route: any): JSX.Element => ( - ( - + +
+ + route.path + ) || [] + } + > +
+ + {routerConfig.toolsRoutes?.map( + ( + route: any + ): JSX.Element => ( + ( + + )} + /> + ) )} - /> - ) - )} + +
+
diff --git a/src/components/app/authenticatedApp.styles.scss b/src/components/app/authenticatedApp.styles.scss index bbe78851c..a81ad050d 100644 --- a/src/components/app/authenticatedApp.styles.scss +++ b/src/components/app/authenticatedApp.styles.scss @@ -20,9 +20,23 @@ a { } } -.app { +.app__container { height: 100vh; + max-height: 100vh; + display: flex; + flex-direction: column; + + .banner { + flex: 0; + } + + .app { + flex: 1; + overflow: hidden; + } +} +.app { &--blur { > *:not(.notifications) { filter: blur(5px); @@ -33,7 +47,11 @@ a { .app__wrapper { display: flex; flex-direction: column; - height: 100vh; + justify-content: stretch; + align-items: stretch; + overflow: hidden; + height: 100%; + max-height: 100%; @include breakpoint($fromLarge) { flex-direction: row; @@ -43,20 +61,17 @@ a { display: flex; flex-direction: row; justify-content: space-around; - position: fixed; - bottom: 0; - z-index: 50; width: $maxWidth; height: $navHeight; - padding: $grid-base-two; + order: 3; @include breakpoint($fromLarge) { flex-direction: column; justify-content: flex-start; position: relative; - width: $navWidth; + flex: 0 0 $navWidth; height: 100%; - padding: $grid-base-two 0; + order: 1; } &--inactive { @@ -66,24 +81,20 @@ a { .contentWrapper { height: 100%; - width: $maxWidth; + max-height: 100%; + order: 2; + flex: 1; display: flex; - flex-direction: row; + flex-direction: column; position: relative; overflow: hidden; background-color: $background-light; @include breakpoint($fromLarge) { padding-bottom: 0; - width: calc(#{$maxWidth} - #{$navWidth}); - height: #{$maxHeight}; overflow: visible; } - &--navInactive { - height: $maxHeight; - } - &__userProfile { flex: 1; overflow-y: auto; @@ -91,7 +102,6 @@ a { .header { display: none; - position: absolute; &--mobile { display: flex; @@ -108,14 +118,25 @@ a { font-size: $font-size-h2; } + &__content { + flex: 1; + display: flex; + flex-direction: row; + min-height: 0; + } + &__list { margin-top: 0; + min-height: 0; width: 100vw; transition: all 0.3s ease; + display: flex; + flex-direction: column; @include breakpoint($fromLarge) { width: $listWidth; - margin-top: $headerHeight; + flex: 0 0 $listWidth; + transition: none; } &--smallInactive { @@ -125,11 +146,40 @@ a { .sessionsList__header { left: -100vw; } + + @include breakpoint($fromLarge) { + margin-left: 0; + transition: none; + + .sessionsList__header { + left: 0; + } + } + } + + &--hidden { + display: none !important; } } - &__detail { + &__detail, + &__booking, + &__profile, + &__tools { + min-height: 0; + width: 100%; + margin: 0; display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + + & > * { + flex: 1; + } + } + + &__detail { margin-top: 0; width: 100vw; transition: all 0.3s ease; @@ -138,7 +188,7 @@ a { @include breakpoint($fromLarge) { width: $contentWidth; - margin-top: $headerHeight; + transition: none; } &--smallInactive { @@ -148,11 +198,15 @@ a { .sessionsList__header { left: 0; } + + @include breakpoint($fromLarge) { + margin-right: 0; + transition: none; + } } } &__booking { - display: none; margin-top: 0; width: 100vw; transition: all 0.3s ease; @@ -160,27 +214,6 @@ a { @include breakpoint($fromLarge) { width: $contentWidth; - margin-top: $headerHeight; - } - } - - &__profile { - width: 100%; - display: none; - margin: 0; - - @include breakpoint($fromLarge) { - margin-top: $headerHeight; - } - } - - &__tools { - width: 100%; - display: none; - margin: 0; - - @include breakpoint($fromLarge) { - margin-top: $headerHeight; } } } diff --git a/src/components/app/navigation.styles.scss b/src/components/app/navigation.styles.scss index 57cd14817..54c7d6b07 100644 --- a/src/components/app/navigation.styles.scss +++ b/src/components/app/navigation.styles.scss @@ -17,14 +17,19 @@ $unreadBubbleAnimation: count 500ms ease 500ms forwards; &__itemContainer { display: flex; + flex-direction: row; justify-content: space-around; width: 100%; max-width: calc(#{$grid-base} * 62); + padding: $grid-base-two; + overflow-y: scroll; @include breakpoint($fromLarge) { + justify-content: space-between; flex-direction: column; height: 100%; max-width: none; + padding: $grid-base-two 0; } } @@ -76,6 +81,18 @@ $unreadBubbleAnimation: count 500ms ease 500ms forwards; margin: 12px $grid-base; } + &__top { + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-around; + + @include breakpoint($fromLarge) { + justify-content: normal; + flex-direction: column; + } + } + &__bottom { cursor: pointer; transition: all 0.6s ease; diff --git a/src/components/app/navigationHandler.ts b/src/components/app/navigationHandler.ts index 2367862c7..631cba6c9 100644 --- a/src/components/app/navigationHandler.ts +++ b/src/components/app/navigationHandler.ts @@ -13,146 +13,73 @@ const activateNavigationItem = (e: Event, navItems) => { }; export const desktopView = () => { - const contentDetail = document.querySelector('.contentWrapper__detail'); - contentDetail?.classList.remove('contentWrapper__detail--smallInactive'); - - const contentList = document.querySelector('.contentWrapper__list'); - contentList?.classList.remove('contentWrapper__list--smallInactive'); - - const navigation = document.querySelector('.navigation__wrapper'); - navigation?.classList.remove('navigation__wrapper--inactive'); - const contentWrapper = document.querySelector('.contentWrapper'); + const contentWrapperDetail = document.querySelector( + '.contentWrapper__detail' + ); + const contentWrapperList = document.querySelector('.contentWrapper__list'); + const navigationWrapper = document.querySelector('.navigation__wrapper'); + contentWrapperDetail?.classList.remove( + 'contentWrapper__detail--smallInactive' + ); + contentWrapperList?.classList.remove('contentWrapper__list--smallInactive'); + navigationWrapper?.classList.remove('navigation__wrapper--inactive'); contentWrapper?.classList.remove('contentWrapper--navInactive'); }; export const mobileListView = () => { if (window.innerWidth <= 900) { - const contentDetail = document.querySelector('.contentWrapper__detail'); - contentDetail?.classList.add('contentWrapper__detail--smallInactive'); - - const contentList = document.querySelector('.contentWrapper__list'); - contentList?.classList.remove('contentWrapper__list--smallInactive'); - - const navigation = document.querySelector('.navigation__wrapper'); - navigation?.classList.remove('navigation__wrapper--inactive'); - const contentWrapper = document.querySelector('.contentWrapper'); + const contentWrapperDetail = document.querySelector( + '.contentWrapper__detail' + ); + const contentWrapperList = document.querySelector( + '.contentWrapper__list' + ); + const navigationWrapper = document.querySelector( + '.navigation__wrapper' + ); + contentWrapperDetail?.classList.add( + 'contentWrapper__detail--smallInactive' + ); + contentWrapperList?.classList.remove( + 'contentWrapper__list--smallInactive' + ); + navigationWrapper?.classList.remove('navigation__wrapper--inactive'); contentWrapper?.classList.remove('contentWrapper--navInactive'); } }; export const mobileDetailView = () => { if (window.innerWidth <= 900) { - const contentDetail = document.querySelector('.contentWrapper__detail'); - contentDetail?.classList.remove( + const contentWrapper = document.querySelector('.contentWrapper'); + const contentWrapperDetail = document.querySelector( + '.contentWrapper__detail' + ); + const contentWrapperList = document.querySelector( + '.contentWrapper__list' + ); + const navigationWrapper = document.querySelector( + '.navigation__wrapper' + ); + contentWrapperDetail?.classList.remove( 'contentWrapper__detail--smallInactive' ); - - const contentList = document.querySelector('.contentWrapper__list'); - contentList?.classList.add('contentWrapper__list--smallInactive'); - - const navigation = document.querySelector('.navigation__wrapper'); - navigation?.classList.add('navigation__wrapper--inactive'); - - const contentWrapper = document.querySelector('.contentWrapper'); + contentWrapperList?.classList.add( + 'contentWrapper__list--smallInactive' + ); + navigationWrapper?.classList.add('navigation__wrapper--inactive'); contentWrapper?.classList.add('contentWrapper--navInactive'); } }; -export const setProfileWrapperInactive = () => { - document - .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: block'); - document - .querySelector('.contentWrapper__detail') - ?.setAttribute('style', 'display: block'); - document - .querySelector('.contentWrapper__profile') - ?.setAttribute('style', 'display: none'); -}; - -export const setProfileWrapperActive = () => { - document - .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__detail') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__profile') - ?.setAttribute('style', 'display: block'); -}; - -export const setBookingWrapperInactive = () => { - document - .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: block'); - document - .querySelector('.contentWrapper__detail') - ?.setAttribute('style', 'display: block'); - document - .querySelector('.contentWrapper__profile') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__booking') - ?.setAttribute('style', 'display: none'); -}; - -export const setBookingWrapperActive = () => { - document - .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__detail') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__profile') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__booking') - ?.setAttribute('style', 'display: block'); -}; - -export const setToolsWrapperInactive = () => { - document - .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: block'); - document - .querySelector('.contentWrapper__detail') - ?.setAttribute('style', 'display: block'); - document - .querySelector('.contentWrapper__profile') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__booking') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__tools') - ?.setAttribute('style', 'display: none'); -}; - -export const setToolsWrapperActive = () => { - document - .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__detail') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__profile') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__booking') - ?.setAttribute('style', 'display: none'); - document - .querySelector('.contentWrapper__tools') - ?.setAttribute('style', 'display: block'); -}; - export const mobileUserProfileView = () => { if (window.innerWidth <= 900) { - const contentList = document.querySelector('.contentWrapper__list'); - contentList?.classList.add('contentWrapper__list--smallInactive'); + const contentWrapperList = document.querySelector( + '.contentWrapper__list' + ); + contentWrapperList?.classList.add( + 'contentWrapper__list--smallInactive' + ); } }; diff --git a/src/components/appointment/Appointments.tsx b/src/components/appointment/Appointments.tsx index 866cf9d80..0ee4f9f1e 100644 --- a/src/components/appointment/Appointments.tsx +++ b/src/components/appointment/Appointments.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; import { useCallback, useContext, useEffect, useState } from 'react'; -import { - setProfileWrapperActive, - setProfileWrapperInactive -} from '../app/navigationHandler'; import { Overlay, OVERLAY_FUNCTIONS, OverlayItem } from '../overlay/Overlay'; import { Button, BUTTON_TYPES, ButtonItem } from '../button/Button'; import './appointments.styles.scss'; @@ -140,13 +136,6 @@ export const Appointments = () => { const [onlineMeeting, setOnlineMeeting] = useState({}); - useEffect(() => { - setProfileWrapperActive(); - return () => { - setProfileWrapperInactive(); - }; - }, []); - const handleOverlay = useCallback( (buttonFunction: string) => { switch (buttonFunction) { diff --git a/src/components/appointment/appointments.styles.scss b/src/components/appointment/appointments.styles.scss index 1f2b0789e..9d828cb78 100644 --- a/src/components/appointment/appointments.styles.scss +++ b/src/components/appointment/appointments.styles.scss @@ -1,7 +1,14 @@ .appointments { background-color: $background-lighter; + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + min-height: 0; .scrollableSection { + flex: 1; + &__header, &__body > div { @include breakpoint($fromLarge) { diff --git a/src/components/banner/Banner.tsx b/src/components/banner/Banner.tsx index 12423a29f..3cb63f1d4 100644 --- a/src/components/banner/Banner.tsx +++ b/src/components/banner/Banner.tsx @@ -2,7 +2,6 @@ import { createPortal } from 'react-dom'; import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import { useLocation } from 'react-router-dom'; const fixedStage = document.getElementsByClassName( 'stage' ) as HTMLCollectionOf; @@ -10,18 +9,6 @@ const fixedStageLayout = document.getElementsByClassName( 'stageLayout' ) as HTMLCollectionOf; const bannerContainer = document.getElementById('banner'); -const appWrapper = document.getElementsByClassName( - 'app__wrapper' -) as HTMLCollectionOf; -const app = document.getElementsByClassName( - 'app' -) as HTMLCollectionOf; -const sessionsListHeader = document.getElementsByClassName( - 'sessionsList__header' -) as HTMLCollectionOf; -const profileHeader = document.getElementsByClassName( - 'profile__header' -) as HTMLCollectionOf; export const Banner = ({ children, @@ -35,8 +22,6 @@ export const Banner = ({ onClose?: (e: MouseEvent) => void; }) => { const [element] = useState(() => document.createElement('div')); - const [windowWidth, setWindowWidth] = useState(undefined); - const location = useLocation(); const { t: translate } = useTranslation(); const getBannersHeight = useCallback(() => { let bannersHeight = 0; @@ -51,16 +36,6 @@ export const Banner = ({ return bannersHeight; }, []); - useEffect(() => { - const handleResize = () => { - setWindowWidth(window.innerWidth); - }; - - window.addEventListener('resize', handleResize); - handleResize(); - return () => window.removeEventListener('resize', handleResize); - }, []); - useEffect(() => { if (className) { element.classList.add(className); @@ -77,27 +52,6 @@ export const Banner = ({ if (fixedStage?.[0]) { fixedStage[0].style.paddingTop = `${bannerContainer.clientHeight}px`; } - - if (app?.[0] && getBannersHeight() > 0) { - app[0].style.overflow = 'hidden'; - } - - if (sessionsListHeader?.[0]) { - const bannersHeight = getBannersHeight(); - sessionsListHeader[0].style.top = `${bannersHeight}px`; - } - - if (profileHeader?.[0]) { - const bannersHeight = getBannersHeight(); - profileHeader[0].style.top = `${bannersHeight}px`; - } - - if (appWrapper?.[0]) { - const bannersHeight = getBannersHeight(); - appWrapper[0].style.height = `calc(100vh - ${bannersHeight}px)`; - appWrapper[0].style.marginTop = `${bannersHeight}px`; - } - if (fixedStageLayout?.[0]) { const bannersHeight = getBannersHeight(); fixedStageLayout[0].style.paddingTop = `${bannersHeight}px`; @@ -110,31 +64,13 @@ export const Banner = ({ if (fixedStage?.[0]) { fixedStage[0].style.paddingTop = `0px`; } - - if (app?.[0]) { - app[0].style.removeProperty('overflow'); - } - - if (sessionsListHeader?.[0]) { - sessionsListHeader[0].style.top = '0'; - } - - if (profileHeader?.[0]) { - profileHeader[0].style.top = '0'; - } - - if (appWrapper?.[0]) { - appWrapper[0].style.height = `100vh`; - appWrapper[0].style.marginTop = `0px`; - } - if (fixedStageLayout?.[0]) { const bannersHeight = getBannersHeight(); fixedStageLayout[0].style.paddingTop = `${bannersHeight}px`; fixedStageLayout[0].style.marginTop = `-${bannersHeight}px`; } }; - }, [className, element, getBannersHeight, style, windowWidth, location]); + }, [className, element, getBannersHeight, style]); return createPortal( <> diff --git a/src/components/enquiry/WriteEnquiry.tsx b/src/components/enquiry/WriteEnquiry.tsx index afd976f62..912b557ea 100644 --- a/src/components/enquiry/WriteEnquiry.tsx +++ b/src/components/enquiry/WriteEnquiry.tsx @@ -116,10 +116,11 @@ export const WriteEnquiry: React.FC = () => { const activateListView = () => { document .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: block'); + ?.classList.remove('.contentWrapper__list--hidden'); document .querySelector('.navigation__wrapper') ?.classList.remove('navigation__wrapper--mobileHidden'); + document.querySelector('.header')?.classList.remove('header--mobile'); if (window.innerWidth <= 900) { const contentWrapper = document.querySelector( @@ -134,7 +135,7 @@ export const WriteEnquiry: React.FC = () => { const deactivateListView = () => { document .querySelector('.contentWrapper__list') - ?.setAttribute('style', 'display: none'); + ?.classList.add('.contentWrapper__list--hidden'); document .querySelector('.navigation__wrapper') ?.classList.add('navigation__wrapper--mobileHidden'); diff --git a/src/components/enquiry/enquiry.styles.scss b/src/components/enquiry/enquiry.styles.scss index aa7a8687e..bfa6363a0 100644 --- a/src/components/enquiry/enquiry.styles.scss +++ b/src/components/enquiry/enquiry.styles.scss @@ -5,23 +5,21 @@ $background-circle-size: 1800px !default; .enquiry { &__wrapper { background-color: $enquiry-background; - min-height: 100vh; position: relative; display: flex; - align-items: center; - justify-content: center; + align-items: stretch; + justify-content: stretch; overflow: hidden; + min-height: 0; @include breakpoint($fromLarge) { - min-height: calc(100vh - #{$grid-base-twelve}); - padding-bottom: 128px; - &::after { content: ''; position: absolute; width: $background-circle-size; height: $background-circle-size; right: calc(100vw * 0.3); + top: calc(50vh - 900px); border-radius: 100%; background-color: $enquiry-circle-background; z-index: 1; @@ -48,24 +46,17 @@ $background-circle-size: 1800px !default; } .textarea { - position: fixed !important; width: 100% !important; - bottom: 0; - left: 0; - - @include breakpoint($fromLarge) { - position: absolute !important; - left: 0; - } } } &__contentWrapper { + min-height: 0; + flex: 1; padding: $grid-base-six $grid-base-two $grid-base-twelve; overflow: auto; - margin-top: $header-height; - margin-bottom: $message-wrapper-height; position: relative; + display: flex; z-index: 2; @include breakpoint($fromMedium) { @@ -73,7 +64,9 @@ $background-circle-size: 1800px !default; } @include breakpoint($fromLarge) { - margin: 0 $grid-base-three; + align-items: center; + justify-content: center; + margin: 0 auto; padding: 0; max-width: 900px; } @@ -91,7 +84,9 @@ $background-circle-size: 1800px !default; &__image { width: $enquiry-image-size; + min-width: $enquiry-image-size; height: $enquiry-image-size; + min-height: $enquiry-image-size; display: block; @include breakpoint($fromLarge) { diff --git a/src/components/groupChat/CreateChatView.tsx b/src/components/groupChat/CreateChatView.tsx index a701b5e8e..438d7f7e6 100644 --- a/src/components/groupChat/CreateChatView.tsx +++ b/src/components/groupChat/CreateChatView.tsx @@ -450,84 +450,87 @@ export const CreateGroupChatView = (props) => {

)} -
- -
- handleDatePicker(date)} - onFocus={() => setIsDateInputFocus(true)} - onBlur={() => setIsDateInputFocus(false)} - locale="de" - minDate={new Date()} - maxDate={new Date(2999, 12, 31)} - dateFormat="cccccc, dd. MMMM yyyy" +
+ + - + handleDatePicker(date)} + onFocus={() => setIsDateInputFocus(true)} + onBlur={() => setIsDateInputFocus(false)} + locale="de" + minDate={new Date()} + maxDate={new Date(2999, 12, 31)} + dateFormat="cccccc, dd. MMMM yyyy" + /> + + {translate('groupChat.create.dateInput.label')} + +
+
+ handleTimePicker(time)} + onFocus={() => setIsTimeInputFocus(true)} + onBlur={() => setIsTimeInputFocus(false)} + locale="de" + showTimeSelect + showTimeSelectOnly + timeIntervals={15} + timeCaption="Uhrzeit" + dateFormat="HH:mm" + /> + + {translate('groupChat.create.beginDateInput.label')} + +
+ + + setSelectedRepetitive(!selectedRepetitive) } - aria-label="date input label" - > - {translate('groupChat.create.dateInput.label')} - -
-
- handleTimePicker(time)} - onFocus={() => setIsTimeInputFocus(true)} - onBlur={() => setIsTimeInputFocus(false)} - locale="de" - showTimeSelect - showTimeSelectOnly - timeIntervals={15} - timeCaption="Uhrzeit" - dateFormat="HH:mm" /> - - {translate('groupChat.create.beginDateInput.label')} - -
- - - setSelectedRepetitive(!selectedRepetitive) - } - /> - {isEditGroupChatMode ? ( -
+ {isEditGroupChatMode ? ( +
+
+ ) : (
- ) : ( -