From 37664702c01a7f1bf9cba350341ff9321ceaee28 Mon Sep 17 00:00:00 2001 From: ByAnthony Date: Fri, 26 Apr 2024 21:04:28 +0100 Subject: [PATCH] add nav to history chapters --- .../HistoryChapters/HistoryChapter.tsx | 31 ++- .../HistoryChapters.module.scss | 50 +++-- client/src/components/HomePage/HomePage.tsx | 197 ------------------ 3 files changed, 65 insertions(+), 213 deletions(-) diff --git a/client/src/components/HomePage/HistoryChapters/HistoryChapter.tsx b/client/src/components/HomePage/HistoryChapters/HistoryChapter.tsx index 9ee5cc0a..a6acb319 100644 --- a/client/src/components/HomePage/HistoryChapters/HistoryChapter.tsx +++ b/client/src/components/HomePage/HistoryChapters/HistoryChapter.tsx @@ -1,3 +1,4 @@ +import { useRef } from 'react'; import { Articles } from '../../../types/article'; import STYLES from './HistoryChapters.module.scss'; @@ -7,13 +8,35 @@ type Props = { } export function HistoryChapters({ articles }: Props) { + const containerRef = useRef(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 (
-

- History of the Company -

-
+
+

+ History of the Company +

+
+ + +
+
+
{articles.map((article) => { const divStyle = { backgroundImage: `url(../images/history/${article.image})`, diff --git a/client/src/components/HomePage/HistoryChapters/HistoryChapters.module.scss b/client/src/components/HomePage/HistoryChapters/HistoryChapters.module.scss index 5e4be702..1808b3be 100644 --- a/client/src/components/HomePage/HistoryChapters/HistoryChapters.module.scss +++ b/client/src/components/HomePage/HistoryChapters/HistoryChapters.module.scss @@ -1,27 +1,53 @@ @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; @@ -29,9 +55,9 @@ } .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, @@ -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); diff --git a/client/src/components/HomePage/HomePage.tsx b/client/src/components/HomePage/HomePage.tsx index 502e0acb..1af051fd 100644 --- a/client/src/components/HomePage/HomePage.tsx +++ b/client/src/components/HomePage/HomePage.tsx @@ -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'; @@ -24,202 +23,6 @@ export function HomePage() { { isLoading } { isSuccess && (
-
- - </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 • - Total number of men recruited • - </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 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> )}