mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-10 05:07:13 -06:00
feat(history): done, need content and mobile layout
This commit is contained in:
@ -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%;
|
||||
} */
|
||||
|
||||
@ -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() {
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<Link to={"/AboutUs"}>
|
||||
<button>Learn More</button>
|
||||
</Link>
|
||||
</div>
|
||||
<table>
|
||||
{historyTimeLineInfo.map((yearInfo, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
{index % 2 === 0 ? (
|
||||
<>
|
||||
<td>
|
||||
<img
|
||||
src={yearInfo.competitionCarImg}
|
||||
alt={yearInfo.year + "'s Car"}
|
||||
/>
|
||||
</td>
|
||||
<td>{/* Star or circle spot */}*</td>
|
||||
<td>
|
||||
<CompetitionInfo
|
||||
year={yearInfo.year}
|
||||
competitions={yearInfo.competitions}
|
||||
/>
|
||||
</td>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<td>
|
||||
<CompetitionInfo
|
||||
year={yearInfo.year}
|
||||
competitions={yearInfo.competitions}
|
||||
/>
|
||||
<td>{/* Star or circle spot */}*</td>
|
||||
{/* <colgroup>
|
||||
<col />
|
||||
<col class="symbol" />
|
||||
<col />
|
||||
</colgroup> */}
|
||||
<tbody>
|
||||
{historyTimeLineInfo.map((yearInfo, index) => {
|
||||
return (
|
||||
<tr key={index}>
|
||||
{index % 2 === 0 ? (
|
||||
<>
|
||||
<td>
|
||||
<img
|
||||
src={yearInfo.competitionCarImg}
|
||||
alt={yearInfo.year + "'s Car"}
|
||||
/>
|
||||
</td>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
<td className="symbol">
|
||||
<span className="dot">{/* Star or circle spot */}</span>
|
||||
</td>
|
||||
<td>
|
||||
<CompetitionInfo
|
||||
year={yearInfo.year}
|
||||
competitions={yearInfo.competitions}
|
||||
/>
|
||||
</td>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<td>
|
||||
<CompetitionInfo
|
||||
year={yearInfo.year}
|
||||
competitions={yearInfo.competitions}
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className="symbol">
|
||||
<span className="dot">{/* Star or circle spot */}</span>
|
||||
</td>
|
||||
<td>
|
||||
<img
|
||||
src={yearInfo.competitionCarImg}
|
||||
alt={yearInfo.year + "'s Car"}
|
||||
/>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td
|
||||
className="symbol"
|
||||
id="HistoryJoin">
|
||||
<div>Where You Join!</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
@ -87,23 +110,21 @@ export default function History() {
|
||||
|
||||
function CompetitionInfo({ year, competitions }) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={year + competitions}
|
||||
className="HistoryCompInfo">
|
||||
<h2>{year}</h2>
|
||||
<h4>Overall Competition Results</h4>
|
||||
<ul>
|
||||
{competitions.map((comp, index) => {
|
||||
return (
|
||||
<>
|
||||
<React.Fragment key={comp + index}>
|
||||
<li key={index + "location"}>{comp.location}</li>
|
||||
<li key={index + "place"}>{comp.placement} place</li>
|
||||
</>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
{/* <li>{competitions[0].location}</li>
|
||||
<li>{competitions[0].placement} place</li>
|
||||
<li>{competitions[1].location}</li>
|
||||
<li>{competitions[1].placement} place</li> */}
|
||||
</ul>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user