From 396fcaf48dd5a660a83c786d096c6d408b632dc1 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 28 Feb 2023 13:56:27 +0200 Subject: [PATCH 1/5] TCA-1090 - grow certificate to fit view width --- .../CertificatePageLayout.module.scss | 5 ++++- .../certificate-page-layout/CertificatePageLayout.tsx | 7 ++++++- .../useCertificateScaling.hook.tsx | 5 +++-- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss b/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss index 9f10896a6..549acc424 100644 --- a/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss +++ b/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss @@ -7,6 +7,7 @@ display: flex; background: $tc-grad15; + overflow: hidden; } .content-wrap { @@ -29,6 +30,8 @@ display: flex; flex-direction: column; align-items: center; + z-index: 1; + position: relative; gap: $space-sm; @@ -52,7 +55,7 @@ .certificate-wrap { aspect-ratio: $tca-certif-aspect-ratio; width: 100%; - max-width: 880px; + max-width: 1216px; position: relative; &:global(.large-container) { diff --git a/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx b/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx index d01a2bc1a..297c922a5 100644 --- a/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx +++ b/src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx @@ -53,7 +53,12 @@ const CertificatePageLayout: FC = (props: Certificat const certificateWrapRef: MutableRefObject = useRef() const navigateBack: NavigateBackFunction = useNavigateBack() - useCertificateScaling(props.isReady ? certificateWrapRef : undefined, 880, 880) + useCertificateScaling( + props.isReady ? certificateWrapRef : undefined, + 880, + 880, + viewStyle ? 1 : Math.min(), + ) const handleBackBtnClick: () => void = useCallback(() => { navigateBack(props.fallbackBackUrl ?? '') diff --git a/src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx b/src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx index e10885b51..9a1f50f2e 100644 --- a/src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx +++ b/src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx @@ -4,6 +4,7 @@ export function useCertificateScaling( certificateRef?: MutableRefObject, originalSizeLg: number = 1250, originalSizeSm: number = 975, + scaleLimit: number = 1, ): void { // the certificate isn't responsive: should look the same on mobile and desktop @@ -19,12 +20,12 @@ export function useCertificateScaling( // 975 and 1250 are the original container sizes, // and we're dividing by that to get the needed zoom level const ratioSize: number = window.innerWidth <= 745 ? originalSizeSm : originalSizeLg - const scaleLevel: number = Math.min(1, parentWidth / ratioSize) + const scaleLevel: number = Math.min(scaleLimit, parentWidth / ratioSize) Object.assign(certificateEl.style, { transform: `scale(${scaleLevel})`, transformOrigin: '0 0' }) } window.addEventListener('resize', handleResize, false) handleResize() return () => window.removeEventListener('resize', handleResize, false) - }, [certificateRef, originalSizeLg, originalSizeSm]) + }, [certificateRef, originalSizeLg, originalSizeSm, scaleLimit]) } From 4bc4829d25ee69b6e778f5f2e9bc258a4513f1a2 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 28 Feb 2023 14:27:24 +0200 Subject: [PATCH 2/5] TCA-1089 - fix enrolled & completed certification modal --- .../enrolled-modal/EnrolledModal.module.scss | 8 ++++---- .../enrolled-modal/EnrolledModal.tsx | 3 ++- .../enrolled-modal/bg.jpg | Bin 6702 -> 18640 bytes ...TCACertificationCompletedModal.module.scss | 10 +++++----- .../TCACertificationCompletedModal.tsx | 4 ++-- .../tca-certification-completed-modal/bg.jpg | Bin 6702 -> 18640 bytes 6 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss b/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss index b5fba59de..8e9e8d191 100644 --- a/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss +++ b/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.module.scss @@ -10,6 +10,7 @@ .enrolledModal { color: $tc-white; background: url(./bg.jpg) center no-repeat, $tc-grad20; + max-width: 560px; @include ltemd { background: url(./bg-mobile.jpg) 0 0 no-repeat, $tc-grad20; @@ -37,9 +38,8 @@ } h2 { - @include ltemd { - font-size: 24px; - line-height: 28px; - } + text-transform: none; + font-size: 26px; + line-height: 32px; } } diff --git a/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx b/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx index 08304bab4..d9bdf8eb6 100644 --- a/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx +++ b/src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx @@ -23,7 +23,7 @@ const EnrolledModal: FC = (props: EnrolledModalProps) => { <> @@ -33,6 +33,7 @@ const EnrolledModal: FC = (props: EnrolledModalProps) => {