Working noscript message

fileformat · fileformat · commit 2aa6bfd62b72 · 2025-11-01T11:09:54.000-04:00
diff --git a/src/index.html b/src/index.html
@@ -20,13 +20,12 @@
 	<link href="/css/bootstrap.min.css" rel="stylesheet">
 </head>
 
-<body class="h-100">
+<body class="h-100 w-100 d-flex">
 	<script type="module" src="./index.ts"></script>
-	<div class="scriptonly" id="loading">
+	<div class="h-100 w-100 align-items-center justify-content-center scriptonly" id="loading">
 		<img src="/images/spinner.gif" alt="Loading..." />
 	</div>
-	<div id="emojitable" style="display:none">
-	</div>
+	<div id="emojitable" class="d-none w-100 h-100"></div>
 	<div id="errdiv" class="d-none d-flex flex-column justify-content-center align-items-center w-100 h-100">
 		<div class="alert alert-danger m-3" role="alert">
 			<img class="pe-2" src="/images/stop.svg" alt="Error" width="100" height="100" />
@@ -37,7 +36,7 @@
 		<div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
 			<div class="d-flex flex-row align-items-center alert alert-danger m-3" role="alert">
 				<img class="pe-2" src="/images/stop.svg" alt="Error" width="100" height="100" />
-				<span class="fs-4">EmojiSearch requires JavaScript. Try <a href="https://www.fileformat.info/info/emoji/">FileFormat.Info</a> to search without Javascript.</span>
+				<span class="fs-4">EmojiSearch requires JavaScript. Try <a href="https://www.fileformat.info/info/emoji/list.htm">FileFormat.Info</a> to search without Javascript.</span>
 			</div>
 		</div>
 	</noscript>
diff --git a/src/index.ts b/src/index.ts
@@ -452,8 +452,8 @@ async function main() {
 		}
 	});
 
-	document.getElementById("loading")!.style.display = "none";
-	document.getElementById("emojitable")!.style.display = "block";
+	document.getElementById("loading")!.classList.add("d-none");
+	document.getElementById("emojitable")!.classList.remove("d-none");
 }
 
 main();
diff --git a/src/styles.css b/src/styles.css
@@ -7,17 +7,9 @@ html, body {
 }
 
 body {
-  background-color: #f0f0f0;
   font-family: sans-serif;
 }
 
-div#loading {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: white;
-}
+
 
 

Original file line number	Diff line number	Diff line change
`@@ -452,8 +452,8 @@ async function main() {`
`452`	`452`	`}`
`453`	`453`	`});`
`454`	`454`
`455`		`- document.getElementById("loading")!.style.display = "none";`
`456`		`- document.getElementById("emojitable")!.style.display = "block";`
	`455`	`+ document.getElementById("loading")!.classList.add("d-none");`
	`456`	`+ document.getElementById("emojitable")!.classList.remove("d-none");`
`457`	`457`	`}`
`458`	`458`
`459`	`459`	`main();`