Merge pull request #524 from topcoder-platform/various-cert-details-fixes

Various cert details fixes -> dev

Author: vas3a

src-ts/App.tsx

@@ -3,7 +3,7 @@ import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
 import { Header } from './header'
-import { routeContext, RouteContextData } from './lib'
+import { routeContext, RouteContextData, useViewportUnitsFix } from './lib'
 
 const App: FC<{}> = () => {
 
@@ -12,6 +12,8 @@ const App: FC<{}> = () => {
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
+    useViewportUnitsFix()
+
     return (
         <>
             <Header />

src-ts/lib/hooks/index.ts

@@ -2,4 +2,5 @@ export * from './use-check-is-mobile.hook'
 export * from './use-click-outside.hook'
 export * from './use-on-hover-element.hook'
 export * from './use-storage.hook'
+export * from './use-viewport-units-fix.hook'
 export * from './use-window-size.hook'

src-ts/lib/hooks/use-viewport-units-fix.hook.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject, useRef } from 'react'
+
+import { useWindowSize, WindowSize } from './use-window-size.hook'
+
+/**
+ * On mobile, vh units are not consistent accross devices/browsers,
+ * this hook listen to window resize and fixes sets a --vh CSS variable
+ * on the document root, so we can access it everywhere
+ *
+ * @see https://css-tricks.com/the-trick-to-viewport-units-on-mobile
+ */
+export function useViewportUnitsFix(): void {
+    const { height }: WindowSize = useWindowSize()
+    const wasHeight: MutableRefObject<number> = useRef(height)
+
+    if (wasHeight.current !== height) {
+        // We execute the same script as before
+        const vh: number = window.innerHeight * 0.01
+        document.documentElement.style.setProperty('--vh', `${vh}px`)
+    }
+}

src-ts/lib/styles/_modals.scss

@@ -10,7 +10,7 @@
         display: flex;
         flex-direction: column;
         width: 100vw;
-        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
         margin: auto;
         border-radius: 0;
         padding: $space-xxl $space-xxxxl $space-xxxxl;

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -82,6 +82,15 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                     </span>
                     <span className='quote-main'>
                         <CompletionTimeRange range={props.certification.completionTimeRange} />
+                        <Tooltip
+                            content={renderTooltipContents(<IconSolid.ClockIcon />, [
+                                'Assuming 4 hour',
+                                'learning per day',
+                            ])}
+                            place='bottom'
+                            trigger={<IconOutline.InformationCircleIcon />}
+                            triggerOn='hover'
+                        />
                     </span>
                 </li>
                 {!props.certProgress && (