Merge pull request #2033 from kisielewskik/NR-519-Split-procedures-ti…

…les-when-subtasks feat: new styles for subtask in lab
newrelic · Feb 7, 2022 · d38eb9b · d38eb9b
2 parents bf36b09 + 7c41d75
commit d38eb9b
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/src/templates/LabOverviewTemplate.js b/src/templates/LabOverviewTemplate.js
@@ -47,21 +47,43 @@ const LabOverviewTemplate = ({ data, location }) => {
               <GuideListing.List className={labOverviewStyles.labGuideList}>
                 {guides?.nodes
                   .sort(sortProcedures)
-                  .map(({ fields, frontmatter }, index) => (
-                    <GuideTile
-                      className={labOverviewStyles.labGuideCard}
-                      to={fields.slug}
-                      key={index}
-                      duration={frontmatter.duration}
-                      title={`${frontmatter.procIdx}. ${
-                        frontmatter.tileShorthand?.title || frontmatter.title
-                      }`}
-                      description={
-                        frontmatter.tileShorthand?.description ||
-                        frontmatter.description
-                      }
-                    />
-                  ))}
+                  .map(({ fields, frontmatter }, index) => {
+                    const procIdxIsInteger = Number.isInteger(
+                      frontmatter.procIdx
+                    );
+                    return (
+                      <GuideTile
+                        css={css`
+                          width: ${procIdxIsInteger ? '100%' : '90%'};
+                          margin-left: ${procIdxIsInteger ? '0' : '10%'};
+
+                          h3 {
+                            margin-bottom: ${procIdxIsInteger
+                              ? '1rem'
+                              : '0.1rem'};
+                          }
+                          p {
+                            margin-bottom: ${procIdxIsInteger
+                              ? '0.8rem'
+                              : '0.1rem'};
+                          }
+                        `}
+                        className={labOverviewStyles.labGuideCard}
+                        to={fields.slug}
+                        key={index}
+                        duration={frontmatter.duration}
+                        title={`${
+                          procIdxIsInteger ? `${frontmatter.procIdx}.` : ''
+                        } ${
+                          frontmatter.tileShorthand?.title || frontmatter.title
+                        }`}
+                        description={
+                          frontmatter.tileShorthand?.description ||
+                          frontmatter.description
+                        }
+                      />
+                    );
+                  })}
               </GuideListing.List>
             </>
           )}