Permalink
Browse files

added larger popups for game download modals and added checkbox type …

…to modals
  • Loading branch information...
mrjvs committed Jan 13, 2018
1 parent a269e79 commit cfe87dc082f21ae75c26270c0a4eb676318ec1d3
Showing with 52 additions and 11 deletions.
  1. +12 −1 app/wrapper/css/main.css
  2. +15 −1 app/wrapper/index.html
  3. +25 −9 app/wrapper/js/main.js
View
@@ -475,6 +475,10 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
.popup-hidden {
opacity: 0;
}
.popup-large .left-cont, .popup-large .right-cont {
padding: 0 10px;
flex: 1;
}
.popup-overlay .input-text {
width: calc(100% - 20px);
padding: 10px;
@@ -542,7 +546,14 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
left: 15%;
}
}
.popup-overlay .popup.popup-large {
width: 60%;
}
.cont-container {
display: flex;
flex-direction: row;
margin-top: 1em;
}
.instance_container .content {
display: -webkit-box;
display: flex;
View
@@ -371,7 +371,21 @@ <h1 class="download txt-button txt-button-large txt-button-white txt-s-24 txt-c-
<div class="close">&#x2716;</div>
<h2 class="title">title</h2>
<div class="content">
content
</div>
<div class="button">button</div>
</div>
</div>
</template>
<template id="TEMPLATE_POPUP_LARGE">
<div id="popup1" class="popup-overlay popup-hidden">
<div class="popup popup-large hidden-card">
<div class="close">&#x2716;</div>
<h2 class="title">title</h2>
<div class="content">
<div class="cont-container">
<div class="left-cont"></div>
<div class="right-cont"></div>
</div>
</div>
<div class="button">button</div>
</div>
View
@@ -307,29 +307,45 @@ function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
//menu animations
function createPopup(title,content,inputs,button_text,button_event,id,close_event) {
let btn = document.getElementById("TEMPLATE_POPUP").content.firstElementChild.cloneNode(true);
function createPopup(title,content,inputs,button_text,button_event,id,close_event,large) {
let btn = document.getElementById(large ? "TEMPLATE_POPUP_LARGE" : "TEMPLATE_POPUP").content.firstElementChild.cloneNode(true);
btn.id = id;
btn.querySelector('.title').innerHTML = title;
btn.querySelector('.content').innerHTML = content;
btn.querySelector('.content').innerHTML = content + btn.querySelector('.content').innerHTML;
if (inputs != null) {
let content = btn.querySelector('.content');
let count = true;
function addContent(cont) {
if (large) {
if (count) {
content.querySelector('.left-cont').innerHTML += cont;
} else {
content.querySelector('.right-cont').innerHTML += cont;
}
count = !count;
} else {
content.innerHTML += cont;
}
}
for (let ind = 0; ind < inputs.length;ind++) {
switch (inputs[ind].type) {
case 'button':
let cap = 'Submit';
if (inputs[ind].caption) {
cap = inputs[ind].caption;
}
content.innerHTML += '<h2 class="txt-button txt-button-blue txt-s-16 txt-c-white" onclick="closeUpdate();" style="float: left;">Cancel</h2>';
addContent('<h2 class="txt-button txt-button-blue txt-s-16 txt-c-white" onclick="closeUpdate();" style="float: left;">Cancel</h2>');
break;
case 'text':
default:
case 'check':
let lbl = '';
if (inputs[ind].caption) {
content.innerHTML += '<p>' + inputs[ind].caption + '</p>';
lbl = inputs[ind].caption;
}
content.innerHTML += '<input type="text" id="' + inputs[ind].id + '" class="input-text" />';
addContent('<div><input type="checkbox" id="' + inputs[ind].id + '" >' + lbl + '</div>');
break;
case 'text':
default:
addContent( ( inputs[ind].caption ? '<p>' + inputs[ind].caption + '</p>' : '' ) + '<input type="text" id="' + inputs[ind].id + '" class="input-text" />');
break;
}
}

0 comments on commit cfe87dc

Please sign in to comment.