New download page

This commit is contained in:
Focusvity 2022-06-27 23:18:31 +10:00
parent de200c1265
commit ade0054ff1
No known key found for this signature in database
GPG Key ID: 5624C6428B55CB99
2 changed files with 103 additions and 128 deletions

View File

@ -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;
}
}

View File

@ -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<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">
<Alert variant="secondary">
<Alert.Heading>Scissors Downloads</Alert.Heading>
<p>
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.
</p>
<hr />
<p className="mb-0">
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>.
</p>
</Alert>
<ul className="versions">
{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 <li className={version === value.name ? "selected" : "selectable"}
onClick={onClick}>{value.name}</li>
})}
</ul>
<ul className="builds">
{jobs.get(Array.from(jobs.keys()).filter(value => value.name === version)[0])?.map(value => {
return <li>
<Button href={value.artifact ? `${value.url}/artifact/${value.artifact}` : value.url}>#{value.number}</Button>
<ul className={`changes-${value.number}`}>
{value.changes?.map(value1 => {
return <li>[<a href={`https://github.com/AtlasMediaGroup/Scissors/commit/${value1.id}`}>{value1.id}</a>]&nbsp;&nbsp;{value1.comment}</li>
})}
</ul>
<span className={value.changes && value.changes?.length > 0 ? "date" : "date nochanges"}>{dayjs(value.timestamp!).format("MM/DD/YYYY [at] hh:mm A")}</span>
</li>
})}
</ul>
</Container >
);
<Container fluid>
<div className="header">
<h1>Scissors Downloads</h1>
</div>
<br/>
<div className="download_section">
<ul className="versions">
{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 <li key={job.name} className={version === job.name ? "selected" : "selectable"} onClick={() => setVersion(job.name)}>{job.name}</li>
})}
</ul>
<br/><br/>
<table className="downloads">
<tbody>
{jobs.get(Array.from(jobs.keys()).filter(value => value.name == version)[0])?.map(value => {
return <tr key={value.number}>
<td align="center"><Button className="download" href={value.artifact ? `${value.url}/artifact/${value.artifact}` : value.url}>#{value.number}</Button></td>
<td className="commits"><ul>{value.changes?.map(value1 => {
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>)
})}</ul></td>
<td className="date" align="center">{dayjs(value.timestamp!).format("MM/DD/YYYY [at] hh:mm A")}</td>
</tr>
})}
</tbody>
</table>
</div>
</Container>
)
}
export default DownloadPage;
export default DownloadPage