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

fix: improve map responsiveness (#36827)

Browse Source 
* fix: improve map responsiveness

* fix: update SuperBlock tests
This commit is contained in:
Oliver Eyton-Williams
2019-09-20 20:22:03 +02:00
committed by mrugesh
parent 3a0cd56ad3
commit 0c68f6a605
4 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Map/components/SuperBlock.js
View File

@ -50,7 +50,7 @@ const codingPrepRE = new RegExp('Interview Prep');
function createSuperBlockTitle(str) { function createSuperBlockTitle(str) {
return codingPrepRE.test(str) return codingPrepRE.test(str)
? `${str} (Thousands of hours of challenges)` ? `${str} (Thousands of hours of challenges)`
: `${str} Certification (300 hours)`; : `${str} Certification (300\xa0hours)`;
} }
export class SuperBlock extends Component { export class SuperBlock extends Component {

4
client/src/components/Map/components/SuperBlock.test.js
View File

@ -61,7 +61,7 @@ test('<SuperBlock should handle toggle clicks correctly', () => {
.find('.map-title') .find('.map-title')
.find('h4') .find('h4')
.text() .text()
).toBe('Super Block One Certification (300 hours)'); ).toBe('Super Block One Certification (300\xa0hours)');
expect(enzymeWrapper.find('ul').length).toBe(0); expect(enzymeWrapper.find('ul').length).toBe(0);
enzymeWrapper.find('.map-title').simulate('click'); enzymeWrapper.find('.map-title').simulate('click');
@ -76,6 +76,6 @@ test('<SuperBlock should handle toggle clicks correctly', () => {
.find('.map-title') .find('.map-title')
.find('h4') .find('h4')
.text() .text()
).toBe('Super Block One Certification (300 hours)'); ).toBe('Super Block One Certification (300\xa0hours)');
expect(enzymeWrapper.find('ul').length).toBe(1); expect(enzymeWrapper.find('ul').length).toBe(1);
}); });

4
client/src/components/Map/components/__snapshots__/SuperBlock.test.js.snap
View File

@ -11,7 +11,7 @@ exports[`<SuperBlock /> expanded snapshot: superBlock-expanded 1`] = `
> >
<Caret /> <Caret />
<h4> <h4>
Super Block One Certification (300 hours) Super Block One Certification (300 hours)
</h4> </h4>
</button> </button>
<ul> <ul>
@ -149,7 +149,7 @@ exports[`<SuperBlock /> not expanded snapshot: superBlock-not-expanded 1`] = `
> >
<Caret /> <Caret />
<h4> <h4>
Super Block One Certification (300 hours) Super Block One Certification (300 hours)
</h4> </h4>
</button> </button>
</li> </li>

32
client/src/components/Map/map.css
View File

@ -19,6 +19,7 @@ button.map-title {
padding-bottom: 18px; padding-bottom: 18px;
background: transparent; background: transparent;
border: none; border: none;
text-align: left;
} }
button.map-title:hover { button.map-title:hover {
@ -49,10 +50,39 @@ li.open > .map-title svg:first-child {
} }
.map-challenge-title { .map-challenge-title {
display: flex;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
max-width: calc(100% - 80px); max-width: calc(100% - 105px);
}
@media (max-width: 640px) {
.map-ui .block ul {
padding-inline-start: 6px;
font-size: 0.9rem;
}
button.map-title {
width: 100%;
}
.map-ui ul {
padding-inline-start: 15px;
}
.map-ui > ul {
padding-inline-start: 0;
}
.map-challenge-title {
max-width: 100%;
}
.map-title-completed {
flex-shrink: 0;
padding-left: 15px;
}
} }
.block a { .block a {
text-decoration: none; text-decoration: none;
} }
/* 14px is the width of the expansion arrow */
.superblock {
max-width: calc(100% - 14px);
}