greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(client): add visual hierarchy to card blocks (#40822)

pull/40464/head
Ahmad Abdolsaheb 2021-01-28 20:39:16 +03:00 committed by Mrugesh Mohapatra
parent 6a09b9bce2
commit df014a4715
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/templates/Introduction/SuperBlockIntro.js
View File

@ -190,6 +190,9 @@ export class SuperBlockIntroductionPage extends Component {
)}
superBlockDashedName={superBlockDashedName}
/>
{blockDashedName !== 'project-euler' ? (
<Spacer size={2} />
) : null}
</div>
))}
{superBlock !== 'Coding Interview Prep' && (

2
client/src/templates/Introduction/components/Block.js
View File

@ -11,7 +11,6 @@ import Challenges from './Challenges';
import Caret from '../../../assets/icons/Caret';
import GreenPass from '../../../assets/icons/GreenPass';
import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
import { Spacer } from '../../../components/helpers';
const mapStateToProps = (state, ownProps) => {
const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
@ -166,7 +165,6 @@ export class Block extends Component {
isProjectBlock={isProjectBlock}
/>
)}
{blockDashedName !== 'project-euler' ? <Spacer size={2} /> : null}
</div>
);
}

24
client/src/templates/Introduction/intro.css
View File

@ -51,7 +51,7 @@
button.map-title {
cursor: pointer;
padding: 18px 8px;
padding: 18px 15px;
}
.map-title:hover {
@ -77,7 +77,7 @@ button.map-title {
display: flex;
align-items: center;
padding: 18px 8px;
background: transparent;
background: var(--secondary-background);
border: none;
text-align: left;
width: 100%;
@ -96,6 +96,18 @@ button.map-title {
background-color: var(--tertiary-background);
}
.block-ui .block {
background: var(--primary-background);
}
.block-ui .block .big-block-title {
padding: 25px 15px 10px;
}
.block-ui .block .block-description {
padding: 0 15px 15px;
border-bottom: 3px solid var(--secondary-background);
}
.map-cert-title > h3 {
font-size: 1.17rem;
margin: 0 0 0 15px;
@ -134,10 +146,14 @@ button.map-title {
stroke: var(--color-quaternary);
}
.open > .map-title svg:first-child {
.map-title svg:first-child {
transform: rotate(90deg);
}
.open > .map-title svg:first-child {
transform: rotate(-90deg);
}
.map-challenges-ul {
padding-inline-start: 0;
}
@ -151,7 +167,7 @@ button.map-title {
.map-challenge-title a {
width: 100%;
padding: 10px 20px 10px 30px;
padding: 10px 15px;
}
.block-description {