Commit fe0c4070 authored by AJ's avatar AJ
Browse files

Start JS and CSS Changes for Upload Dashboard

Add consistent buttons, color schemes, and sizing. Need to make the elements scale properly ad rearrange the js element order.
parent 1b5b659f
......@@ -100,14 +100,23 @@ body {
min-height: 100vh;
}
.upload-panel {
background-color: #dadada;
border-radius: 2vw;
padding: 2vw 3vw;
width: 60vw;
height: 25vw;
}
.panel {
background-color: rgb(240, 240, 240);
background-color: white;
border-radius: 1vw;
border-style: solid;
border-color:#6fccdc;
padding: 1vw 2vw;
width: 100vw;
max-width: 960px;
border-width: .2vw;
padding: 1vw;
width: 80vw;
min-width: 40vw;
display: flex;
flex-direction: column;
text-align: center;
......@@ -118,8 +127,7 @@ body {
text-align: left;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 700;
font-size: xx-large;
padding-bottom: 5vw;
font-size: 2em;
}
td {
......@@ -139,21 +147,20 @@ th {
}
.button {
background-color: #e7e7e7;
background-color: white;
border-radius: 8px;
padding: 0.5em 1.2em;;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2vw 0vw;
display: flex;
margin: 3vw 0vw;
cursor: pointer;
float: right;
border-style: solid;
border-width: 1px;
border-width: .2vw;
border-color: #f04c51;
font-size: 1em;
font-weight: bold;
color: black;
border: none;
}
.btn-left {
......
......@@ -143,24 +143,26 @@ const renderBody = () => {
return (
<div>
<ToastContainer />
<div>
<button className="btn" onClick={()=>{history.push("/profile");}}>Edit Profile</button>
</div>
<h1 className="title">Uploads</h1>
<div className="panel">
<table id='items'>
<thead>
<tr>{renderHeader()}</tr>
</thead>
<tbody>
{renderBody()}
</tbody>
</table>
</div>
<div>
{au === "admin" ? <button className="btn-left" onClick={()=>{history.push({pathname: "/review", accstate: "admin"});}}>Review Submissions</button> : null}
<button className="btn" onClick={()=>{history.push({pathname: "/editor", state: ""});}}>Upload New Item</button>
</div>
<div className="upload-panel">
<div>
<button className="button" onClick={()=>{history.push("/profile");}}>Edit Profile</button>
</div>
<h1 className="title">Uploads</h1>
<div className="panel">
<table id='items'>
<thead>
<tr>{renderHeader()}</tr>
</thead>
<tbody>
{renderBody()}
</tbody>
</table>
</div>
<div>
{au === "admin" ? <button className="btn-left" onClick={()=>{history.push({pathname: "/review", accstate: "admin"});}}>Review Submissions</button> : null}
<button className="button" onClick={()=>{history.push({pathname: "/editor", state: ""});}}>Upload New Item</button>
</div>
</div>
</div>
);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment