Merge pull request #498 from topcoder-platform/ui_fixes

Minor UI fixes for responsiveness & code cleanup -> dev

Author: vas3a

src-ts/lib/styles/_modals.scss

@@ -34,6 +34,9 @@
         &.modal-body {
             width: 90vw;
             max-width: 1000px;
+            @include ltemd {
+                width: 100vw;
+            }
         }
 
         @include ltemd {

src-ts/tools/learn/certification-details/CertificationDetailsPage.module.scss

@@ -1,47 +1,5 @@
 @import '../../../lib/styles/includes';
 
-.hero-wrap {
-    :global(.hero-content) {
-        flex-direction: column;
-        gap: $space-xxxxl;
-        position: relative;
-
-        @include gtelg {
-            padding-right: calc(40vw + $space-xxl);
-        }
-
-        @include gtexl {
-            padding-right: calc(445px + $space-xxl);
-        }
-    }
-}
-
-.contentWrap {
-    .outerContentWrap {
-        padding-top: $space-mxx;
-        padding-bottom: 120px;
-
-        @include ltexl {
-            padding-top: $space-xxxxl;
-            padding-bottom: $space-xxxxl;
-        }
-
-        @include gtelg {
-            padding-right: calc(40vw + $space-xxl * 2);
-        }
-
-        @include gtexl {
-            padding-right: calc(445px + $space-xxxl * 2);
-        }
-    }
-
-    .innerContentWrap.innerContentWrap.innerContentWrap {
-        @include ltemd {
-            overflow: visible;
-        }
-    }
-}
-
 .text-section.text-section {
     margin-top: 80px;
 

src-ts/tools/learn/certification-details/CertificationDetailsPage.tsx

@@ -2,34 +2,25 @@ import { Dispatch, FC, ReactNode, SetStateAction, useContext, useState } from 'r
 import { Params, useParams } from 'react-router-dom'
 import classNames from 'classnames'
 
-import { PageSubheaderPortalId } from '../../../config'
 import {
     TCACertificationProgressProviderData,
     TCACertificationProviderData,
     useGetTCACertification,
     useGetTCACertificationProgress,
     useGetUserCertifications,
-    useLearnBreadcrumb,
     UserCertificationsProviderData,
-    WaveHero,
 } from '../learn-lib'
 import {
-    Breadcrumb,
-    BreadcrumbItemModel,
     Button,
-    ContentLayout,
-    LoadingSpinner,
-    Portal,
     profileContext,
     ProfileContextData,
-    textFormatGetSafeString,
 } from '../../../lib'
 
-import { HeroTitle } from './hero-title'
 import { CertificationDetailsSidebar } from './certification-details-sidebar'
 import { CertificationCurriculum } from './certification-curriculum'
 import { EnrollCtaBtn } from './enroll-cta-btn'
 import { CertifDetailsContent, CertificationDetailsModal } from './certification-details-modal'
+import { PageLayout } from './page-layout'
 import styles from './CertificationDetailsPage.module.scss'
 
 const CertificationDetailsPage: FC<{}> = () => {
@@ -68,14 +59,6 @@ const CertificationDetailsPage: FC<{}> = () => {
     const isEnrolled: boolean = progressReady && !!progress
     const isNotEnrolledView: boolean = !progressReady || !progress
 
-    const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb([
-        {
-
-            name: textFormatGetSafeString(certification?.title),
-            url: '',
-        },
-    ])
-
     function renderCertificationCurriculum(): ReactNode {
         return (
             <div className={classNames(styles['text-section'], isEnrolled && styles['no-top'])}>
@@ -92,73 +75,52 @@ const CertificationDetailsPage: FC<{}> = () => {
         setCertifDetailsModalOpen(d => !d)
     }
 
-    function renderContents(): ReactNode {
-        return (
-            <>
-                <Breadcrumb items={breadcrumb} />
-
-                <Portal portalId={PageSubheaderPortalId}>
-                    <div className={styles['hero-wrap']}>
-                        <WaveHero
-                            title={(
-                                <HeroTitle certification={certification} certTitle={certification.title} />
-                            )}
-                            theme='grey'
-                            text={certification.introText}
-                        >
-                            {!isEnrolled && (
-                                <EnrollCtaBtn certification={certification.dashedName} />
-                            )}
-                        </WaveHero>
-                        <CertificationDetailsSidebar
-                            certification={certification}
-                            enrolled={isEnrolled}
-                            profile={profile}
-                            certProgress={progress}
+    function renderMainContent(): ReactNode {
+        return ready ? (
+            isNotEnrolledView ? (
+                <CertifDetailsContent certification={certification} sectionClassName={styles['text-section']}>
+                    {renderCertificationCurriculum()}
+                </CertifDetailsContent>
+            ) : (
+                <>
+                    {renderCertificationCurriculum()}
+                    <div className={styles['text-section']}>
+                        <Button
+                            buttonStyle='link'
+                            label='Certification Details'
+                            onClick={toggleCertifDetailsModal}
                         />
                     </div>
-                </Portal>
+                    <CertificationDetailsModal
+                        isOpen={isCertifDetailsModalOpen}
+                        onClose={toggleCertifDetailsModal}
+                        certification={certification}
+                    />
+                </>
+            )
+        ) : null
+    }
 
-                {isNotEnrolledView ? (
-                    <CertifDetailsContent certification={certification} sectionClassName={styles['text-section']}>
-                        {renderCertificationCurriculum()}
-                    </CertifDetailsContent>
-                ) : (
-                    <>
-                        {renderCertificationCurriculum()}
-                        <div className={styles['text-section']}>
-                            <Button
-                                buttonStyle='link'
-                                label='Certification Details'
-                                onClick={toggleCertifDetailsModal}
-                            />
-                        </div>
-                    </>
-                )}
-            </>
+    function renderSidebar(): ReactNode {
+        return (
+            <CertificationDetailsSidebar
+                certification={certification}
+                enrolled={isEnrolled}
+                profile={profile}
+                certProgress={progress}
+            />
         )
     }
 
     return (
-        <ContentLayout
-            contentClass={styles.contentWrap}
-            outerClass={styles.outerContentWrap}
-            innerClass={styles.innerContentWrap}
-        >
-            {!ready ? (
-                <div className={styles.wrap}>
-                    <LoadingSpinner />
-                </div>
-            ) : renderContents()}
-
-            {certificationReady && (
-                <CertificationDetailsModal
-                    isOpen={isCertifDetailsModalOpen}
-                    onClose={toggleCertifDetailsModal}
-                    certification={certification}
-                />
+        <PageLayout
+            sidebarContents={renderSidebar()}
+            mainContent={renderMainContent()}
+            certification={certification}
+            heroCTA={!isEnrolled && (
+                <EnrollCtaBtn certification={certification.dashedName} />
             )}
-        </ContentLayout>
+        />
     )
 }
 

src-ts/tools/learn/certification-details/certificate-preview/CertificatePreview.tsx

@@ -15,7 +15,7 @@ interface CertificatePreviewProps {
 const CertificatePreview: FC<CertificatePreviewProps> = (props: CertificatePreviewProps) => {
     const certificateWrapRef: MutableRefObject<HTMLDivElement | any> = useRef()
 
-    useCertificateScaling(certificateWrapRef, 780, 395)
+    useCertificateScaling(certificateWrapRef, 780, 780)
 
     function getPlaceholder(): ReactNode {
         return (

src-ts/tools/learn/certification-details/certification-curriculum/CertificationCurriculum.module.scss

@@ -18,7 +18,7 @@
         margin-right: -$space-lg;
     }
 
-    @include ltelg {
+    @media (max-width: 1150px) {
         padding: $space-xxxxl $space-lg $space-lg;
     }
 }
@@ -38,6 +38,11 @@
         align-items: baseline;
         gap: $space-lg;
 
+        @media (max-width: 1250px) {
+            flex-wrap: wrap;
+            justify-content: flex-end;
+        }
+
         @include ltelg {
             margin-left: 0;
             margin-top: $space-xxl;
@@ -94,7 +99,7 @@
     padding: $space-xxxxl;
 
     margin-top: $space-xxl;
-    @include ltelg {
+    @media (max-width: 1150px) {
         padding: $space-lg;
     }
 }

src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/CurriculumCard.module.scss

@@ -8,7 +8,7 @@
     display: flex;
     gap: $space-xxl;
 
-    @include ltelg {
+    @media (max-width: 1150px) {
         padding: $space-lg;
         flex-direction: column;
         gap: $space-lg;
@@ -26,7 +26,7 @@
     flex: 0 0 auto;
     display: flex;
 
-    @include ltelg {
+    @media (max-width: 1150px) {
         display: none;
     }
 }
@@ -109,7 +109,12 @@
     .cta {
         margin-left: auto;
         justify-content: flex-end;
-        @include ltelg {
+
+        @media (max-width: 1250px) {
+            flex-wrap: wrap;
+        }
+
+        @media (max-width: 1150px) {
             display: none;
         }
     }
@@ -118,12 +123,11 @@
 .cta, .bottomActions, .bottomCta {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
     gap: $space-sm;
 }
 
 .bottomActions {
-    @include gtexl {
+    @media (min-width: 1151px) {
         display: none;
     }
 }

src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/course-card/CourseCard.module.scss

@@ -9,8 +9,11 @@
     color: $black-60;
 
     margin-top: $space-xs;
-    @include ltelg {
+    @media (max-width: 1150px) {
         flex-wrap: wrap;
+    }
+    
+    @include ltelg {
         gap: 0 5px;
         margin-top: 0;
     }

src-ts/tools/learn/certification-details/page-layout/PageLayout.module.scss

@@ -6,12 +6,12 @@
         gap: $space-xxxxl;
         position: relative;
 
-        @include gtelg {
-            padding-right: calc(40vw + $space-xxl);
+        @media (min-width: 1151px) {
+            padding-right: calc(445px + $space-xxl);
         }
 
-        @include gtexl {
-            padding-right: calc(445px + $space-xxl);
+        @include gtelg {
+            padding-right: calc(40vw + $space-xxl);
         }
     }
 }
@@ -30,7 +30,7 @@
             padding-right: calc(40vw + $space-xxl * 2);
         }
 
-        @include gtexl {
+        @media (min-width: 1151px) {
             padding-right: calc(445px + $space-xxxl * 2);
         }
     }
@@ -40,4 +40,4 @@
             overflow: visible;
         }
     }
-}
+}

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress-data.model.ts

@@ -1,5 +1,3 @@
-import { TCACertificationEnrollmentBase } from '../tca-certification-enrollment-base.model'
-
 import { TCACertificationProgress } from './tca-certification-progress.model'
 
 export interface TCACertificationProgressProviderData {
@@ -10,10 +8,3 @@ export interface TCACertificationProgressProviderData {
     refetch: () => void,
     setCertificateProgress: (progess: TCACertificationProgress) => void,
 }
-
-export interface TCACertificationEnrollmentProviderData {
-    enrollment: TCACertificationEnrollmentBase | TCACertificationProgress | undefined
-    error: boolean
-    loading: boolean
-    ready: boolean
-}

src-ts/tools/learn/learn-lib/sticky-sidebar/StickySidebar.module.scss

@@ -14,7 +14,7 @@
         bottom: 0;
     }
 
-    @include lg {
+    @media (min-width: $lg-min) and (max-width: 1150px){
         width: 40vw;
     }