From ade0054ff1dcc3d164fe20d97704bf654245107b Mon Sep 17 00:00:00 2001 From: Focusvity Date: Mon, 27 Jun 2022 23:18:31 +1000 Subject: [PATCH] New download page --- src/css/DownloadPage.css | 134 +++++++++++++++++-------------------- src/pages/DownloadPage.tsx | 97 ++++++++++++--------------- 2 files changed, 103 insertions(+), 128 deletions(-) diff --git a/src/css/DownloadPage.css b/src/css/DownloadPage.css index 56861250..48d09ab5 100644 --- a/src/css/DownloadPage.css +++ b/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 { - color: white; +.download_section { + 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 { - display: table-cell; - float: right; - right: 75px; - position: relative; - bottom: 25px; +.commit_id:hover { + text-decoration: underline; + color: #91ffaf; } -.nochanges { - position: relative; - bottom: 0; -} +@media (max-width: 768px) { + .versions { + width: 80%; + } -@media only screen and (max-width: 768px) { - .builds { + table { + margin: 0 auto; width: 100%; } - ul[class^="changes-"] > li { - position: relative; - left: 30px; - font-size: 13px; + .download_section { + font-size: 15px; + } + + .download { + margin-left: 10px; + } + + .commits { + text-align: center; } .date { - right: 20px; - bottom: 28px; - font-size: 13px; - } - - .nochanges { - bottom: 11px; + display: none; } } \ No newline at end of file diff --git a/src/pages/DownloadPage.tsx b/src/pages/DownloadPage.tsx index 83bc0a1b..c2c265be 100644 --- a/src/pages/DownloadPage.tsx +++ b/src/pages/DownloadPage.tsx @@ -1,12 +1,9 @@ -import React, { useEffect, useState } from "react"; -import "../css/HomePage.css" -import { Build, getBuilds, getJobs, Job } from "../util/Jenkins"; +import dayjs from "dayjs"; +import { useEffect, useState } from "react" +import { Container, Button } from "react-bootstrap" import "../css/DownloadPage.css" -import { Button } from "react-bootstrap"; -import { Alert } from "react-bootstrap"; -import { Container } from "react-bootstrap"; -import dayjs from "dayjs"; +import { Build, getBuilds, getJobs, Job } from "../util/Jenkins"; const DownloadPage = () => { const [jobs, setJobs] = useState(new Map()) @@ -39,53 +36,45 @@ const DownloadPage = () => { }) } - function onClick(event: React.MouseEvent) { - setVersion(event.currentTarget.innerHTML) - } - return ( - - - Scissors Downloads -

- 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 CI Server instead. -

-
-

- P.S. If you know React, PLEASE help us make this look better. Our code is here. -

- -
    - {Array.from(jobs.keys()).sort(function(x, y) { - let x1 = x.name.split(".") - let y1 = y.name.split(".") - if (x1.length >= 3) { - x1 = x1.slice(0, x1.length - 1) - } - if (y1.length >= 3) { - y1 = y1.slice(0, y1.length - 1) - } - return y1.join(".") > x1.join(".") ? 1 : -1 - }).map(value => { - return
  • {value.name}
    • - })} -
-
    - {jobs.get(Array.from(jobs.keys()).filter(value => value.name === version)[0])?.map(value => { - return
  • - -
      - {value.changes?.map(value1 => { - return
    • [{value1.id}]  {value1.comment}
      • - })} -
    - 0 ? "date" : "date nochanges"}>{dayjs(value.timestamp!).format("MM/DD/YYYY [at] hh:mm A")} -
    • - })} -
- - ); + +
+

Scissors Downloads

+
+
+
+
    + {Array.from(jobs.keys()).sort(function(x, y) { + let x1 = x.name.split(".") + let y1 = y.name.split(".") + if (x1.length >= 3) { + x1 = x1.slice(0, x1.length - 1) + } + if (y1.length >= 3) { + y1 = y1.slice(0, y1.length - 1) + } + return y1.join(".") > x1.join(".") ? 1 : -1 + }).map(job => { + return
  • setVersion(job.name)}>{job.name}
    • + })} +
+

+ + + {jobs.get(Array.from(jobs.keys()).filter(value => value.name == version)[0])?.map(value => { + return + + + + + })} + +
    {value.changes?.map(value1 => { + return (
  • [{value1.id}]  {value1.comment}
    • ) + })}
{dayjs(value.timestamp!).format("MM/DD/YYYY [at] hh:mm A")}
+
+ + ) } -export default DownloadPage; +export default DownloadPage \ No newline at end of file