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) {
return codingPrepRE.test(str)
? `${str} (Thousands of hours of challenges)`
: `${str} Certification (300 hours)`;
: `${str} Certification (300\xa0hours)`;
}
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('h4')
.text()
).toBe('Super Block One Certification (300 hours)');
).toBe('Super Block One Certification (300\xa0hours)');
expect(enzymeWrapper.find('ul').length).toBe(0);
enzymeWrapper.find('.map-title').simulate('click');
@ -76,6 +76,6 @@ test('<SuperBlock should handle toggle clicks correctly', () => {
.find('.map-title')
.find('h4')
.text()
).toBe('Super Block One Certification (300 hours)');
).toBe('Super Block One Certification (300\xa0hours)');
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 />
<h4>
Super Block One Certification (300 hours)
Super Block One Certification (300 hours)
</h4>
</button>
<ul>
@ -149,7 +149,7 @@ exports[`<SuperBlock /> not expanded snapshot: superBlock-not-expanded 1`] = `
>
<Caret />
<h4>
Super Block One Certification (300 hours)
Super Block One Certification (300 hours)
</h4>
</button>
</li>

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

@ -19,6 +19,7 @@ button.map-title {
padding-bottom: 18px;
background: transparent;
border: none;
text-align: left;
}
button.map-title:hover {
@ -49,10 +50,39 @@ li.open > .map-title svg:first-child {
}
.map-challenge-title {
display: flex;
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 {
text-decoration: none;
}
/* 14px is the width of the expansion arrow */
.superblock {
max-width: calc(100% - 14px);
}