jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-23 21:07:12 -05:00
Code Issues Projects Releases Wiki Activity

Scope sub-landing scss and remove some custom styles (#20893)

Browse Source 
* scope sub-landing scss and remove some custom styles
This commit is contained in:
Mike Surowiec
2021-08-16 13:22:21 -04:00
committed by GitHub
parent 900ba6dff4
commit 4b9a6912b9
8 changed files with 66 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/sublanding/SubLandingHero.tsx
View File

@@ -3,24 +3,26 @@ import { useProductSubLandingContext } from 'components/context/ProductSubLandin
import { ArrowRightIcon, StarFillIcon } from '@primer/octicons-react'
import { useTranslation } from 'components/hooks/useTranslation'
import { Link } from 'components/Link'
import { TruncateLines } from 'components/TruncateLines'
export const SubLandingHero = () => {
const { title, intro, featuredTrack } = useProductSubLandingContext()
const { t } = useTranslation('product_sublanding')
const cardWidth = 280
const guideItems = featuredTrack?.guides?.map((guide) => (
<li className="px-2 d-flex flex-shrink-0" key={guide.href}>
<li className="px-2 d-flex flex-shrink-0" key={guide.href} style={{ width: cardWidth }}>
<Link
href={`${guide.href}?learn=${featuredTrack.trackName}`}
className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline"
>
<div className="d-flex flex-justify-between flex-items-center">
<div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
<div
className="color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex flex-items-center flex-justify-center circle"
style={{ width: 40, height: 40 }}
>
{featuredTrack.guides && (
<span
className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text"
style={{ width: '24px', height: '24px' }}
>
<span className="f2 lh-condensed-ultra text-center text-bold">
{featuredTrack.guides?.indexOf(guide) + 1}
</span>
)}
@@ -30,10 +32,9 @@ export const SubLandingHero = () => {
</div>
</div>
<h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
<div
className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8"
dangerouslySetInnerHTML={{ __html: guide.intro }}
/>
<TruncateLines maxLines={8} className="lead-mktg color-text-secondary f5 my-4">
<span dangerouslySetInnerHTML={{ __html: guide.intro }} />
</TruncateLines>
</Link>
</li>
))
@@ -45,21 +46,24 @@ export const SubLandingHero = () => {
<Breadcrumbs variant="large" />
<h1 className="my-3 font-mktg">{title} guides</h1>
<div
className="lead-mktg color-text-secondary f4 description-text"
className="lead-mktg color-text-secondary f4"
dangerouslySetInnerHTML={{ __html: intro }}
/>
</div>
</header>
{featuredTrack && (
<div className="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
<ul className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
<li className="px-2 d-flex flex-shrink-0">
<ul
data-testid="feature-track"
className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2"
>
<li className="px-2 d-flex flex-shrink-0" style={{ width: cardWidth }}>
<div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
<div
className="circle color-text-inverse d-inline-flex"
style={{ border: '2px white solid' }}
className="color-text-inverse d-inline-flex flex-items-center flex-justify-center circle"
style={{ width: 40, height: 40, border: '2px white solid' }}
>
<StarFillIcon className="v-align-middle m-2" size={24} />
<StarFillIcon size={24} />
</div>
<h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
<div className="lead-mktg color-text-inverse f5 my-4">
@@ -67,22 +71,20 @@ export const SubLandingHero = () => {
</div>
{featuredTrack.guides && (
<Link
className="d-inline-block border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold"
className="d-inline-flex flex-items-center flex-justify-center border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold"
role="button"
href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}
>
<span className="mr-2">
<ArrowRightIcon size={20} />
</span>
{t(`start_path`)}
<ArrowRightIcon size={20} className="ml-2" />
</Link>
)}
</div>
</li>
{guideItems}
</ul>
<div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-background-left"></div>
<div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-background-right"></div>
<div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-tertiary-left"></div>
<div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-tertiary-right"></div>
</div>
)}
</div>