Smaall UI changes and css cleanup.

This commit is contained in:
Maxim Stewart 2020-03-01 20:54:44 -06:00
parent 66b687f6b9
commit 3f61a08ebf
4 changed files with 39 additions and 46 deletions

View File

@ -24,7 +24,7 @@
</head> </head>
<body> <body>
<div class="download-container" name="import"> <div class="import-container" name="import">
<h1 id="lableTag">Select File</h1> <h1 id="lableTag">Select File</h1>
<input id="inputId" type="file" enctype='multipart/form-data' accept="application/json"/> <input id="inputId" type="file" enctype='multipart/form-data' accept="application/json"/>

View File

@ -21,7 +21,7 @@
<li><button name="saveModalLauncher" class="button-primary" type="button">Save</button></li> <li><button name="saveModalLauncher" class="button-primary" type="button">Save</button></li>
<li><button name="editModalLauncher" class="button-primary" type="button">Edit</button></li> <li><button name="editModalLauncher" class="button-primary" type="button">Edit</button></li>
<li><button name="deleteModalLauncher" class="button-danger" type="button">Delete</button></li> <li><button name="deleteModalLauncher" class="button-danger" type="button">Delete</button></li>
<br/><br/><br/><br/> <br/><br/><br/>
<li><button name="import" class="button-primary" type="button">Import</button></li> <li><button name="import" class="button-primary" type="button">Import</button></li>
<li><button name="downloadModalLauncher" class="button-primary" type="button">Download</button></li> <li><button name="downloadModalLauncher" class="button-primary" type="button">Download</button></li>
<li><button name="donate" class="button-warning" type="button">Donate</button></li> <li><button name="donate" class="button-warning" type="button">Donate</button></li>
@ -205,9 +205,12 @@
<!-- Templates --> <!-- Templates -->
<template id="ulTemplate"> <template id="ulTemplate">
<h2 class="ulHeader"></h2> <h2 class="ulHeader">
<input type="checkbox" id="selectAll" checked="true" /> <label for="selectAll" title="Select All">
<label for="selectAll" title="Select All">Select All</label> <input type="checkbox" checked="true" />
Select All
</label>
</h2>
<ul class="collection"> <ul class="collection">
</ul> </ul>
</template> </template>

View File

@ -60,7 +60,7 @@ const generateSelectionWindow = (json = "", keys = null, keysLength = 0) => {
selAll.addEventListener("click", function (eve) { selAll.addEventListener("click", function (eve) {
toggleSelect(eve.target, "Win" + i); toggleSelect(eve.target, "Win" + i);
}); });
h2Tag.appendChild(h2Txt); h2Tag.prepend(h2Txt);
store.forEach(tab => { store.forEach(tab => {
let liClone = document.importNode(liTemplate.content, true); let liClone = document.importNode(liTemplate.content, true);

View File

@ -67,51 +67,15 @@ li {
display: none; display: none;
} }
#selectAll {
margin-bottom: 1.5em;
}
#lableTag {
top: 48%;
margin: 0 auto;
color: rgba(255, 255, 255, 0.5);
}
/* Classes */ /* Classes */
.modal { /* Plugin page */
width: 650px;
height: auto;
}
.scroller {
scrollbar-color: #00000084 #ffffff64;
scrollbar-width: thin;
}
.collection { .collection {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;
} }
.download-container {
width: 100%;
height: 100%;
background-image: url('../images/icons/import.png');
background-repeat: no-repeat;
background-position: center;
text-align: center;
background-color: rgba(41, 95, 115, 0.85);
transition: 0.6s;
}
.download-container:hover {
transition: 0.6s;
background-color: rgba(41, 95, 115, 0.65);
cursor: pointer;
}
.sessionLI { .sessionLI {
background-color: #0a1827; background-color: #0a1827;
color: #ffffff; color: #ffffff;
@ -130,7 +94,33 @@ li {
box-shadow: 0px 5px 5px 5px #444444; box-shadow: 0px 5px 5px 5px #444444;
} }
.icon { .modal {
width: 25px; width: 650px;
height: 25px; height: auto;
}
.scroller {
scrollbar-color: #00000084 #ffffff64;
scrollbar-width: thin;
}
/* Import page */
.import-container {
width: 100%;
height: 100%;
background-image: url('../images/icons/import.png');
background-repeat: no-repeat;
background-position: center;
text-align: center;
background-color: rgba(41, 95, 115, 0.85);
transition: 0.6s;
}
.import-container:hover {
transition: 0.6s;
background-color: rgba(41, 95, 115, 0.65);
cursor: pointer;
} }