From 829871f5373264ba2d056099df88591544b53911 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Sat, 21 Jun 2025 15:55:46 -0600 Subject: [PATCH] feat(history): done, need content and mobile layout --- src/History/History.css | 179 ++++++++++++++++++++++++++++++++++++++++ src/History/History.jsx | 105 +++++++++++++---------- 2 files changed, 242 insertions(+), 42 deletions(-) diff --git a/src/History/History.css b/src/History/History.css index e69de29..b8fae51 100644 --- a/src/History/History.css +++ b/src/History/History.css @@ -0,0 +1,179 @@ +#History { + display: flex; + flex-direction: column; + padding: 4svh 4svw; + row-gap: 4svh; + background-color: black; + color: white; +} + +#History div { + display: flex; + flex-direction: column; + align-items: center; + align-self: center; + padding: 2svh 2svw; + border: 1px solid white; + border-radius: 1rem; + row-gap: 2svh; +} + +#History div p { + padding: 0px; + margin: 0px; +} + +#History div a { + color: inherit; +} + +#History div button { + background-color: inherit; + border-radius: 1rem; + border: 1px solid white; + padding: 1svh 6svw; + color: inherit; +} + +#History div button:hover { + background-color: lightblue; + color: #a80029; +} + +#History table { + border-collapse: collapse; + width: auto; + margin: 2svh auto; +} + +#History table tbody { + color: inherit; +} + +#History table tr { + position: relative; +} + +#History tr td { + width: 300px; + height: 300px; + vertical-align: middle; +} + +#History tr td img { + width: inherit; + height: inherit; + border-radius: 1rem; + display: block; +} + +#History .HistoryCompInfo { + display: block; + text-align: center; + height: auto; + width: inherit; + + padding: 12svh 0svw; + + border: 1px solid white; + border-radius: 1rem; +} + +:root { + --historyPaddingFromMiddle: 4svw; +} + +#History table tr td:first-child { + padding-right: var(--historyPaddingFromMiddle); +} + +#History table tr td:nth-child(3) { + padding-left: var(--historyPaddingFromMiddle); +} + +#History .HistoryCompInfo h2, +#History .HistoryCompInfo h4 { + margin: 2svh 0svw; +} + +#History .HistoryCompInfo ul { + list-style-type: none; + display: flex; + flex-flow: row wrap; + padding: 0svh 2svw; + margin: 0px; +} + +#History .HistoryCompInfo ul li { + padding: 0.5svh 0svw; + flex: 50%; +} + +#History .HistoryCompInfo ul li:nth-child(odd) { + text-align: start; +} + +#History .HistoryCompInfo ul li:nth-child(even) { + text-align: end; +} + +#History .symbol { + position: relative; + width: 40px; + text-align: center; +} + +#History .symbol::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 2px; + background-color: rgb(120, 120, 120); + transform: translateX(-50%); + z-index: 0; +} + +#History .dot { + display: inline-block; + background-color: rgb(120, 120, 120); + border-radius: 50%; + width: 20px; + height: 20px; + line-height: 20px; + font-size: 12px; + font-weight: bold; + position: relative; + z-index: 2; +} + +#History tr:first-child .symbol::before { + top: 50%; +} + +#HistoryJoin { + position: relative; + padding: 0; + text-align: center; +} + +#History #HistoryJoin div { + text-wrap: nowrap; + margin: 0; + position: relative; + background-color: black; + z-index: 2; /* above line */ +} + +/* without this line will stop at the div */ +/* stop line at last one with these two */ + +/* #HistoryJoin::before { + height: 80%; +} + + +#History tr:last-child .symbol::before { + bottom: 50%; +} */ diff --git a/src/History/History.jsx b/src/History/History.jsx index 0f964c0..e2ec7a1 100644 --- a/src/History/History.jsx +++ b/src/History/History.jsx @@ -2,6 +2,7 @@ import UpdateBanner from "../Header/UpdateBanner"; import "./History.css"; import { Link } from "react-router-dom"; +import React from "react"; export default function History() { let historyTimeLineInfo = [ @@ -34,52 +35,74 @@ export default function History() {

The history of our cars are below. They include overall competition results (as well as old competition stats if u wanna include that). - Learn more about what we do at competitoin here. + Learn more about what we do at competition here.

- {historyTimeLineInfo.map((yearInfo, index) => { - return ( - - {index % 2 === 0 ? ( - <> - - - - - ) : ( - <> - + {/* + + + + */} + + {historyTimeLineInfo.map((yearInfo, index) => { + return ( + + {index % 2 === 0 ? ( + <> - - - )} - - ); - })} + + + + + ) : ( + <> + + + + + + )} + + ); + })} + + + + + +
- {yearInfo.year - {/* Star or circle spot */}* - - - - {/* Star or circle spot */}*
{yearInfo.year
+ {/* Star or circle spot */} + + + + + + {/* Star or circle spot */} + + {yearInfo.year +
+
Where You Join!
+
); @@ -87,23 +110,21 @@ export default function History() { function CompetitionInfo({ year, competitions }) { return ( - <> +

{year}

Overall Competition Results

- +
); }