mirror of
https://github.com/AtlasMediaGroup/Scissors-Website.git
synced 2024-12-25 11:27:41 +00:00
New download page
This commit is contained in:
Focusvity
parent
de200c1265
commit
ade0054ff1
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>] {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>] {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
|
||||
Loading…
Reference in New Issue
Block a user