From f6039648120fe072c193bde488a1c3cf84696b1e Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 20 Feb 2023 09:22:47 +0200 Subject: [PATCH 1/2] TCA-1018 init page layout switch --- .../user-certificate/UserCertificate.tsx | 9 +--- .../tca-enrollment-provider.tsx | 9 +++- .../learn-lib/functions/hide-siblings.ts | 7 +++ .../tools/learn/learn-lib/functions/index.ts | 1 + .../ValidateTCACertificate.module.scss | 26 +++++++++ .../ValidateTCACertificate.tsx | 54 ++++++++++++++----- 6 files changed, 85 insertions(+), 21 deletions(-) create mode 100644 src-ts/tools/learn/learn-lib/functions/hide-siblings.ts diff --git a/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx b/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx index 512353f2f..2df909b4d 100644 --- a/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx +++ b/src-ts/tools/learn/course-certificate/user-certificate/UserCertificate.tsx @@ -8,6 +8,7 @@ import { } from '../../../../lib' import { getViewStyleParamKey } from '../../learn.routes' import { CertificateView, CertificateViewStyle } from '../certificate-view' +import { hideSiblings } from '../../learn-lib/functions' import styles from './UserCertificate.module.scss' @@ -26,14 +27,6 @@ const UserCertificate: FC<{}> = () => { const providerParam: string = routeParams.provider ?? '' const certificationParam: string = routeParams.certification ?? '' - function hideSiblings(el: HTMLElement): void { - [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => { - if (c !== el) { - Object.assign(c.style, { display: 'none' }) - } - }) - } - useEffect(() => { if (routeParams.memberHandle) { profileGetPublicAsync(routeParams.memberHandle) diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx index d93e9290c..c8f2a611c 100644 --- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx +++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-enrollment/tca-enrollment-provider.tsx @@ -2,7 +2,14 @@ import useSWR, { SWRConfiguration, SWRResponse } from 'swr' import { learnUrlGet } from '../../../functions' import { useSwrCache } from '../../../learn-swr' -import { TCACertificationEnrollmentProviderData } from '../tca-certification-progress' +import { TCACertificationEnrollmentBase } from '../tca-certification-enrollment-base.model' + +export interface TCACertificationEnrollmentProviderData { + enrollment: TCACertificationEnrollmentBase + error: boolean + loading: boolean + ready: boolean +} export function useTCACertificationEnrollment( id: string, // note id | completionUuid both are supported by the API diff --git a/src-ts/tools/learn/learn-lib/functions/hide-siblings.ts b/src-ts/tools/learn/learn-lib/functions/hide-siblings.ts new file mode 100644 index 000000000..ffcfccf1d --- /dev/null +++ b/src-ts/tools/learn/learn-lib/functions/hide-siblings.ts @@ -0,0 +1,7 @@ +export function hideSiblings(el: HTMLElement): void { + [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => { + if (c !== el) { + Object.assign(c.style, { display: 'none' }) + } + }) +} diff --git a/src-ts/tools/learn/learn-lib/functions/index.ts b/src-ts/tools/learn/learn-lib/functions/index.ts index a91806c85..56af13608 100644 --- a/src-ts/tools/learn/learn-lib/functions/index.ts +++ b/src-ts/tools/learn/learn-lib/functions/index.ts @@ -5,3 +5,4 @@ export { postAsync as learnXhrPostAsync, putAsync as learnXhrPutAsync, } from './learn-xhr.functions' +export { hideSiblings } from './hide-siblings' diff --git a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss index 31b24bf11..a46fc15b7 100644 --- a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss +++ b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss @@ -153,4 +153,30 @@ } } } +} + +.modalView { + .hero { + padding-top: $space-lg; + + .heroInner { + margin-bottom: 0; + + .heroLeft { + transform: scale(0.6)translate(-250px, -80px); + } + } + } + + .contentOuter { + max-width: none; + + >div { + max-width: none !important; + } + + .courses { + margin-bottom: 0; + } + } } \ No newline at end of file diff --git a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx index 6bc329726..30aae73cb 100644 --- a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx +++ b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx @@ -1,5 +1,15 @@ -import { Dispatch, FC, ReactNode, SetStateAction, useEffect, useMemo, useState } from 'react' -import { Params, useParams } from 'react-router-dom' +import { + Dispatch, + FC, + MutableRefObject, + ReactNode, + SetStateAction, + useEffect, + useLayoutEffect, + useMemo, useRef, + useState, +} from 'react' +import { Params, useParams, useSearchParams } from 'react-router-dom' import classNames from 'classnames' import { @@ -23,12 +33,18 @@ import { import { EnvironmentConfig } from '../../../../config' import { Certificate } from '../certificate-view/certificate' import { getTCACertificationValidationUrl } from '../../learn.routes' +import { hideSiblings } from '../../learn-lib/functions' import styles from './ValidateTCACertificate.module.scss' const ValidateTCACertificate: FC<{}> = () => { + const wrapElRef: MutableRefObject = useRef() + const routeParams: Params = useParams() + const [queryParams]: [URLSearchParams, any] = useSearchParams() + + const isModalView: boolean = queryParams.get('view-style') === 'modal' const [profile, setProfile]: [ UserProfile | undefined, @@ -41,7 +57,7 @@ const ValidateTCACertificate: FC<{}> = () => { enrollment, ready: certReady, }: TCACertificationEnrollmentProviderData - = useTCACertificationEnrollment(routeParams.completionUuid as string) + = useTCACertificationEnrollment(routeParams.completionUuid as string) const certification: TCACertification | undefined = enrollment?.topcoderCertification @@ -72,6 +88,17 @@ const ValidateTCACertificate: FC<{}> = () => { } }, [enrollment, setProfileReady]) + useLayoutEffect(() => { + const el: HTMLElement = wrapElRef.current + if (!el || !isModalView) { + return + } + + hideSiblings(el) + hideSiblings(el.parentElement as HTMLElement) + + }) + function visitFullProfile(): void { window.open(`${EnvironmentConfig.TOPCODER_URLS.USER_PROFILE}/${profile?.handle}`, '_blank') } @@ -81,14 +108,14 @@ const ValidateTCACertificate: FC<{}> = () => { {profile && certification && ( -
+
- +
@@ -138,7 +165,7 @@ const ValidateTCACertificate: FC<{}> = () => {
- +

{'What '} @@ -153,12 +180,15 @@ const ValidateTCACertificate: FC<{}> = () => { {coursesGridItems}

- -
From 357b9ff3d9c3e836876d62c6dd5b07855a768b49 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 20 Feb 2023 10:47:06 +0200 Subject: [PATCH 2/2] TCA-1018 fit into 900x788 --- .../ValidateTCACertificate.module.scss | 28 +++++++++++++++---- .../ValidateTCACertificate.tsx | 10 +------ 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss index 71592f1e3..ee4837f3c 100644 --- a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss +++ b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.module.scss @@ -7,7 +7,7 @@ padding-top: calc($space-mx * 2); color: $tc-white; - @include ltemd { + @include ltelg { padding-top: $space-mx; } @@ -34,7 +34,7 @@ overflow: hidden; justify-content: center; - @include ltemd { + @include ltelg { flex-direction: column; } @@ -104,7 +104,7 @@ flex: 1 1 auto; min-width: 360px; max-width: 480px; - @include ltemd { + @include ltelg { max-width: none; } } @@ -116,7 +116,7 @@ flex-direction: column; margin-top: calc($space-mx + $space-mx); - @include ltemd { + @include ltelg { margin-top: $space-mx; } @@ -143,7 +143,7 @@ gap: $space-xl; margin-top: $space-xxl; - @include ltemd { + @include ltelg { grid-template-columns: 1fr; } @@ -167,12 +167,28 @@ .modalView { .hero { padding-top: $space-lg; + max-height: 360px; + + @include ltesm { + max-height: none; + } + .heroInner { margin-bottom: 0; + flex-direction: row; + + @include ltesm { + flex-direction: column; + } .heroLeft { - transform: scale(0.6)translate(-250px, -80px); + transform: scale(0.67); + transform-origin: 0 0; + + @include ltesm { + transform: none; + } } } } diff --git a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx index 3102c067a..531bba759 100644 --- a/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx +++ b/src-ts/tools/learn/tca-certificate/validate-certificate/ValidateTCACertificate.tsx @@ -108,7 +108,7 @@ const ValidateTCACertificate: FC<{}> = () => { {profile && certification && ( -
+
= () => { completionUuid={routeParams.completionUuid} validateLink={validateLink} /> - {/* */}