Smaall UI changes and css cleanup.
This commit is contained in:
parent
66b687f6b9
commit
3f61a08ebf
|
@ -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"/>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue