Layout fixes (#2623)

* Layout fixes

* Explicit top position and test factory values for certificate type

Author: jonkafton

frontends/api/src/test-utils/factories/learningResources.ts

@@ -39,6 +39,7 @@ import {
   ResourceTypeEnum,
   LearningResourceRunLevelInnerCodeEnum,
   PlatformEnum,
+  CourseResourceCertificationTypeCodeEnum,
 } from "api"
 
 const uniqueEnforcerId = new UniqueEnforcer()
@@ -343,6 +344,9 @@ const learningResourceSummary: LearningResourceFactory<
 const learningResourceSummaries = makePaginatedFactory(learningResourceSummary)
 
 const program: PartialFactory<ProgramResource> = (overrides = {}) => {
+  const certificationCode = faker.helpers.enumValue(
+    CourseResourceCertificationTypeCodeEnum,
+  )
   return mergeOverrides<ProgramResource>(
     _learningResourceShared(),
     { resource_type: ResourceTypeEnum.Program },
@@ -353,13 +357,28 @@ const program: PartialFactory<ProgramResource> = (overrides = {}) => {
       program: {
         course_count: faker.number.int({ min: 0, max: 8 }),
       },
+      certification_type: {
+        code: certificationCode,
+        name: {
+          [CourseResourceCertificationTypeCodeEnum.Professional]:
+            "Professional Certificate",
+          [CourseResourceCertificationTypeCodeEnum.Micromasters]:
+            "MicroMasters Credential",
+          [CourseResourceCertificationTypeCodeEnum.Completion]:
+            "Certificate of Completion",
+          [CourseResourceCertificationTypeCodeEnum.None]: "No Certificate",
+        }[certificationCode],
+      },
     },
     overrides,
   )
 }
 const programs = makePaginatedFactory(program)
 
 const course: LearningResourceFactory<CourseResource> = (overrides = {}) => {
+  const certificationCode = faker.helpers.enumValue(
+    CourseResourceCertificationTypeCodeEnum,
+  )
   return mergeOverrides<CourseResource>(
     _learningResourceShared(),
     { resource_type: ResourceTypeEnum.Course },
@@ -368,6 +387,18 @@ const course: LearningResourceFactory<CourseResource> = (overrides = {}) => {
       platform: learningResourcePlatform(),
       runs: repeat(learningResourceRun, { min: 1, max: 5 }),
       certification: faker.datatype.boolean(),
+      certification_type: {
+        code: certificationCode,
+        name: {
+          [CourseResourceCertificationTypeCodeEnum.Professional]:
+            "Professional Certificate",
+          [CourseResourceCertificationTypeCodeEnum.Micromasters]:
+            "MicroMasters Credential",
+          [CourseResourceCertificationTypeCodeEnum.Completion]:
+            "Certificate of Completion",
+          [CourseResourceCertificationTypeCodeEnum.None]: "No Certificate",
+        }[certificationCode],
+      },
       course: {
         course_numbers:
           maybe(() => repeat(learningResourceCourseNumber)) ?? null,

frontends/main/src/app-pages/DashboardPage/DashboardLayout.tsx

@@ -74,8 +74,10 @@ const Background = styled.div(({ theme }) => ({
   },
 }))
 
+const PADDING_TOP = 40
+
 const PageContainer = styled(Container)({
-  paddingTop: "40px",
+  paddingTop: PADDING_TOP,
   paddingBottom: "80px",
 })
 
@@ -97,15 +99,16 @@ const DashboardGridItem = styled.div({
   },
 })
 
-const ProfileSidebar = styled(Card)({
-  position: "fixed",
+const ProfileSidebar = styled(Card)(({ theme }) => ({
+  position: "sticky",
+  top: `${theme.custom.dimensions.headerHeight + PADDING_TOP}px`,
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
   width: "300px",
   boxShadow: "-4px 4px 0px 0px #A31F34",
   transform: "translateX(4px)", // keep solid shadow from bleeding into page margins
-})
+}))
 
 const ProfilePhotoContainer = styled.div(({ theme }) => ({
   display: "flex",

frontends/main/src/app-pages/HomePage/NewsEventsSection.tsx

@@ -110,7 +110,6 @@ const EventCard = styled(Card)`
   gap: 16px;
   flex: 1 0 0;
   align-self: stretch;
-  justify-content: space-between;
   overflow: visible;
   padding: 16px;
 `
@@ -142,7 +141,8 @@ const EventMonth = styled.p`
   ${{ ...theme.typography.subtitle3 }}
 `
 
-const EventTitle = styled.p`
+const EventTitle = styled(Link)`
+  flex-grow: 1;
   color: ${theme.custom.colors.darkGray2};
   ${{ ...theme.typography.subtitle1 }}
   margin: 0;
@@ -238,9 +238,9 @@ const NewsEventsSection: React.FC = () => {
             />
           </EventMonth>
         </EventDate>
-        <Link href={item.url} data-card-link>
-          <EventTitle>{item.title}</EventTitle>
-        </Link>
+        <EventTitle href={item.url} data-card-link>
+          {item.title}
+        </EventTitle>
         <Chevron />
       </Card.Content>
     </EventCard>

frontends/ol-components/src/components/Card/ListCard.tsx

@@ -22,6 +22,7 @@ export const Body = styled.div`
   margin: 24px;
   ${theme.breakpoints.down("md")} {
     margin: 12px;
+    min-width: 190px;
   }
 
   display: flex;

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx

@@ -167,7 +167,7 @@ describe("Learning Resource List Card", () => {
 
     setup({ resource })
 
-    screen.getByText("Certificate")
+    expect(screen.getAllByText("Certificate").length).toEqual(2)
   })
 
   test("Displays certificate type", () => {
@@ -239,6 +239,7 @@ describe("Learning Resource List Card", () => {
 
     test('Free course with paid certificate option displays the certificate price and "Free"', () => {
       const resource = factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Course,
         certification: true,
         free: true,
         resource_prices: [
@@ -248,12 +249,14 @@ describe("Learning Resource List Card", () => {
       })
       setup({ resource })
       screen.getByText("Certificate")
+      screen.getByText(resource.certification_type.name)
       screen.getByText(": $49")
       screen.getByText("Free")
     })
 
     test('Free course with paid certificate option range displays the certificate price range and "Free". Prices are sorted correctly', () => {
       const resource = factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Program,
         certification: true,
         free: true,
         resource_prices: [
@@ -263,7 +266,10 @@ describe("Learning Resource List Card", () => {
         ],
       })
       setup({ resource })
+
       screen.getByText("Certificate")
+      screen.getByText(resource.certification_type.name)
+
       screen.getByText(": $49 – $99")
       screen.getByText("Free")
     })

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx

@@ -75,6 +75,18 @@ const CertificateText = styled.div`
   display: flex;
 `
 
+const MobileOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.up("sm")]: {
+    display: "none",
+  },
+}))
+
+const DesktopOnly = styled.div(({ theme }) => ({
+  [theme.breakpoints.down("sm")]: {
+    display: "none",
+  },
+}))
+
 const CertificatePrice = styled.div`
   ${{ ...theme.typography.body3 }}
   ${theme.breakpoints.down("md")} {
@@ -121,7 +133,10 @@ const Info = ({ resource }: { resource: LearningResource }) => {
         <Certificate>
           <RiAwardFill />
           <CertificateText>
-            {resource.certification_type?.name || "Certificate"}
+            <MobileOnly>Certificate</MobileOnly>
+            <DesktopOnly>
+              {resource.certification_type?.name || "Certificate"}
+            </DesktopOnly>
             <CertificatePrice>
               {prices.certificate.display ? ": " : ""}{" "}
               {prices.certificate.display}