dxs
/
learn-request-queue
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases 11 Wiki Activity

Add 'Add Request' Modal

master
Dessa Simpson 2020-07-05 15:20:22 -07:00
parent e8d7d6362b
commit 12d4ffad2b
3 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/main.js
View File

@ -34,4 +34,12 @@ function updateTable() {
getRequests(count,allRequests);
}
function openAddRequestModal() {
document.getElementById("addRequestModalBackground").style.display = "flex";
}
function closeAddRequestModal() {
document.getElementById("addRequestModalBackground").style.display = "none";
}
updateTable();

37
public/style.css
View File

@ -83,3 +83,40 @@ div#nav-userpic {
#requests .request-score {
text-align: right;
}
#addRequestModalBackground {
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #444;
background-color: #444a;
align-items: center;
justify-content: center;
}
#addRequestModal {
position: relative;
padding: 1em;
display: inline-block;
background-color: #444;
box-shadow: 0px 5px 20px black;
}
#addRequestModal h1 {
margin-top: 0;
}
#addRequestModalClose {
position: absolute;
top: 0;
right: 0.5em;
font-size: 150%;
}
#addRequestModalClose a {
text-decoration: none;
}

10
views/main.eta
View File

@ -10,6 +10,7 @@
<div id="logo">Learn Request Queue</div>
<div id="nav-requests"><a href="/">Requests</a></div>
<%- if (it.userName) { // Logged in -%>
<div id="nav-addrequest"><a href="#" onclick="openAddRequestModal()">Add Request</a></div>
<div id="nav-userpic"><img src="<%= it.userProfilePicture %>" /></div>
<div id="nav-username"><%= it.userName %></div>
<div id="nav-logout"><a href="/logout">Logout</a></div>
@ -29,6 +30,15 @@
</select>
<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input>
</div>
<div id="addRequestModalBackground">
<div id="addRequestModal">
<div id="addRequestModalClose"><a href="#" onclick="closeAddRequestModal()">&times;</a></div>
<h1>Add Request</h1>
URL: <input id="addRequestUrl"></input>
<button onclick="validateAndSubmitRequest()">Request</button><br>
Currently, only Youtube links are accepted.
</div>
</div>
</body>
</html>