UI redesign
This commit is contained in:
		
							parent
							
								
									94c1dd5782
								
							
						
					
					
						commit
						6322a6db14
					
				
					 2 changed files with 70 additions and 14 deletions
				
			
		|  | @ -6,7 +6,12 @@ | |||
| 		<script src="main.js" defer></script> | ||||
| 	</head> | ||||
| 	<body> | ||||
| 		<h1>Learn Request Queue</h1> | ||||
| 		<div id="topbar"> | ||||
| 			<div id="logo">Learn Request Queue</div> | ||||
| 			<div id="nav-requests"><a href="/">Requests</a></div> | ||||
| 			<div id="nav-login"><a href="https://id.twitch.tv/oauth2/authorize?client_id=di37tc1dr9rhvmpvzgn8rkmi7bdhkk&redirect_uri=https://localhost/callback&response_type=token">Login</a></div> | ||||
| 		</div> | ||||
| 		<div id="main"> | ||||
| 			<div id="requests"></div><br> | ||||
| 			Count: | ||||
| 			<select id="count" value="10" onchange="updateTable()"> | ||||
|  | @ -17,6 +22,7 @@ | |||
| 				<option>100</option> | ||||
| 			</select> | ||||
| 			<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input> | ||||
| 		</div> | ||||
| 	</body> | ||||
| </html> | ||||
| 
 | ||||
|  |  | |||
|  | @ -1,7 +1,57 @@ | |||
| body { | ||||
|     padding: 0.5em 1em 2em 1em; | ||||
|     margin: 3em 0.5em 0em 0.5em; | ||||
|     text-align: center; | ||||
|     font-family: sans-serif; | ||||
|     background-color: #444; | ||||
|     font-family: Roboto, sans-serif; | ||||
|     color: #ddd; | ||||
| } | ||||
| 
 | ||||
| a { | ||||
| 	color: #ddd; | ||||
| } | ||||
| 
 | ||||
| a:hover { | ||||
| 	color: #fff; | ||||
| } | ||||
| 
 | ||||
| #topbar { | ||||
| 	padding: 0.25em 0.5em; | ||||
| 	position: absolute; | ||||
| 	box-sizing: border-box; | ||||
| 	top: 0; | ||||
| 	left: 0; | ||||
| 	display: flex; | ||||
| 	align-items: center; | ||||
| 	flex-direction: row; | ||||
| 	width: 100%; | ||||
| 	background-color: #666; | ||||
| 	height: 2.5em; | ||||
| } | ||||
| 
 | ||||
| #topbar div { | ||||
| 	margin-left: 5px; | ||||
| 	margin-right: 5px; | ||||
| } | ||||
| 
 | ||||
| #topbar a { | ||||
| 	text-decoration: none; | ||||
| } | ||||
| 
 | ||||
| #logo { | ||||
| 	font-weight: bold; | ||||
| 	color: #eee; | ||||
| } | ||||
| 
 | ||||
| div#nav-login { | ||||
| 	margin-left: auto; | ||||
| } | ||||
| 
 | ||||
| #main { | ||||
| 	margin: 0.5em; | ||||
| 	padding: 0.5em; | ||||
| 	display: inline-block; | ||||
| 	background-color: #282828; | ||||
| 	box-shadow: 0px 5px 20px black; | ||||
| } | ||||
| 
 | ||||
| #requests { | ||||
|  | @ -10,7 +60,7 @@ body { | |||
| } | ||||
| 
 | ||||
| #requests table, th, td { | ||||
| 	border: 2px solid black; | ||||
| 	border: 2px solid #aaa; | ||||
| 	border-collapse: collapse; | ||||
| } | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue