(checklist) Improved styling & formatting and added list autoload

1 files changed, 28 insertions, 22 deletions

diff --git a/checklist.html b/checklist.html
index 7b084f3..800637f 100644
--- a/checklist.html
+++ b/checklist.html
@@ -20,6 +20,10 @@
 	margin-top: 0.5em;
 }
 
+#single-checklist {
+	min-height: calc(100vh - 16px);
+}
+
 .list-controls:hover + .list-item, .list-item > input:hover {
 	background-color: lightgray;
 }
@@ -91,15 +95,17 @@ input {
 			<input type="button" value="Delete" id="delete-btn">
 		</p>
 		<br>
-		<h3>
-			<input type="text" id="name">
-		</h3>
-		<input type="button" value="Uncheck all" id="uncheck-all">
-		<input type="button" value="Check all" id="check-all">
-		<input type="button" value="Lock" id="lock-items">
-		<input type="button" value="+" id="article-add-item">
-		<input type="button" value="-" id="article-sub-item">
-		<article id="lists"></article>
+		<div id="single-checklist">
+			<h3>
+				<input type="text" id="name">
+				<input type="button" value="Uncheck all" id="uncheck-all">
+				<input type="button" value="Check all" id="check-all">
+				<input type="button" value="Lock" id="lock-items">
+				<input type="button" value="+" id="article-add-item">
+				<input type="button" value="-" id="article-sub-item">
+			</h3>
+			<article id="lists"></article>
+		</div>
 		<script>
 			const lists = document.getElementById('lists');
 			const stylesheetLocked = document.getElementById('stylesheet-locked');
@@ -320,22 +326,9 @@ input {
 				}
 			}
 
-			// while (db == '') {}
-
 			dbRequest.onsuccess = function() {
 				db = dbRequest.result;
 
-				var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
-				var all = store.getAll();
-				all.onsuccess = function() {
-					all.result.forEach(function (l) {
-						var nop = document.createElement('option');
-						nop.value = l.name;
-						nop.innerText = l.name;
-						dropdown.appendChild(nop);
-					});
-				}
-
 				document.getElementById('open-btn').onclick = function () {
 					const listName = dropdown.options[dropdown.selectedIndex].text;
 
@@ -347,6 +340,18 @@ input {
 					}
 				}
 
+				var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
+				var all = store.getAll();
+				all.onsuccess = function() {
+					all.result.forEach(function (l) {
+						var nop = document.createElement('option');
+						nop.value = l.name;
+						nop.innerText = l.name;
+						dropdown.appendChild(nop);
+					});
+					document.getElementById('open-btn').click();
+				}
+
 				document.getElementById('delete-btn').onclick = function () {
 					const listName = dropdown.options[dropdown.selectedIndex].text;
 
@@ -367,6 +372,7 @@ input {
 					var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
 					store.put({ name: eiName.value, value: eiValue.value });
 				}
+
 			}
 		</script>
 	</body>