New download page

src/css/DownloadPage.css

@@ -1,11 +1,32 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200&display=swap');
 
-body {
+* {
     margin: 0;
+    padding: 0;
+    font-family: 'IMB Plex Sans', sans-serif;
+    box-sizing: border-box;
 }
 
-th, td {
+.download_section {
-    color: white;
+    margin-top: 100px;
+}
+
+.versions {
+    margin: 0 auto;
+    width: 50%;
+}
+
+.selected {
+    border-bottom: aqua 1.5px solid;
+}
+
+.selectable {
+    cursor: pointer;
+    border-bottom: lightslategray 1.5px solid;
+}
+
+container {
+    width: 100%;
 }
 
 ul > li {
@@ -20,93 +41,58 @@ ul {
     margin-top: 1rem;
 }
 
-.builds {
+table {
     margin: 0 auto;
-    padding: 0;
-    flex-direction: column;
-    background-color: #363534;
-    width: 80%;
-}
-
-.builds > li {
-    padding-left: 25px;
-    height: 95px;
-    width: 100%;
-    border-bottom: 2px solid black;
-    display: table;
-    flex-wrap: nowrap;
-}
-
-.builds > li > .btn {
-    border-radius: 10px !important;
-    position: relative;
-    top: 28px;
-}
-
-.selected {
-    border-bottom: aqua 1px solid;
-}
-
-.selectable {
-    cursor: pointer;
-}
-
-ul[class^="changes-"] {
-    justify-content: left;
-    flex-direction: column;
-    margin: 0;
-    flex-wrap: nowrap;
-    align-content: flex-start;
-}
-
-ul[class^="changes-"] > li {
-    flex-wrap: nowrap;
-    margin: 0;
-    padding: 0;
-    font-size: 15px;
-    position: relative;
-    bottom: 3px;
-    left: 38px;
     width: 75%;
 }
 
-ul[class^="changes-"] > li > a {
+tr:nth-child(odd) {
+    background-color: #3c3c3c;
+}
+
+td {
+    height: 70px;
+    color: white;
+}
+
+.commits {
+    display: inline-block;
+    margin-top: 15px;
+}
+
+.commit_id {
     text-decoration: none;
     color: #91ffaf;
-    margin: 0;
 }
 
-.date {
+.commit_id:hover {
-    display: table-cell;
+    text-decoration: underline;
-    float: right;
+    color: #91ffaf;
-    right: 75px;
-    position: relative;
-    bottom: 25px;
 }
 
-.nochanges {
+@media (max-width: 768px) {
-    position: relative;
+    .versions {
-    bottom: 0;
+        width: 80%;
-}
+    }
 
-@media only screen and (max-width: 768px) {
+    table {
-    .builds {
+        margin: 0 auto;
         width: 100%;
     }
 
-    ul[class^="changes-"] > li {
+    .download_section {
-        position: relative;
+        font-size: 15px;
-        left: 30px;
+    }
-        font-size: 13px;
+
+    .download {
+        margin-left: 10px;
+    }
+
+    .commits {
+        text-align: center;
     }
 
     .date {
-        right: 20px;
+        display: none; 
-        bottom: 28px;
-        font-size: 13px;
-    }
-
-    .nochanges {
-        bottom: 11px;
     }
 }

src/pages/DownloadPage.tsx

@@ -1,12 +1,9 @@
-import React, { useEffect, useState } from "react";
+import dayjs from "dayjs";
-import "../css/HomePage.css"
+import { useEffect, useState } from "react"
-import { Build, getBuilds, getJobs, Job } from "../util/Jenkins";
+import { Container, Button } from "react-bootstrap"
 
 import "../css/DownloadPage.css"
-import { Button } from "react-bootstrap";
+import { Build, getBuilds, getJobs, Job } from "../util/Jenkins";
-import { Alert } from "react-bootstrap";
-import { Container } from "react-bootstrap";
-import dayjs from "dayjs";
 
 const DownloadPage = () => {
     const [jobs, setJobs] = useState(new Map<Job, Build[]>())
@@ -39,53 +36,45 @@ const DownloadPage = () => {
         })
     }
 
-    function onClick(event: React.MouseEvent<HTMLLIElement>) {
-        setVersion(event.currentTarget.innerHTML)
-    }
-
     return (
-        <Container fluid className="p-sm-0 p-md-4">
+        <Container fluid>
-            <Alert variant="secondary">
+            <div className="header">
-                <Alert.Heading>Scissors Downloads</Alert.Heading>
+                <h1>Scissors Downloads</h1>
-                <p>
+            </div>
-                    You may download builds of Scissors from here. Select the version you would like below. If the downloads page is not working, please use our <a href="https://ci.scissors.gg/job/Scissors">CI Server</a> instead.
+            <br/>
-                </p>
+            <div className="download_section">
-                <hr />
+                <ul className="versions">
-                <p className="mb-0">
+                    {Array.from(jobs.keys()).sort(function(x, y) {
-                    P.S. If you know React, PLEASE help us make this look better. Our code is <a href="https://github.com/AtlasMediaGroup/Scissors-Website/tree/master">here</a>.
+                        let x1 = x.name.split(".")
-                </p>
+                        let y1 = y.name.split(".")
-            </Alert>
+                        if (x1.length >= 3) {
-            <ul className="versions">
+                            x1 = x1.slice(0, x1.length - 1)
-                {Array.from(jobs.keys()).sort(function(x, y) {
+                        }
-                    let x1 = x.name.split(".")
+                        if (y1.length >= 3) {
-                    let y1 = y.name.split(".")
+                            y1 = y1.slice(0, y1.length - 1)
-                    if (x1.length >= 3) {
+                        }
-                        x1 = x1.slice(0, x1.length - 1)
+                        return y1.join(".") > x1.join(".") ? 1 : -1
-                    }
+                    }).map(job => {
-                    if (y1.length >= 3) {
+                        return <li key={job.name} className={version === job.name ? "selected" : "selectable"} onClick={() => setVersion(job.name)}>{job.name}</li>
-                        y1 = y1.slice(0, y1.length - 1)
+                    })}
-                    }
+                </ul>
-                    return y1.join(".") > x1.join(".") ? 1 : -1
+                <br/><br/>
-                }).map(value => {
+                <table className="downloads">
-                    return <li className={version === value.name ? "selected" : "selectable"}
+                    <tbody>
-                        onClick={onClick}>{value.name}</li>
+                    {jobs.get(Array.from(jobs.keys()).filter(value => value.name == version)[0])?.map(value => {
-                })}
+                        return <tr key={value.number}>
-            </ul>
+                            <td align="center"><Button className="download" href={value.artifact ? `${value.url}/artifact/${value.artifact}` : value.url}>#{value.number}</Button></td>
-            <ul className="builds">
+                            <td className="commits"><ul>{value.changes?.map(value1 => {
-                {jobs.get(Array.from(jobs.keys()).filter(value => value.name === version)[0])?.map(value => {
+                                return (<li key={value1.id}>[<a className="commit_id" href={`https://github.com/AtlasMediaGroup/Scissors/commit/${value1.id}`}>{value1.id}</a>]&nbsp;&nbsp;{value1.comment}</li>)
-                    return <li>
+                            })}</ul></td>
-                        <Button href={value.artifact ? `${value.url}/artifact/${value.artifact}` : value.url}>#{value.number}</Button>
+                            <td className="date" align="center">{dayjs(value.timestamp!).format("MM/DD/YYYY [at] hh:mm A")}</td>
-                        <ul className={`changes-${value.number}`}>
+                        </tr>
-                            {value.changes?.map(value1 => {
+                    })}
-                                return <li>[<a href={`https://github.com/AtlasMediaGroup/Scissors/commit/${value1.id}`}>{value1.id}</a>]&nbsp;&nbsp;{value1.comment}</li>
+                    </tbody>
-                            })}
+                </table>
-                        </ul>
+            </div>
-                        <span className={value.changes && value.changes?.length > 0 ? "date" : "date nochanges"}>{dayjs(value.timestamp!).format("MM/DD/YYYY [at] hh:mm A")}</span>
+        </Container>
-                    </li>
+    )
-                })}
-            </ul>
-        </Container >
-    );
 }
 
-export default DownloadPage;
+export default DownloadPage