Skip to content
This repository has been archived by the owner on Sep 17, 2024. It is now read-only.

Commit

Permalink
add nav to history chapters
Browse files Browse the repository at this point in the history
  • Loading branch information
@ByAnthony
ByAnthony committed Apr 26, 2024
1 parent ddf69a7 commit 3766470
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 213 deletions.
31 changes: 27 additions & 4 deletions client/src/components/HomePage/HistoryChapters/HistoryChapter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useRef } from 'react';
import { Articles } from '../../../types/article';

import STYLES from './HistoryChapters.module.scss';
Expand All @@ -7,13 +8,35 @@ type Props = {
}

export function HistoryChapters({ articles }: Props) {
const containerRef = useRef<HTMLDivElement>(null);

const scrollLeft = () => {
if (containerRef.current) {
const scrollAmount = containerRef.current.clientWidth / 1.75;
containerRef.current.scrollLeft -= scrollAmount;
}
};

const scrollRight = () => {
if (containerRef.current) {
const scrollAmount = containerRef.current.clientWidth / 1.75;
containerRef.current.scrollLeft += scrollAmount;
}
};

return (
<div className={STYLES['history-chapter']}>
<div className={STYLES['chapter-cards-wrapper']}>
<h3 id="history">
History of the Company
</h3>
<div className={STYLES['chapter-cards']}>
<div className={STYLES['chapter-cards-menu']}>
<h3 id="history">
History of the Company
</h3>
<div className={STYLES['chapter-cards-nav']}>
<button type="button" onClick={scrollLeft} aria-label="Show more chapters">&larr;</button>
<button type="button" onClick={scrollRight} aria-label="Show less chapters">&rarr;</button>
</div>
</div>
<div className={STYLES['chapter-cards']} ref={containerRef}>
{articles.map((article) => {
const divStyle = {
backgroundImage: `url(../images/history/${article.image})`,
Expand Down
50 changes: 38 additions & 12 deletions client/src/components/HomePage/HistoryChapters/HistoryChapters.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,63 @@
@use 'src/index.scss';

.history-chapter {
margin-top: 125px;

h3 {
padding: 0 0 0 index.$l-margin;
padding-left: index.$xxxs-margin;
text-align: left;
}
}

.chapter-cards-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.chapter-cards-nav {
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;

button {
font-family: index.$main-font;
font-size: 2rem;
font-weight: 200;
text-align: center;
color: index.$text-color;
border: 1px solid index.$primary-dark-color;
border-radius: index.$border-radius;
background-color: index.$primary-dark-color;
transition: border-bottom 0.9s ease-in-out, border-bottom 0.9s ease-in-out,
border 0.9s ease-in-out, border 0.9s ease-in-out,
background-color 0.9s ease-in-out, background-color 0.9s ease-in-out;
cursor: pointer;

&:hover {
color: index.$secondary-color;
}
}
}

.chapter-cards-wrapper {
padding: index.$m-margin 0 index.$base-margin 0;
height: 390px;
height: 480px;
overflow: hidden;
border-radius: index.$border-radius;
background-color: index.$primary-medium-color;
}

.chapter-cards {
margin: 0 auto;
padding: 0 index.$l-margin;
display: flex;
height: 410px;
height: 500px;
flex-direction: row;
flex-wrap: nowrap;
gap: index.$m-margin;
overflow-x: auto;
}

.chapter-card {
height: 300px;
height: 400px;
width: 300px;
border: 1px solid rgb(64, 66, 67);
border: 1px solid index.$primary-light-color;
border-radius: index.$border-radius;
text-align: center;
transition: border-bottom 0.9s ease-in-out, border-bottom 0.9s ease-in-out,
Expand All @@ -44,7 +70,7 @@
}

.chapter-card-dimmer {
height: 300px;
height: 400px;
width: 300px;
border-radius: 6.5px;
background-color: rgba(44, 46, 47, 0.9);
Expand Down
197 changes: 0 additions & 197 deletions client/src/components/HomePage/HomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useGetAllHistoryArticleLinkQuery } from '../../redux/slices/historySlic
import { Footer } from '../Footer/Footer';
import { HistoryChapters } from './HistoryChapters/HistoryChapter';
import { Menu } from '../Menu/Menu';
import { Title } from '../Title/Title';

import STYLES from './HomePage.module.scss';

Expand All @@ -24,202 +23,6 @@ export function HomePage() {
{ isLoading }
{ isSuccess && (
<div className={STYLES['homepage-container']}>
<div className={STYLES.title}>
<Title
title={'The Kiwis\\Also Dig Tunnels'}
subTitle="Fighting underground during World War I"
/>
</div>
<div className={STYLES.tunnellers}>
<h2>
The Tunnellers
</h2>
<div className={STYLES.enlistment}>
<div className={STYLES['total-recruits']}>
<svg width="300" height="300">
<text>
<textPath xlinkHref="#circlePath" className={STYLES['circle-path']}>
Total number of men recruited &bull;
Total number of men recruited &bull;
</textPath>
</text>
<path id="circlePath" d="M 150, 150 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0" fill="none" />
<text x="150" y="150" textAnchor="middle" alignmentBaseline="middle" className={STYLES['inside-circle-text']}>936</text>
</svg>
</div>
<div className={STYLES.age}>
<h3>Age at enlistment</h3>
<div className={STYLES['age-content-wrapper']}>
<div className={STYLES['age-content']}>
<div className={STYLES['age-card']} id={STYLES.oldest}>
<span>Oldest</span>
<p>58</p>
</div>
<div className={STYLES['age-card']} id={STYLES.average}>
<span>Average</span>
<p>32</p>
</div>
<div className={STYLES['age-card']} id={STYLES.youngest}>
<span>Youngest</span>
<p>16</p>
</div>
</div>
</div>
</div>
</div>
<div className={STYLES['marital-status']}>
<h3>Marital status</h3>
<div className={STYLES['marital-status-wrapper']}>
<div className={STYLES['marital-status-card']} id={STYLES.single}>
<span>Single</span>
<p>75%</p>
</div>
<div className={STYLES['marital-status-card']} id={STYLES.married}>
<p>25%</p>
<span>Married</span>
</div>
</div>
</div>
<div className={STYLES.professions}>
<h3>Professions</h3>
<div className={STYLES['professions-content-wrapper']}>
<div className={STYLES['professions-title']}>
<p>Miners</p>
</div>
<div className={STYLES['professions-content']}>
<div>
<p className={STYLES.line}>1</p>
<div className={STYLES.ten}>2</div>
</div>
<div className={STYLES['circles-wrapper']}>
<div className={STYLES.circles}>
<div className={STYLES['plain-circle']} />
<div className={STYLES.circle} />
<div className={STYLES['plain-circle']} />
<div className={STYLES.circle} />
<div className={STYLES['plain-circle']} />
</div>
<div className={STYLES.circles}>
<div className={STYLES.circle} />
<div className={STYLES['plain-circle']} />
<div className={STYLES.circle} />
<div className={STYLES['plain-circle']} />
<div className={STYLES.circle} />
</div>
</div>
</div>
</div>
<div className={STYLES['marital-status-wrapper']}>
<div className={STYLES['marital-status-card']} id={STYLES['gold-miners']}>
<span>Gold mining</span>
<p>50%</p>
</div>
<div className={STYLES['marital-status-card']} id={STYLES['coal-miners']}>
<p>50%</p>
<span>Coal mining</span>
</div>
</div>
<div className={STYLES['marital-status-wrapper']}>
<div className={STYLES['marital-status-card']} id={STYLES['trade-union']}>
<span>Trade unionists</span>
<p>Most likely</p>
</div>
</div>
</div>
</div>
<div className={STYLES['image-container']}>
<img
className={STYLES.image}
src="/images/homepage/arras.jpg"
alt="Some tunnellers in Arras"
/>
</div>

<div className={STYLES.company}>
<h2>The Company</h2>
<p className={STYLES.introduction}>
The New Zealand tunnellers were gathered in a single military company.
Seven reinforcements followed which were originally planned every 6 months.
The Main Body and the 1st Reinforcements left New Zealand on the same day,
on the 18&nbsp;December 1915.
</p>
<div className={STYLES['company-content-wrapper']}>
<div className={STYLES['company-content']}>
<div className={STYLES['company-card']} id={STYLES['main-body-background']}>
<div className={STYLES.contingent} id={STYLES['main-body']}>
<span>Main Body</span>
<p>423 recruits</p>
</div>
<div className={STYLES.departure}>
<span>18 December 1915</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-1']}>
<span>1st Reinforcements</span>
<p>103</p>
</div>
<div className={STYLES.departure}>
<span>18 December 1915</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-2']}>
<span>2nd Reinforcements</span>
<p>100</p>
</div>
<div className={STYLES.departure}>
<span>26 June 1916</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-3']}>
<span>3rd Reinforcements</span>
<p>135</p>
</div>
<div className={STYLES.departure}>
<span>15 November 1916</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-4']}>
<span>4th Reinforcements</span>
<p>77</p>
</div>
<div className={STYLES.departure}>
<span>16 February 1917</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-5']}>
<span>5th Reinforcements</span>
<p>96</p>
</div>
<div className={STYLES.departure}>
<span>26 April 1917</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-6']}>
<span>6th Reinforcements</span>
<p>51</p>
</div>
<div className={STYLES.departure}>
<span>26 July 1917</span>
</div>
</div>
<div className={STYLES['company-card']}>
<div className={STYLES.contingent} id={STYLES['reinforcements-7']}>
<span>7th Reinforcements</span>
<p>32</p>
</div>
<div className={STYLES.departure}>
<span>22 November 1917</span>
</div>
</div>
</div>
</div>
</div>
<HistoryChapters articles={data} />
</div>
)}
Expand Down

0 comments on commit 3766470

Please sign in to comment.