mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-16 22:00:35 -04:00
feat(client): add exam nav (#50776)
This commit is contained in:
Tom
@@ -7,23 +7,19 @@ function MicrosoftLogo(
|
||||
<svg
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 337.6 72'
|
||||
height='800'
|
||||
width='1200'
|
||||
viewBox='-90.585 -32.25 785.07 193.5'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill='var(--primary-color)'
|
||||
d='M140.4,14.4v43.2h-7.5V23.7h-0.1l-13.4,33.9h-5l-13.7-33.9h-0.1v33.9h-6.9V14.4h10.8l12.4,32h0.2l13.1-32H140.4 z M146.6,17.7c0-1.2,0.4-2.2,1.3-3c0.9-0.8,1.9-1.2,3.1-1.2c1.3,0,2.4,0.4,3.2,1.2s1.3,1.8,1.3,3c0,1.2-0.4,2.2-1.3,3 c-0.9,0.8-1.9,1.2-3.2,1.2s-2.3-0.4-3.1-1.2C147.1,19.8,146.6,18.8,146.6,17.7z M154.7,26.6v31h-7.3v-31H154.7z M176.8,52.3 c1.1,0,2.3-0.2,3.6-0.8c1.3-0.5,2.5-1.2,3.6-2v6.8c-1.2,0.7-2.5,1.2-4,1.5c-1.5,0.3-3.1,0.5-4.9,0.5c-4.6,0-8.3-1.4-11.1-4.3 c-2.9-2.9-4.3-6.6-4.3-11c0-5,1.5-9.1,4.4-12.3c2.9-3.2,7-4.8,12.4-4.8c1.4,0,2.8,0.2,4.1,0.5c1.4,0.3,2.5,0.8,3.3,1.2v7 c-1.1-0.8-2.3-1.5-3.4-1.9c-1.2-0.4-2.4-0.7-3.6-0.7c-2.9,0-5.2,0.9-7,2.8s-2.6,4.4-2.6,7.6c0,3.1,0.9,5.6,2.6,7.3 C171.6,51.4,173.9,52.3,176.8,52.3z M204.7,26.1c0.6,0,1.1,0,1.6,0.1s0.9,0.2,1.2,0.3v7.4c-0.4-0.3-0.9-0.6-1.7-0.8 s-1.6-0.4-2.7-0.4c-1.8,0-3.3,0.8-4.5,2.3s-1.9,3.8-1.9,7v15.6h-7.3v-31h7.3v4.9h0.1c0.7-1.7,1.7-3,3-4 C201.2,26.6,202.8,26.1,204.7,26.1z M207.9,42.6c0-5.1,1.5-9.2,4.3-12.2c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3 s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2C209.3,51.3,207.9,47.4,207.9,42.6z M215.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6 c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C216.2,36.5,215.5,39,215.5,42.3z M250.5,34.8c0,1,0.3,1.9,1,2.5 c0.7,0.6,2.1,1.3,4.4,2.2c2.9,1.2,5,2.5,6.1,3.9c1.2,1.5,1.8,3.2,1.8,5.3c0,2.9-1.1,5.2-3.4,7c-2.2,1.8-5.3,2.6-9.1,2.6 c-1.3,0-2.7-0.2-4.3-0.5c-1.6-0.3-2.9-0.7-4-1.2v-7.2c1.3,0.9,2.8,1.7,4.3,2.2c1.5,0.5,2.9,0.8,4.2,0.8c1.6,0,2.9-0.2,3.6-0.7 c0.8-0.5,1.2-1.2,1.2-2.3c0-1-0.4-1.8-1.2-2.6c-0.8-0.7-2.4-1.5-4.6-2.4c-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4 c0-2.8,1.1-5.1,3.3-6.9c2.2-1.8,5.1-2.7,8.6-2.7c1.1,0,2.3,0.1,3.6,0.4s2.5,0.6,3.4,0.9V34c-1-0.6-2.1-1.2-3.4-1.7 c-1.3-0.5-2.6-0.7-3.8-0.7c-1.4,0-2.5,0.3-3.2,0.8C250.9,33.1,250.5,33.8,250.5,34.8z M266.9,42.6c0-5.1,1.5-9.2,4.3-12.2 c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2 C268.4,51.3,266.9,47.4,266.9,42.6z M274.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6 c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C275.3,36.5,274.5,39,274.5,42.3z M322.9,32.6h-10.9v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2,1.1-5.9,3.2-8s4.8-3.1,8.1-3.1c0.9,0,1.7,0.1,2.4,0.1s1.3,0.2,1.8,0.4v6.3 c-0.2-0.1-0.7-0.3-1.3-0.5c-0.6-0.2-1.3-0.3-2.1-0.3c-1.5,0-2.7,0.5-3.5,1.4c-0.8,0.9-1.2,2.4-1.2,4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4 v6h-7.4v14.5c0,1.9,0.4,3.2,1,4c0.7,0.8,1.8,1.2,3.3,1.2c0.4,0,0.9-0.1,1.5-0.3c0.6-0.2,1.1-0.4,1.5-0.7v6c-0.5,0.3-1.2,0.5-2.3,0.7 c-1.1,0.2-2.1,0.3-3.2,0.3c-3.1,0-5.4-0.8-6.9-2.4c-1.5-1.6-2.3-4.1-2.3-7.4L322.9,32.6L322.9,32.6z'
|
||||
/>
|
||||
<rect fill='var(--primary-color)' width='34.2' height='34.2' />
|
||||
<rect x='37.8' fill='var(--primary-color)' width='34.2' height='34.2' />
|
||||
<rect y='37.8' fill='var(--primary-color)' width='34.2' height='34.2' />
|
||||
<rect
|
||||
x='37.8'
|
||||
y='37.8'
|
||||
fill='var(--primary-color)'
|
||||
width='34.2'
|
||||
height='34.2'
|
||||
fill='#FFF'
|
||||
d='M213.2 74.3l-3.6 10.2h-.3c-.6-2.3-1.7-5.8-3.5-10L186.5 26h-18.9v77.3h12.5V55.6c0-3 0-6.4-.1-10.6-.1-2.1-.3-3.7-.4-4.9h.3c.6 3 1.3 5.2 1.8 6.6l23.2 56.4h8.8l23-56.9c.5-1.3 1-3.9 1.5-6.1h.3c-.3 5.7-.5 10.8-.6 13.9v49h13.3V25.8H233zm50.6-26.7h13V103h-13zm6.6-23.4c-2.2 0-4 .8-5.5 2.2-1.5 1.4-2.3 3.2-2.3 5.4 0 2.1.8 3.9 2.3 5.3 1.5 1.4 3.3 2.1 5.5 2.1s4.1-.8 5.5-2.1c1.5-1.4 2.3-3.2 2.3-5.3 0-2.1-.8-3.9-2.3-5.4-1.3-1.4-3.2-2.2-5.5-2.2m52.5 22.9c-2.4-.5-4.9-.8-7.3-.8-5.9 0-11.3 1.3-15.8 3.9-4.5 2.6-8.1 6.2-10.4 10.7-2.4 4.6-3.6 9.9-3.6 16 0 5.3 1.2 10 3.5 14.3 2.3 4.2 5.5 7.6 9.8 9.9 4.1 2.3 8.9 3.5 14.3 3.5 6.2 0 11.5-1.3 15.7-3.7l.1-.1v-12l-.5.4c-1.9 1.4-4.1 2.6-6.3 3.3-2.3.8-4.4 1.2-6.2 1.2-5.2 0-9.3-1.5-12.2-4.8-3-3.2-4.5-7.6-4.5-13.1 0-5.7 1.5-10.2 4.6-13.5 3.1-3.3 7.2-5 12.2-5 4.2 0 8.5 1.4 12.4 4.2l.5.4V49.2l-.1-.1c-1.7-.7-3.6-1.5-6.2-2m42.9-.4c-3.2 0-6.2 1-8.8 3.1-2.2 1.8-3.7 4.4-5 7.5h-.1v-9.7h-13V103h13V74.7c0-4.8 1-8.8 3.2-11.7 2.2-3 5-4.5 8.4-4.5 1.2 0 2.4.3 3.9.5 1.4.4 2.4.8 3.1 1.3l.5.4v-13l-.3-.1c-.9-.6-2.7-.9-4.9-.9m35.4-.3c-9.1 0-16.4 2.7-21.5 8-5.2 5.3-7.7 12.6-7.7 21.8 0 8.6 2.6 15.6 7.6 20.7 5 5 11.8 7.6 20.3 7.6 8.9 0 16-2.7 21.1-8.1 5.2-5.4 7.7-12.6 7.7-21.5 0-8.8-2.4-15.8-7.3-20.9-4.7-5.1-11.6-7.6-20.2-7.6M411.6 89c-2.4 3.1-6.2 4.6-10.9 4.6s-8.5-1.5-11.2-4.8c-2.7-3.1-4-7.6-4-13.3 0-5.9 1.4-10.4 4-13.6 2.7-3.2 6.4-4.8 11.1-4.8 4.6 0 8.2 1.5 10.8 4.6 2.6 3.1 4 7.6 4 13.5-.2 6-1.3 10.7-3.8 13.8m46.1-18.4c-4.1-1.7-6.7-3-7.9-4.1-1-1-1.5-2.4-1.5-4.2 0-1.5.6-3 2.1-4s3.2-1.5 5.7-1.5c2.2 0 4.5.4 6.7 1s4.2 1.5 5.8 2.7l.5.4V48.7l-.3-.1c-1.5-.6-3.5-1.2-5.9-1.7-2.4-.4-4.6-.6-6.4-.6-6.2 0-11.3 1.5-15.3 4.8-4 3.1-5.9 7.3-5.9 12.2 0 2.6.4 4.9 1.3 6.8.9 1.9 2.2 3.7 4 5.2 1.8 1.4 4.4 3 8 4.5 3 1.3 5.3 2.3 6.7 3.1 1.4.8 2.3 1.7 3 2.4.5.8.8 1.8.8 3.1 0 3.7-2.8 5.5-8.5 5.5-2.2 0-4.5-.4-7.2-1.3s-5.2-2.2-7.3-3.7l-.5-.4v12.7l.3.1c1.9.9 4.2 1.5 7 2.2 2.8.5 5.3.9 7.5.9 6.7 0 12.2-1.5 16.1-4.8 4-3.2 6.1-7.3 6.1-12.6 0-3.7-1-7-3.2-9.5-2.9-2.4-6.5-4.9-11.7-6.9m49.2-24.2c-9.1 0-16.4 2.7-21.5 8-5.1 5.3-7.7 12.6-7.7 21.8 0 8.6 2.6 15.6 7.6 20.7 5 5 11.8 7.6 20.3 7.6 8.9 0 16-2.7 21.1-8.1 5.2-5.4 7.7-12.6 7.7-21.5 0-8.8-2.4-15.8-7.3-20.9-4.7-5.1-11.6-7.6-20.2-7.6M517.2 89c-2.4 3.1-6.2 4.6-10.9 4.6-4.8 0-8.5-1.5-11.2-4.8-2.7-3.1-4-7.6-4-13.3 0-5.9 1.4-10.4 4-13.6 2.7-3.2 6.4-4.8 11.1-4.8 4.5 0 8.2 1.5 10.8 4.6 2.6 3.1 4 7.6 4 13.5 0 6-1.3 10.7-3.8 13.8m86.7-30.7V47.6h-13.1V31.2l-.4.1L578 35l-.3.1v12.5h-19.6v-7c0-3.2.8-5.7 2.2-7.3 1.4-1.6 3.5-2.4 6.1-2.4 1.8 0 3.7.4 5.8 1.3l.5.3V21.2l-.3-.1c-1.8-.6-4.2-1-7.3-1-3.9 0-7.3.9-10.4 2.4-3.1 1.7-5.4 4-7.1 7.1-1.7 3-2.6 6.4-2.6 10.3v7.7h-9.1v10.6h9.1V103h13.1V58.3h19.6v28.5c0 11.7 5.5 17.6 16.5 17.6 1.8 0 3.7-.3 5.5-.6 1.9-.4 3.3-.9 4.1-1.3l.1-.1V91.7l-.5.4c-.8.5-1.5.9-2.7 1.2-1 .3-1.9.4-2.6.4-2.6 0-4.4-.6-5.7-2.1-1.2-1.4-1.8-3.7-1.8-7.1V58.3z'
|
||||
/>
|
||||
<path d='M0 0h61.3v61.3H0z' fill='#F25022' />
|
||||
<path d='M67.7 0H129v61.3H67.7z' fill='#7FBA00' />
|
||||
<path d='M0 67.7h61.3V129H0z' fill='#00A4EF' />
|
||||
<path d='M67.7 67.7H129V129H67.7z' fill='#FFB900' />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
37
client/src/components/Header/components/exam-nav.css
Normal file
37
client/src/components/Header/components/exam-nav.css
Normal file
@@ -0,0 +1,37 @@
|
||||
.exam-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 80px;
|
||||
background: var(--theme-color);
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.exam-nav .logo {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.exam-nav .freecodecamp-logo svg {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.exam-nav .partner-logo svg {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.exam-nav .freecodecamp-logo svg {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
24
client/src/components/Header/components/exam-nav.tsx
Normal file
24
client/src/components/Header/components/exam-nav.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FreeCodeCampLogo from '../../../assets/icons/freecodecamp';
|
||||
import MicrosoftLogo from '../../../assets/icons/microsoft-logo';
|
||||
|
||||
import './exam-nav.css';
|
||||
|
||||
const ExamNav = (): JSX.Element => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<nav aria-label={t('aria.primary-nav')} className='exam-nav' id='exam-nav'>
|
||||
<div className='logo freecodecamp-logo'>
|
||||
<FreeCodeCampLogo aria-hidden='true' />
|
||||
</div>
|
||||
<div className='logo partner-logo'>
|
||||
<MicrosoftLogo aria-hidden='true' />
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
ExamNav.displayName = 'ExamNav';
|
||||
export default ExamNav;
|
||||
@@ -3,17 +3,30 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable @typescript-eslint/unbound-method */
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
import { User } from '../../redux/prop-types';
|
||||
import { examInProgressSelector } from '../../redux/selectors';
|
||||
|
||||
import UniversalNav from './components/universal-nav';
|
||||
import ExamNav from './components/exam-nav';
|
||||
|
||||
import './header.css';
|
||||
|
||||
const mapStateToProps = createSelector(
|
||||
examInProgressSelector,
|
||||
(examInProgress: boolean) => ({
|
||||
examInProgress
|
||||
})
|
||||
);
|
||||
|
||||
interface HeaderProps {
|
||||
examInProgress: boolean;
|
||||
fetchState: { pending: boolean };
|
||||
user: User;
|
||||
skipButtonText: string;
|
||||
}
|
||||
|
||||
class Header extends React.Component<HeaderProps, { displayMenu: boolean }> {
|
||||
menuButtonRef: React.RefObject<HTMLButtonElement>;
|
||||
searchBarRef: React.RefObject<any>;
|
||||
@@ -63,21 +76,25 @@ class Header extends React.Component<HeaderProps, { displayMenu: boolean }> {
|
||||
|
||||
render(): JSX.Element {
|
||||
const { displayMenu } = this.state;
|
||||
const { fetchState, user, skipButtonText } = this.props;
|
||||
const { examInProgress, fetchState, user, skipButtonText } = this.props;
|
||||
return (
|
||||
<header>
|
||||
<a href='#content-start' className='skip-to-content-button'>
|
||||
{skipButtonText}
|
||||
</a>
|
||||
<UniversalNav
|
||||
displayMenu={displayMenu}
|
||||
fetchState={fetchState}
|
||||
hideMenu={this.hideMenu}
|
||||
menuButtonRef={this.menuButtonRef}
|
||||
searchBarRef={this.searchBarRef}
|
||||
showMenu={this.showMenu}
|
||||
user={user}
|
||||
/>
|
||||
{examInProgress ? (
|
||||
<ExamNav />
|
||||
) : (
|
||||
<UniversalNav
|
||||
displayMenu={displayMenu}
|
||||
fetchState={fetchState}
|
||||
hideMenu={this.hideMenu}
|
||||
menuButtonRef={this.menuButtonRef}
|
||||
searchBarRef={this.searchBarRef}
|
||||
showMenu={this.showMenu}
|
||||
user={user}
|
||||
/>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -85,4 +102,4 @@ class Header extends React.Component<HeaderProps, { displayMenu: boolean }> {
|
||||
|
||||
Header.displayName = 'Header';
|
||||
|
||||
export default Header;
|
||||
export default connect(mapStateToProps, null)(Header);
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
.exam-wrapper {
|
||||
margin-top: 60px;
|
||||
padding: 25px;
|
||||
background-color: var(--primary-background);
|
||||
border: 2px solid var(--tertiary-background);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.exam-wrapper {
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.exam-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -491,8 +491,6 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
|
||||
const windowTitle = `${blockNameTitle} | freeCodeCamp.org`;
|
||||
const ariaLabel = t('aria.answer');
|
||||
|
||||
console.log(this.state);
|
||||
|
||||
return examInProgress ? (
|
||||
<Grid>
|
||||
<Row>
|
||||
|
||||
Reference in New Issue
Block a user