Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: clean up portfolio #54712

Merged
merged 2 commits into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions client/i18n/locales/english/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,7 @@
"longest-streak": "Longest Streak:",
"current-streak": "Current Streak:",
"projects": "Projects",
"stats": "Stats",
"timeline": "Timeline",
"none-completed": "No challenges have been completed yet.",
"get-started": "Get started here.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,17 @@ exports[`should check certification page consistency 1`] = `
<div
className=" min-h-[1px] px-[15px] w-full md:w-2/3 md:ml-[16.6%] "
>
<h2
className="text-center"
>
<h2>
profile.timeline
</h2>
<div
className="spacer"
style={
{
"padding": "5px 0",
}
}
/>
<table
className="table-auto w-full max-w-full border-collapse text-left text-foreground-tertiary [&_th]:font-normal [&_td]:p-1 [&_th]:p-1 [&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary"
>
Expand Down
3 changes: 0 additions & 3 deletions client/src/components/profile/components/certifications.css

This file was deleted.

34 changes: 14 additions & 20 deletions client/src/components/profile/components/certifications.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { Col, Row } from '@freecodecamp/ui';

import { certificatesByNameSelector } from '../../../redux/selectors';
import type { CurrentCert } from '../../../redux/prop-types';
import { FullWidthRow, Link, Spacer } from '../../helpers';
import './certifications.css';

const mapStateToProps = (
state: Record<string, unknown>,
Expand Down Expand Up @@ -48,19 +46,15 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
const { t } = useTranslation();
return (
<>
<Row>
<Col className='certifications' sm={10} smOffset={1}>
<Link
className='btn btn-lg btn-primary btn-block'
to={`/certification/${username}/${cert.certSlug}`}
data-cy='claimed-certification'
>
{t('buttons.view-cert-title', {
certTitle: t(`certification.title.${cert.certSlug}`)
})}
</Link>
</Col>
</Row>
<Link
className='btn btn-lg btn-primary btn-block'
to={`/certification/${username}/${cert.certSlug}`}
data-cy='claimed-certification'
>
{t('buttons.view-cert-title', {
certTitle: t(`certification.title.${cert.certSlug}`)
})}
</Link>
<Spacer size='small' />
</>
);
Expand All @@ -76,7 +70,7 @@ function Certificates({
const { t } = useTranslation();
return (
<FullWidthRow className='certifications'>
<h2 className='text-center'>{t('profile.fcc-certs')}</h2>
<h2>{t('profile.fcc-certs')}</h2>
<br />
{hasModernCert && currentCerts ? (
currentCerts
Expand All @@ -89,9 +83,9 @@ function Certificates({
)}
{hasLegacyCert ? (
<div>
<br />
<h3 className='text-center'>{t('settings.headings.legacy-certs')}</h3>
<br />
<Spacer size='medium' />
<h3>{t('settings.headings.legacy-certs')}</h3>
<Spacer size='medium' />
{legacyCerts &&
legacyCerts
.filter(({ show }) => show)
Expand All @@ -102,7 +96,7 @@ function Certificates({
username={username}
/>
))}
<Spacer size='large' />
<Spacer size='medium' />
</div>
) : null}
<hr />
Expand Down
51 changes: 26 additions & 25 deletions client/src/components/profile/components/heat-map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,31 +98,6 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {

return (
<FullWidthRow>
<Row className='heatmap-nav'>
<button
className='heatmap-nav-btn'
disabled={!pages[this.state.pageIndex - 1]}
// eslint-disable-next-line @typescript-eslint/unbound-method
onClick={this.prevPage}
style={{
visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
}}
>
&lt;
</button>
<span>{title}</span>
<button
className='heatmap-nav-btn'
disabled={!pages[this.state.pageIndex + 1]}
// eslint-disable-next-line @typescript-eslint/unbound-method
onClick={this.nextPage}
style={{
visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
}}
>
&gt;
</button>
</Row>
<Spacer size='medium' />

<CalendarHeatMap
Expand Down Expand Up @@ -162,6 +137,32 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
values={dataToDisplay}
/>
<ReactTooltip className='react-tooltip' effect='solid' html={true} />
<Row className='text-center'>
<button
className='heatmap-nav-btn'
disabled={!pages[this.state.pageIndex - 1]}
// eslint-disable-next-line @typescript-eslint/unbound-method
onClick={this.prevPage}
style={{
visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
}}
>
&lt;
</button>
<span>{title}</span>
<button
className='heatmap-nav-btn'
disabled={!pages[this.state.pageIndex + 1]}
// eslint-disable-next-line @typescript-eslint/unbound-method
onClick={this.nextPage}
style={{
visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
}}
>
&gt;
</button>
</Row>
<Spacer size='medium' />
<hr />
</FullWidthRow>
);
Expand Down
4 changes: 0 additions & 4 deletions client/src/components/profile/components/heatmap.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.heatmap-nav {
text-align: center;
}

.heatmap-nav-btn {
margin: 0 20px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import type { PortfolioProjectData } from '../../../redux/prop-types';
import './portfolio-projects.css';
import { FullWidthRow } from '../../helpers';
import { FullWidthRow, Spacer } from '../../helpers';

interface PortfolioProjectsProps {
portfolioProjects: PortfolioProjectData[];
Expand All @@ -17,7 +17,7 @@ export const PortfolioProjects = ({
}
return (
<FullWidthRow>
<h2 className='text-center'>{t('profile.projects')}</h2>
<h2>{t('profile.projects')}</h2>
{portfolioProjects.map(({ title, url, image, description, id }) => (
<a
href={url}
Expand Down Expand Up @@ -48,6 +48,7 @@ export const PortfolioProjects = ({
</div>
</a>
))}
<Spacer size='medium' />
<hr />
</FullWidthRow>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/profile/components/stats.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ function Stats({ points, calendar }: StatsProps): JSX.Element {

return (
<FullWidthRow>
<h2 className='text-center'>Stats</h2>
<h2>{t('profile.stats')}</h2>
<Spacer size='small' />
<dl className='stats'>
<div>
Expand Down
5 changes: 3 additions & 2 deletions client/src/components/profile/components/time-line.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { CompletedChallenge } from '../../../redux/prop-types';
import ProjectPreviewModal from '../../../templates/Challenges/components/project-preview-modal';
import ExamResultsModal from '../../SolutionViewer/exam-results-modal';
import { openModal } from '../../../templates/Challenges/redux/actions';
import { Link, FullWidthRow } from '../../helpers';
import { Link, FullWidthRow, Spacer } from '../../helpers';
import { SolutionDisplayWidget } from '../../solution-display-widget';
import { SuperBlocks } from '../../../../../shared/config/superblocks';
import TimelinePagination from './timeline-pagination';
Expand Down Expand Up @@ -176,7 +176,8 @@ function TimelineInner({

return (
<FullWidthRow>
<h2 className='text-center'>{t('profile.timeline')}</h2>
<h2>{t('profile.timeline')}</h2>
<Spacer size='small' />
{completedMap.length === 0 ? (
<p className='text-center'>
{t('profile.none-completed')}&nbsp;
Expand Down