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/app.tsx b/src/components/app/app.tsx index 933cfae3e..8ce376522 100644 --- a/src/components/app/app.tsx +++ b/src/components/app/app.tsx @@ -152,7 +152,14 @@ const RouterWrapper = ({ extraRoutes, entryPoint }: RouterWrapperProps) => { {extraRoutes.map( ({ route, component: Component }) => ( - + ) diff --git a/src/components/app/authenticatedApp.styles.scss b/src/components/app/authenticatedApp.styles.scss index bbe78851c..2c417b2c5 100644 --- a/src/components/app/authenticatedApp.styles.scss +++ b/src/components/app/authenticatedApp.styles.scss @@ -1,6 +1,5 @@ $navWidth: $grid-base-twelve; $navHeight: $grid-base-nine; -$maxHeight: 100vh; $maxWidth: 100vw; $listWidth: calc((100vw - #{$navWidth}) / 12 * 4); $contentWidth: calc((100vw - #{$navWidth}) / 12 * 8); @@ -20,9 +19,23 @@ a { } } -.app { - height: 100vh; +.app__container { + height: 100%; + max-height: 100%; + display: flex; + flex-direction: column; + + .banner { + flex: 0; + } + + .app { + flex: 1; + overflow: hidden; + } +} +.app { &--blur { > *:not(.notifications) { filter: blur(5px); @@ -33,7 +46,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 +60,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 +80,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 +101,6 @@ a { .header { display: none; - position: absolute; &--mobile { display: flex; @@ -108,14 +117,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 +145,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 +187,7 @@ a { @include breakpoint($fromLarge) { width: $contentWidth; - margin-top: $headerHeight; + transition: none; } &--smallInactive { @@ -148,11 +197,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 +213,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..8d3518733 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: auto; @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/askerInfo/AskerInfo.tsx b/src/components/askerInfo/AskerInfo.tsx index 6dc5240a4..56ac8eaad 100644 --- a/src/components/askerInfo/AskerInfo.tsx +++ b/src/components/askerInfo/AskerInfo.tsx @@ -106,9 +106,9 @@ export const AskerInfo = () => { return ( -
-
-
+
+
+
{ ? `?sessionListTab=${sessionListTab}` : '' }`} - className="profile__header__backButton" + className="askerInfo__header__backButton" > -

+

{translate('profile.header.title')}

-
-

+

+

{activeSession.user.username}

-
-
-
+
+
+
{

{activeSession.user.username}

-
+
diff --git a/src/components/askerInfo/AskerInfoData.tsx b/src/components/askerInfo/AskerInfoData.tsx index 90c711ed1..a194c0427 100644 --- a/src/components/askerInfo/AskerInfoData.tsx +++ b/src/components/askerInfo/AskerInfoData.tsx @@ -26,11 +26,11 @@ export const AskerInfoData = () => { return ( <> -
-

+

+

{translate('userProfile.data.resort')}

-

+

{consultingType ? translate( [ @@ -43,26 +43,26 @@ export const AskerInfoData = () => {

{activeSession.item.consultingType === 0 && !activeSession.isLive && ( -
-

+

+

{translate('userProfile.data.postcode')}

-

+

{activeSession.item.postcode}

)} {preparedUserSessionData.map((item, index) => item.type === 'age' && item.value === 'null' ? null : ( -
-

+

+

{translate('userProfile.data.' + item.type)}

{item.value diff --git a/src/components/askerInfo/AskerInfoTools.tsx b/src/components/askerInfo/AskerInfoTools.tsx index dc107ad20..e40228db4 100644 --- a/src/components/askerInfo/AskerInfoTools.tsx +++ b/src/components/askerInfo/AskerInfoTools.tsx @@ -38,14 +38,14 @@ export const AskerInfoTools = () => { <>

)} -
- -
- 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 ? ( +
+
+ ) : (
- ) : ( -
+ {overlayActive && ( { reloadUserData().catch(console.log); if (buttonFunction === OVERLAY_FUNCTIONS.REDIRECT) { - setProfileWrapperInactive(); mobileListView(); if (!sessionId) { history.push({ diff --git a/src/components/profile/BrowserNotifications/index.tsx b/src/components/profile/BrowserNotifications/index.tsx index 009e2cb45..9a12a9e20 100644 --- a/src/components/profile/BrowserNotifications/index.tsx +++ b/src/components/profile/BrowserNotifications/index.tsx @@ -1,6 +1,5 @@ -import React, { useCallback, useContext, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { UserDataContext } from '../../../globalState'; import { browserNotificationsSettings, saveBrowserNotificationsSettings @@ -10,9 +9,10 @@ import { Switch } from '../../Switch'; import { Text } from '../../text/Text'; import { NotificationDenied } from './NotificationDenied'; import styles from './styles.module.scss'; +import useIsFirstVisit from '../../../utils/useIsFirstVisit'; export const BrowserNotification = () => { - const { isFirstVisit } = useContext(UserDataContext); + const isFirstVisit = useIsFirstVisit(); const [localBrowserSettings, setNotificationsSettings] = useState( browserNotificationsSettings() ); diff --git a/src/components/profile/Profile.tsx b/src/components/profile/Profile.tsx index d508c48a2..c27896454 100644 --- a/src/components/profile/Profile.tsx +++ b/src/components/profile/Profile.tsx @@ -9,10 +9,6 @@ import { UserDataContext, useTenant } from '../../globalState'; -import { - setProfileWrapperActive, - setProfileWrapperInactive -} from '../app/navigationHandler'; import { ReactComponent as PersonIcon } from '../../resources/img/icons/person.svg'; import { ReactComponent as LogoutIcon } from '../../resources/img/icons/out.svg'; import { ReactComponent as BackIcon } from '../../resources/img/icons/arrow-left.svg'; @@ -52,6 +48,7 @@ import { import { useTranslation } from 'react-i18next'; import { LegalLinksContext } from '../../globalState/provider/LegalLinksProvider'; import { useAppConfig } from '../../hooks/useAppConfig'; +import useIsFirstVisit from '../../utils/useIsFirstVisit'; export const Profile = () => { const settings = useAppConfig(); @@ -59,9 +56,10 @@ export const Profile = () => { const { t: translate } = useTranslation(); const location = useLocation(); const { fromL } = useResponsive(); + const isFirstVisit = useIsFirstVisit(); const legalLinks = useContext(LegalLinksContext); - const { userData, isFirstVisit } = useContext(UserDataContext); + const { userData } = useContext(UserDataContext); const { consultingTypes } = useContext(ConsultingTypesContext); const [mobileMenu, setMobileMenu] = useState< @@ -79,12 +77,6 @@ export const Profile = () => { .querySelector('.navigation__wrapper') ?.classList.remove('navigation__wrapper--mobileHidden'); document.querySelector('.header')?.classList.remove('header--mobile'); - - setProfileWrapperActive(); - - return () => { - setProfileWrapperInactive(); - }; }, []); useEffect(() => { @@ -473,7 +465,6 @@ export const Profile = () => { />
-
{legalLinks.map((legalLink, index) => ( diff --git a/src/components/profile/profile.styles.scss b/src/components/profile/profile.styles.scss index 192092efe..d0c544a92 100644 --- a/src/components/profile/profile.styles.scss +++ b/src/components/profile/profile.styles.scss @@ -52,26 +52,25 @@ $profile-footer-justify-content: center !default; &__wrapper { display: flex; flex-direction: column; + justify-content: stretch; + align-items: stretch; background-color: $background-light; height: 100%; } &__header { - position: fixed; - top: 0; + flex: 0; width: 100%; display: flex; flex-direction: column; align-items: center; padding: $grid-base-three $grid-base-two; - z-index: 20; @include breakpoint($fromMedium) { padding: $grid-base-three; } @include breakpoint($fromLarge) { - position: static; align-items: flex-start; } @@ -167,12 +166,24 @@ $profile-footer-justify-content: center !default; height: 100%; display: flex; flex-direction: column; - margin: $grid-base-twelve 0 0 0; overflow-x: hidden; + overflow-y: auto; + margin: 0; @include breakpoint($fromLarge) { - height: calc(100vh - #{$doubleNavHeight - #{$imprintHeight}}); - margin: 0; + overflow-y: hidden; + + & > div { + flex: 1; + + &:first-child { + overflow: auto; + } + + &.profile__footer { + flex: 0; + } + } } &__stopButton { @@ -468,6 +479,7 @@ $profile-footer-justify-content: center !default; } &__footer { + flex: 0; display: flex; flex-wrap: wrap; flex-direction: row; @@ -476,7 +488,6 @@ $profile-footer-justify-content: center !default; margin-top: auto; padding: $grid-base $grid-base-two; background-color: $profile-imprint-background-color; - margin-bottom: $grid-base-nine; width: 100%; @include breakpoint($fromMedium) { @@ -485,12 +496,9 @@ $profile-footer-justify-content: center !default; @include breakpoint($fromLarge) { min-height: $imprintHeight; - position: absolute; - bottom: 0; justify-content: flex-end; width: 100%; margin-bottom: unset; - z-index: 100; } &__item { @@ -507,115 +515,3 @@ $profile-footer-justify-content: center !default; } } } - -.contentWrapper__detail { - .profile { - &__content { - display: flex; - flex-direction: row; - - &__item { - flex: 1; - padding: 0 $grid-base-three; - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - } - } - } - - &__wrapper { - background-color: $background-light; - height: 100vh; - width: 100vw; - - @include breakpoint($fromLarge) { - width: auto; - height: calc(100vh - #{$grid-base-twelve}); - } - - .button__wrapper { - text-align: $profile-content-wrapper-detail-button-text-align; - } - } - - &__innerWrapper { - // header + footer + additional space - height: calc( - 100% - #{$grid-base-twelve + $grid-base-nine + $grid-base-three} - ); - background-color: $background-light; - margin-top: 0; - - @include breakpoint($fromLarge) { - height: calc(100% - #{$grid-base-twelve}); - } - } - - &__header { - position: relative; - background-color: $background-lighter; - - @include breakpoint($fromLarge) { - background-color: $background-light; - } - - &__backButton { - display: block; - position: absolute; - left: 0; - line-height: 32px; - cursor: pointer; - - @include breakpoint($fromLarge) { - position: static; - } - - svg { - width: $iconSize; - height: $iconSize; - fill: var(--skin-color-secondary-contrast-safe, $secondary); - - svg path { - fill: var( - --skin-color-secondary-contrast-safe, - $secondary - ); - } - - &:hover { - fill: var(--skin-color-primary, $primary); - - svg path { - fill: var(--skin-color-primary, $primary); - } - } - } - } - - &__innerWrapper { - margin: 0 auto; - background-color: $background-light; - - @include breakpoint($fromLarge) { - margin: 0 auto 0 $grid-base; - } - } - } - - &__icon { - margin: 0 auto $grid-base-two; - width: 72px; - height: 72px; - - &--user { - width: 72px; - height: 72px; - } - } - } -} diff --git a/src/components/scrollableSection/ScrollableSection.tsx b/src/components/scrollableSection/ScrollableSection.tsx index be1feefee..88899ae46 100644 --- a/src/components/scrollableSection/ScrollableSection.tsx +++ b/src/components/scrollableSection/ScrollableSection.tsx @@ -1,4 +1,4 @@ -import React, { createRef, ReactElement, useCallback, useEffect } from 'react'; +import React, { ReactElement } from 'react'; import './scrollableSection.styles.scss'; type ScrollableSectionProps = { @@ -6,66 +6,17 @@ type ScrollableSectionProps = { offset?: number; }; -export const ScrollableSection = ({ - children, - offset = 0 -}: ScrollableSectionProps) => { - const headerRef = createRef(); - const bodyRef = createRef(); - const footerRef = createRef(); - - const recalculateBody = useCallback(() => { - if (!bodyRef.current) { - return null; - } - - let spacing = 0; - - if (headerRef.current) { - const headerRect = headerRef.current.getBoundingClientRect(); - spacing = spacing + headerRect.top + headerRect.height; - } - - if (footerRef.current) { - const footerRect = footerRef.current.getBoundingClientRect(); - spacing = spacing + footerRect.height; - } - - bodyRef.current.style.height = `calc(100vh - ${spacing + offset}px)`; - }, [bodyRef, footerRef, headerRef, offset]); - - useEffect(() => { - setTimeout(() => { - recalculateBody(); - }); - }, [recalculateBody]); - - useEffect(() => { - let timeoutId = null; - const resizeListener = () => { - clearTimeout(timeoutId); - timeoutId = setTimeout(() => recalculateBody, 150); - }; - window.addEventListener('resize', resizeListener); - return () => { - window.removeEventListener('resize', resizeListener); - }; - }); - +export const ScrollableSection = ({ children }: ScrollableSectionProps) => { return (
{children.length >= 2 && ( -
- {children[0]} -
+
{children[0]}
)} -
+
{children.length === 1 ? children[0] : children[1]}
{children.length === 3 && ( -
- {children[2]} -
+
{children[2]}
)}
); diff --git a/src/components/scrollableSection/scrollableSection.styles.scss b/src/components/scrollableSection/scrollableSection.styles.scss index 747f851e8..d9dd6f811 100644 --- a/src/components/scrollableSection/scrollableSection.styles.scss +++ b/src/components/scrollableSection/scrollableSection.styles.scss @@ -1,8 +1,18 @@ .scrollableSection { - height: 100%; + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + min-height: 0; + + &__header, + &__footer { + flex: 0; + } &__body { + flex: 1; overflow-y: auto; - max-height: 100vh; + max-height: 100%; } } diff --git a/src/components/session/session.styles.scss b/src/components/session/session.styles.scss index f404a7166..34a38c2b8 100644 --- a/src/components/session/session.styles.scss +++ b/src/components/session/session.styles.scss @@ -10,12 +10,18 @@ $session-scroll-to-bottom-radius: $button-border-radius !default; .enquiry__wrapper { position: relative; width: 100vw; - height: 100%; display: flex; flex-direction: column; + justify-content: stretch; + align-items: stretch; + min-height: 0; background-color: $session-background-color; overflow: hidden; + & > * { + flex: 0; + } + .session__content.drag-in-progress * { pointer-events: none; } @@ -25,7 +31,9 @@ $session-scroll-to-bottom-radius: $button-border-radius !default; } &__wrapper { + flex: 1; width: 100%; + flex-direction: row; } .messageSubmit__wrapper { @@ -60,7 +68,7 @@ $session-scroll-to-bottom-radius: $button-border-radius !default; } &__content { - height: 100%; + flex: 1; overflow-x: hidden; overflow-y: auto; padding: $grid-base-three $grid-base-two $grid-base-two; @@ -70,10 +78,6 @@ $session-scroll-to-bottom-radius: $button-border-radius !default; padding: $grid-base-three $grid-base-three $grid-base-two; } - @include breakpoint($fromLarge) { - height: calc(100% - #{$sessionHeaderHeight} - #{$textareaHeight}); - } - &--anonymousEnquiry { display: flex; justify-content: center; @@ -140,16 +144,6 @@ $session-scroll-to-bottom-radius: $button-border-radius !default; } } -// If the banner is open, we need to adjust the height of the session -.banner-open { - .session, - .enquiry__wrapper { - @include breakpoint($fromLarge) { - height: calc(100% - 56px); - } - } -} - @keyframes appear-animation { 0% { opacity: 0; diff --git a/src/components/sessionHeader/GroupChatHeader/index.tsx b/src/components/sessionHeader/GroupChatHeader/index.tsx index 13446d661..2c8a5d0d1 100644 --- a/src/components/sessionHeader/GroupChatHeader/index.tsx +++ b/src/components/sessionHeader/GroupChatHeader/index.tsx @@ -165,21 +165,17 @@ export const GroupChatHeader = ({ )}
- {!isActive && - hasUserAuthority( - AUTHORITIES.CONSULTANT_DEFAULT, - userData - ) && ( - - - - {t('chatFlyout.groupChatInfo')} - - - )} + {!isActive && isConsultant && ( + + + + {t('chatFlyout.groupChatInfo')} + + + )} {isActive && isConsultant && diff --git a/src/components/sessionHeader/sessionHeader.styles.scss b/src/components/sessionHeader/sessionHeader.styles.scss index e0b73036f..49e4c4a83 100644 --- a/src/components/sessionHeader/sessionHeader.styles.scss +++ b/src/components/sessionHeader/sessionHeader.styles.scss @@ -89,9 +89,9 @@ $iconSize: 24px; &__username { cursor: pointer; overflow: hidden; - flex-grow: 1; @include breakpoint($fromLarge) { + flex-grow: 1; margin: 0; } diff --git a/src/components/sessionsList/sessionsList.styles.scss b/src/components/sessionsList/sessionsList.styles.scss index bd1db9ecc..5678961fe 100644 --- a/src/components/sessionsList/sessionsList.styles.scss +++ b/src/components/sessionsList/sessionsList.styles.scss @@ -11,15 +11,14 @@ $tabBarHeightDesktop: 53px; .sessionsList, .session { &__wrapper { + justify-content: stretch; + align-items: stretch; + flex: 1; background-color: $sessions-list-background-color-secondary; position: relative; - height: 100%; - - @include breakpoint($fromLarge) { - display: flex; - flex-direction: column; - height: 100%; - } + min-height: 0; + display: flex; + flex-direction: column; .col { margin-top: 0; @@ -27,13 +26,10 @@ $tabBarHeightDesktop: 53px; } &__header { - position: fixed; width: 100%; - top: 0; - left: 0; + flex: 0; display: flex; flex-direction: row; - justify-content: space-between; padding: $grid-base-three $grid-base-two; background-color: $sessions-list-background-color-secondary; z-index: 15; @@ -43,9 +39,7 @@ $tabBarHeightDesktop: 53px; } @include breakpoint($fromLarge) { - position: static; padding: $grid-base-three; - padding-bottom: $grid-base-two; } } @@ -92,13 +86,12 @@ $tabBarHeightDesktop: 53px; } &__innerWrapper { - height: 100%; - - @include breakpoint($fromLarge) { - height: calc(100% - #{$headerHeight}); - display: flex; - flex-direction: column; - } + flex: 1; + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: stretch; + min-height: 0; } &__selectWrapper { @@ -116,13 +109,11 @@ $tabBarHeightDesktop: 53px; } &__scrollContainer { - height: calc(100% - #{$headerHeight} - #{$mobileNavigationHeight}); - margin-top: $grid-base-ten; padding-top: $grid-base-three; overflow: auto; + flex: 1; @include breakpoint($fromLarge) { - height: 100%; margin-top: 0; padding-top: 0; position: relative; @@ -135,26 +126,15 @@ $tabBarHeightDesktop: 53px; &--hasTabs { padding-top: 0; margin-top: 0; - height: calc( - 100% - #{$headerHeight} - #{$mobileNavigationHeight} - #{$tabBarHeightMobile} - ); - - @include breakpoint($fromLarge) { - flex: 1; - } } } &__functionalityWrapper { - margin-top: $grid-base-ten; + flex: 0; .sessionsList__tabs + .sessionsList__selectWrapper .select__wrapper { margin-top: 0; } - - @include breakpoint($fromLarge) { - margin-top: $grid-base; - } } &__tabs { diff --git a/src/components/stageLayout/StageLayout.styles.scss b/src/components/stageLayout/StageLayout.styles.scss index d620c673d..cd94da195 100644 --- a/src/components/stageLayout/StageLayout.styles.scss +++ b/src/components/stageLayout/StageLayout.styles.scss @@ -2,7 +2,7 @@ overflow-x: hidden; display: flex; flex-direction: column; - min-height: 100vh; + min-height: 100%; &__header, &__footer { diff --git a/src/components/tools/ToolsList.tsx b/src/components/tools/ToolsList.tsx index 24c2ee53d..8b4c25572 100644 --- a/src/components/tools/ToolsList.tsx +++ b/src/components/tools/ToolsList.tsx @@ -3,10 +3,6 @@ import { useContext, useEffect, useState } from 'react'; import { apiGetTools } from '../../api/apiGetTools'; import { UserDataContext } from '../../globalState'; import { APIToolsInterface } from '../../globalState/interfaces/ToolsInterface'; -import { - setToolsWrapperActive, - setToolsWrapperInactive -} from '../app/navigationHandler'; import { Box } from '../box/Box'; import { Headline } from '../headline/Headline'; import { Tool } from './Tool'; @@ -18,14 +14,6 @@ export const ToolsList = () => { const [toolList, setToolsList] = useState([]); const { userData } = useContext(UserDataContext); - useEffect(() => { - setToolsWrapperActive(); - - return () => { - setToolsWrapperInactive(); - }; - }, []); - useEffect(() => { apiGetTools(userData.userId).then((resp: APIToolsInterface[]) => setToolsList(resp) diff --git a/src/components/tools/tools.styles.scss b/src/components/tools/tools.styles.scss index dd8fd353e..aa4883456 100644 --- a/src/components/tools/tools.styles.scss +++ b/src/components/tools/tools.styles.scss @@ -47,7 +47,6 @@ $imprintHeight: 40px; overflow-x: hidden; @include breakpoint($fromLarge) { - height: calc(100vh - #{$doubleNavHeight - #{$imprintHeight}}); margin: 0; } } diff --git a/src/components/videoCall/statusPage.styles.scss b/src/components/videoCall/statusPage.styles.scss index 15b67e2d5..ba0ad6ed3 100644 --- a/src/components/videoCall/statusPage.styles.scss +++ b/src/components/videoCall/statusPage.styles.scss @@ -2,7 +2,7 @@ background: #474747; position: fixed; width: 100vw; - height: 100vh; + height: 100%; display: flex; justify-content: center; align-items: center; diff --git a/src/components/waitingRoom/waitingRoom.styles.scss b/src/components/waitingRoom/waitingRoom.styles.scss index d1c08ea46..e10070ddc 100644 --- a/src/components/waitingRoom/waitingRoom.styles.scss +++ b/src/components/waitingRoom/waitingRoom.styles.scss @@ -6,7 +6,7 @@ $waiting-room-subline-opacity: 1 !default; .waitingRoom { display: flex; justify-content: center; - min-height: 100vh; + min-height: 100%; overflow: hidden; &__headline { diff --git a/src/containers/bookings/components/Booking/booking.tsx b/src/containers/bookings/components/Booking/booking.tsx index fc5e3440c..01096734c 100644 --- a/src/containers/bookings/components/Booking/booking.tsx +++ b/src/containers/bookings/components/Booking/booking.tsx @@ -12,10 +12,6 @@ import { } from '../../../../api'; import Cal from '../Calcom/Cal'; import { useAppConfig } from '../../../../hooks/useAppConfig'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { getValueFromCookie } from '../../../../components/sessionCookie/accessSessionCookie'; export const getUserEmail = (userData: UserDataInterface) => { @@ -30,14 +26,6 @@ export const Booking = () => { const [appointmentLink, setAppointmentLink] = useState(null); const settings = useAppConfig(); - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - useEffect(() => { apiGetAskerSessionList().then(({ sessions }) => { const session = sessions.find((s) => !!s.consultant); diff --git a/src/containers/bookings/components/BookingCancellation/bookingCancellation.tsx b/src/containers/bookings/components/BookingCancellation/bookingCancellation.tsx index 0ef3638c7..514ea0bfb 100644 --- a/src/containers/bookings/components/BookingCancellation/bookingCancellation.tsx +++ b/src/containers/bookings/components/BookingCancellation/bookingCancellation.tsx @@ -1,23 +1,10 @@ import * as React from 'react'; -import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { useAppConfig } from '../../../../hooks/useAppConfig'; export const BookingCancellation = () => { const settings = useAppConfig(); - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - const location = useLocation<{ uid: string }>(); return ( diff --git a/src/containers/bookings/components/BookingEvents/bookingEvents.tsx b/src/containers/bookings/components/BookingEvents/bookingEvents.tsx index 6a621404e..c05a58786 100644 --- a/src/containers/bookings/components/BookingEvents/bookingEvents.tsx +++ b/src/containers/bookings/components/BookingEvents/bookingEvents.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; -import { useContext, useEffect } from 'react'; +import { useContext } from 'react'; import { NavLink, Redirect, Route, Switch, useHistory } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { Button, BUTTON_TYPES, @@ -33,14 +29,6 @@ export const BookingEvents = () => { const { t: translate } = useTranslation(); const history = useHistory(); - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - const { userData } = useContext(UserDataContext); const consultingTypes = useConsultingTypes(); diff --git a/src/containers/bookings/components/BookingEventsBooked/bookingEventsBooked.tsx b/src/containers/bookings/components/BookingEventsBooked/bookingEventsBooked.tsx index f698fcabf..37300d5c8 100644 --- a/src/containers/bookings/components/BookingEventsBooked/bookingEventsBooked.tsx +++ b/src/containers/bookings/components/BookingEventsBooked/bookingEventsBooked.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; import { useContext, useEffect, useState } from 'react'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import '../booking.styles'; import { AUTHORITIES, @@ -21,14 +17,6 @@ import { transformBookingData } from '../../../../utils/transformBookingData'; import { BookingsComponent } from '../BookingsComponent/bookingsComponent'; export const BookingEventsBooked: React.FC = () => { - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - const { userData } = useContext(UserDataContext); const [isLoading, setIsLoading] = useState(true); diff --git a/src/containers/bookings/components/BookingEventsCanceled/bookingEventsCanceled.tsx b/src/containers/bookings/components/BookingEventsCanceled/bookingEventsCanceled.tsx index e09851d88..07d95b05a 100644 --- a/src/containers/bookings/components/BookingEventsCanceled/bookingEventsCanceled.tsx +++ b/src/containers/bookings/components/BookingEventsCanceled/bookingEventsCanceled.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; import { useContext, useEffect, useState } from 'react'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { UserDataContext } from '../../../../globalState'; import { BookingEventsInterface, @@ -15,14 +11,6 @@ import { BookingsComponent } from '../BookingsComponent/bookingsComponent'; import { transformBookingData } from '../../../../utils/transformBookingData'; export const BookingEventsCanceled: React.FC = () => { - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - const { userData } = useContext(UserDataContext); const [isLoading, setIsLoading] = useState(true); const [bookingEventsData, setBookingEventsData] = useState< diff --git a/src/containers/bookings/components/BookingEventsExpired/bookingEventsExpired.tsx b/src/containers/bookings/components/BookingEventsExpired/bookingEventsExpired.tsx index a07fe4147..e1ce0c34d 100644 --- a/src/containers/bookings/components/BookingEventsExpired/bookingEventsExpired.tsx +++ b/src/containers/bookings/components/BookingEventsExpired/bookingEventsExpired.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; import { useContext, useEffect, useState } from 'react'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import '../booking.styles'; import { UserDataContext } from '../../../../globalState'; import { @@ -16,14 +12,6 @@ import { BookingsComponent } from '../BookingsComponent/bookingsComponent'; import { transformBookingData } from '../../../../utils/transformBookingData'; export const BookingEventsExpired: React.FC = () => { - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - const { userData } = useContext(UserDataContext); const [isLoading, setIsLoading] = useState(true); const [bookingEventsData, setBookingEventsData] = useState< diff --git a/src/containers/bookings/components/BookingReschedule/bookingReschedule.tsx b/src/containers/bookings/components/BookingReschedule/bookingReschedule.tsx index ee61424c4..77e49bad8 100644 --- a/src/containers/bookings/components/BookingReschedule/bookingReschedule.tsx +++ b/src/containers/bookings/components/BookingReschedule/bookingReschedule.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; -import { useContext, useEffect } from 'react'; +import { useContext } from 'react'; import { useLocation } from 'react-router-dom'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { AUTHORITIES, hasUserAuthority, @@ -19,13 +15,6 @@ export const BookingReschedule = () => { userData ); const settings = useAppConfig(); - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); const location = useLocation<{ askerId: string; diff --git a/src/containers/bookings/components/BookingSettings/bookingSettings.tsx b/src/containers/bookings/components/BookingSettings/bookingSettings.tsx index 588d37ad1..8e64e53f2 100644 --- a/src/containers/bookings/components/BookingSettings/bookingSettings.tsx +++ b/src/containers/bookings/components/BookingSettings/bookingSettings.tsx @@ -1,9 +1,4 @@ import * as React from 'react'; -import { useEffect } from 'react'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { useCalcomLogin } from '../../hooks/useCalcomLogin'; import { AvailabilityContainer } from '../AvailabilityContainer/availabilityContainer'; import { CalendarIntegration } from '../CalendarIntegration/calendarIntegration'; @@ -12,14 +7,6 @@ import '../booking.styles'; export const BookingSettings = () => { const loadedExternalComponents = useCalcomLogin(); - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); // eslint-disable-line react-hooks/exhaustive-deps - if (!loadedExternalComponents) { return null; } diff --git a/src/containers/bookings/components/BookingsComponent/bookingsComponent.tsx b/src/containers/bookings/components/BookingsComponent/bookingsComponent.tsx index c4dfe632d..5d3f9c6f3 100644 --- a/src/containers/bookings/components/BookingsComponent/bookingsComponent.tsx +++ b/src/containers/bookings/components/BookingsComponent/bookingsComponent.tsx @@ -1,9 +1,5 @@ import * as React from 'react'; import { useContext, useEffect, useState } from 'react'; -import { - setBookingWrapperActive, - setBookingWrapperInactive -} from '../../../../components/app/navigationHandler'; import { AUTHORITIES, hasUserAuthority, @@ -27,14 +23,6 @@ export const BookingsComponent: React.FC = ({ isLoading, bookingStatus }) => { - useEffect(() => { - setBookingWrapperActive(); - - return () => { - setBookingWrapperInactive(); - }; - }, []); - const { userData } = useContext(UserDataContext); const [sessions, setSessions] = useState(null); diff --git a/src/containers/bookings/components/Calcom/cal.styles.scss b/src/containers/bookings/components/Calcom/cal.styles.scss index 54c8aa55b..1dd9242c9 100644 --- a/src/containers/bookings/components/Calcom/cal.styles.scss +++ b/src/containers/bookings/components/Calcom/cal.styles.scss @@ -13,7 +13,6 @@ @include breakpoint($fromLarge) { align-items: center; - height: calc(100vh - 72px) !important; padding-bottom: 100px; } diff --git a/src/containers/bookings/components/booking.styles.scss b/src/containers/bookings/components/booking.styles.scss index 393ac75ba..e4d42c421 100644 --- a/src/containers/bookings/components/booking.styles.scss +++ b/src/containers/bookings/components/booking.styles.scss @@ -121,7 +121,7 @@ $headerHeight: 80px; flex-direction: column; padding: 0 $grid-base-three; overflow-x: hidden; - height: calc(100vh - #{$doubleNavHeight - #{$imprintHeight}}); + height: 100%; &-event { display: grid; @@ -146,11 +146,7 @@ $headerHeight: 80px; align-items: center; justify-content: center; text-align: center; - height: calc(100vh - 275px); - - @include breakpoint($fromLarge) { - height: calc(100vh - 300px); - } + height: 100%; &-title { color: $lighter-grey; diff --git a/src/containers/overview/overview.tsx b/src/containers/overview/overview.tsx index ece84ed74..73e37c258 100644 --- a/src/containers/overview/overview.tsx +++ b/src/containers/overview/overview.tsx @@ -1,8 +1,4 @@ -import React, { useEffect } from 'react'; -import { - setProfileWrapperActive, - setProfileWrapperInactive -} from '../../components/app/navigationHandler'; +import React from 'react'; import { Page } from '../../components/Page'; import { SESSION_LIST_TYPES } from '../../components/session/sessionHelpers'; import { BookingCard } from './components/BookingCard/BookingCard'; @@ -14,13 +10,6 @@ import { useTranslation } from 'react-i18next'; export const OverviewPage = () => { const { t: translate } = useTranslation(); - useEffect(() => { - setProfileWrapperActive(); - return () => { - setProfileWrapperInactive(); - }; - }, []); - return ( {translate('overview.title')} diff --git a/src/globalState/provider/UserDataProvider.tsx b/src/globalState/provider/UserDataProvider.tsx index b48da71bc..224f3cbc4 100644 --- a/src/globalState/provider/UserDataProvider.tsx +++ b/src/globalState/provider/UserDataProvider.tsx @@ -2,20 +2,16 @@ import * as React from 'react'; import { createContext, useCallback, useState } from 'react'; import { UserDataInterface } from '../interfaces/UserDataInterface'; import { apiGetUserData } from '../../api'; -import { useLocation } from 'react-router-dom'; type TUserDataContext = { - isFirstVisit: boolean; userData: UserDataInterface; setUserData: (userData: UserDataInterface) => void; reloadUserData: () => Promise; }; export const UserDataContext = createContext(null); -const isFirstVisitToBrowser = localStorage.getItem('visited') !== 'true'; export function UserDataProvider(props) { - const location = useLocation(); const [userData, setUserData] = useState(null); const reloadUserData = useCallback(() => { @@ -25,16 +21,9 @@ export function UserDataProvider(props) { }); }, [setUserData]); - React.useEffect(() => { - if (userData && location.pathname !== '/login') { - localStorage.setItem('visited', 'true'); - } - }, [location.pathname, userData]); - return ( - - - <% if(type === 'error') { %> -
- <% } else { %> -
- <% } %> +
+ + + <% if(type === 'error') { %> +
+ <% } else { %> +
+ <% } %> +
diff --git a/src/pages/under-construction.html b/src/pages/under-construction.html index 7f39fd2f2..1278d78c0 100644 --- a/src/pages/under-construction.html +++ b/src/pages/under-construction.html @@ -188,7 +188,7 @@

Ohh!

} .errorPage { - min-height: 100vh; + min-height: 100%; } .errorPage__claim { @@ -297,7 +297,7 @@

Ohh!

.errorPage__main { flex-direction: row; - min-height: calc(100vh - 2 * 96px); + min-height: 100%; padding: 32px 24px; margin-top: 96px; box-sizing: border-box; diff --git a/src/resources/styles/_layout.scss b/src/resources/styles/_layout.scss index dc4982d7f..55ccdcafa 100644 --- a/src/resources/styles/_layout.scss +++ b/src/resources/styles/_layout.scss @@ -1,9 +1,18 @@ html, body { min-height: 100%; + height: 100%; min-width: $body-min-width; } +html, +body, +.app__container, +.stageLayout, +.app { + height: 100%; +} + html { box-sizing: border-box; -ms-text-size-adjust: 100%;