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

fix(client): update breadcrumb navigation (#40853)

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2021-02-02 07:23:19 +03:00
committed by GitHub
parent a3a678b7af
commit e0e86c4ce9
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,9 @@ function ChallengeTitle({ block, children, isCompleted, superBlock }) {
{block} {block}
</Link> </Link>
</div> </div>
<b>{children}</b> <div className='challenge-title'>
<b>{children}</b>
</div>
{isCompleted ? ( {isCompleted ? (
<GreenPass <GreenPass
style={{ height: '15px', width: '15px', marginLeft: '7px' }} style={{ height: '15px', width: '15px', marginLeft: '7px' }}

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

@ -28,9 +28,13 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
} }
/> />
</div> </div>
<b> <div
title text className="challenge-title"
</b> >
<b>
title text
</b>
</div>
<span <span
className="sr-only" className="sr-only"
> >

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

@ -2,6 +2,10 @@
text-align: center; text-align: center;
} }
.challenge-title {
margin: 20px 0px 15px;
}
.challenge-title-breadcrumbs { .challenge-title-breadcrumbs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -9,7 +13,7 @@
font-size: 16px; font-size: 16px;
margin-left: -10px; margin-left: -10px;
margin-right: -10px; margin-right: -10px;
border-bottom: 2px solid var(--secondary-color); border-bottom: 1px solid var(--quaternary-color);
height: 25px; height: 25px;
} }
@ -32,7 +36,7 @@
.breadcrumb-center { .breadcrumb-center {
width: 0; width: 0;
height: 0; height: 0;
border-top: calc(23px / 2) solid transparent; border-top: calc(25px / 2) solid transparent;
border-bottom: calc(23px / 2) solid transparent; border-bottom: calc(23px / 2) solid transparent;
border-left: calc(23px / 2) solid var(--quaternary-background); border-left: calc(23px / 2) solid var(--quaternary-background);
flex-grow: 0; flex-grow: 0;
@ -51,7 +55,6 @@
word-wrap: none; word-wrap: none;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-height: 20px;
white-space: nowrap; white-space: nowrap;
} }
@ -60,9 +63,10 @@
} }
.breadcrumb-left:hover { .breadcrumb-left:hover {
text-decoration: underline;
background-color: var(--quaternary-background); background-color: var(--quaternary-background);
} }
.breadcrumb-right:hover { .breadcrumb-right:hover {
background-color: rgba(0, 0, 0, 0); text-decoration: underline;
background-color: var(--secondary-background);
} }