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

View File

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

View File

@ -83,3 +83,40 @@ div#nav-userpic {
#requests .request-score { #requests .request-score {
text-align: right; 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;
}

View File

@ -10,6 +10,7 @@
<div id="logo">Learn Request Queue</div> <div id="logo">Learn Request Queue</div>
<div id="nav-requests"><a href="/">Requests</a></div> <div id="nav-requests"><a href="/">Requests</a></div>
<%- if (it.userName) { // Logged in -%> <%- 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-userpic"><img src="<%= it.userProfilePicture %>" /></div>
<div id="nav-username"><%= it.userName %></div> <div id="nav-username"><%= it.userName %></div>
<div id="nav-logout"><a href="/logout">Logout</a></div> <div id="nav-logout"><a href="/logout">Logout</a></div>
@ -29,6 +30,15 @@
</select> </select>
<input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input> <input type="checkbox" id="allRequests" onchange="updateTable()">View requests in any state</input>
</div> </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> </body>
</html> </html>