gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): modify breadcrumb design (#40835)

Browse Source
This commit is contained in:
Nicholas Carrigan (he/him)
2021-01-31 20:33:36 -08:00
committed by GitHub
parent 7eb6bfc127
commit 8867e2dcbc
3 changed files with 104 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/templates/Challenges/components/Challenge-Title.js
View File

@ -16,15 +16,22 @@ const propTypes = {
function ChallengeTitle({ block, children, isCompleted, superBlock }) {
return (
<div className='challenge-title-wrap'>
<Link to={`/learn/${dasherize(superBlock)}`}>{superBlock}</Link>
{' >> '}
<Link
state={{ breadcrumbBlockClick: block }}
to={`/learn/${dasherize(superBlock)}`}
>
{block}
</Link>
{' >> '}
<div className='challenge-title-breadcrumbs'>
<Link
className='breadcrumb-left'
to={`/learn/${dasherize(superBlock)}`}
>
<span className='ellipsis'>{superBlock}</span>
</Link>
<div className='breadcrumb-center' />
<Link
className='breadcrumb-right'
state={{ breadcrumbBlockClick: block }}
to={`/learn/${dasherize(superBlock)}`}
>
{block}
</Link>
</div>
<b>{children}</b>
{isCompleted ? (
<GreenPass

35
client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
View File

@ -4,19 +4,30 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
<div
className="challenge-title-wrap"
>
<a
href="/learn/undefined"
/>
&gt;&gt;
<a
href="/learn/undefined"
state={
Object {
"breadcrumbBlockClick": undefined,
<div
className="challenge-title-breadcrumbs"
>
<a
className="breadcrumb-left"
href="/learn/undefined"
>
<span
className="ellipsis"
/>
</a>
<div
className="breadcrumb-center"
/>
<a
className="breadcrumb-right"
href="/learn/undefined"
state={
Object {
"breadcrumbBlockClick": undefined,
}
}
}
/>
&gt;&gt;
/>
</div>
<b>
title text
</b>

66
client/src/templates/Challenges/components/challenge-title.css
View File

@ -1,4 +1,68 @@
.challenge-title-wrap {
padding: 10px 15px;
text-align: center;
}
.challenge-title-breadcrumbs {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 16px;
margin-left: -10px;
margin-right: -10px;
border-bottom: 2px solid var(--secondary-color);
height: 25px;
}
.breadcrumb-left {
text-decoration: none;
min-width: 25px;
display: inline-block;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
max-height: 25px;
word-wrap: none;
white-space: nowrap;
flex-grow: 1;
flex-shrink: 2;
background-color: var(--quaternary-background);
}
.breadcrumb-center {
width: 0;
height: 0;
border-top: calc(23px / 2) solid transparent;
border-bottom: calc(23px / 2) solid transparent;
border-left: calc(23px / 2) solid var(--quaternary-background);
flex-grow: 0;
flex-shrink: 0;
}
.breadcrumb-right {
text-decoration: none;
display: inline-block;
align-items: center;
justify-content: center;
max-height: 25px;
min-width: 50px;
flex-grow: 2;
flex-shrink: 1;
word-wrap: none;
overflow: hidden;
text-overflow: ellipsis;
max-height: 20px;
white-space: nowrap;
}
.breadcrumb-rule {
margin: 5px -10px;
}
.breadcrumb-left:hover {
background-color: var(--quaternary-background);
}
.breadcrumb-right:hover {
background-color: rgba(0, 0, 0, 0);
}