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

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

Browse Source
This commit is contained in:
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
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} superBlockDashedName={superBlockDashedName}
/> />
{blockDashedName !== 'project-euler' ? (
<Spacer size={2} />
) : null}
</div> </div>
))} ))}
{superBlock !== 'Coding Interview Prep' && ( {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 Caret from '../../../assets/icons/Caret';
import GreenPass from '../../../assets/icons/GreenPass'; import GreenPass from '../../../assets/icons/GreenPass';
import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted'; import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
import { Spacer } from '../../../components/helpers';
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName); const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
@ -166,7 +165,6 @@ export class Block extends Component {
isProjectBlock={isProjectBlock} isProjectBlock={isProjectBlock}
/> />
)} )}
{blockDashedName !== 'project-euler' ? <Spacer size={2} /> : null}
</div> </div>
); );
} }

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

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