3. Okt. 2024, 05:10

_res/_custom.js

@@ -87,7 +87,6 @@ function gradioCustomJS() {
 	alertModalElemP.id = "alertModalP"
 	alertModalElemP.append(alertModalElemI, alertModalElemSpan)
 	alertModalElem.id = "alertModal"
-	alertModalElem.style.display = "none"
 	alertModalElem.append(alertModalElemP, alertModalElemButton)
 	//alertModalElem.innerHTML = '<p></p>'
 	resolutionModalWrapper.appendChild(alertModalElem)
@@ -160,22 +159,29 @@ function gradioCustomJS() {
 			resolutionModalWrapper.style.opacity = "1"
 			alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
 			alertModalElemButton.textContent = "Ok"
-			resolutionModalWrapper.style.display = ""
+			setTimeout(() => {
+				resolutionModalWrapper.style.display = ""
+			}, 400)
 		} else if (window.innerWidth < 1024) {
 			gradioContainer.classList.add("blur-container")
 			body.style.setProperty("--blur-value", "12px")
 			gradioApp.style.height = "calc(100vh - 120px)"
+			resolutionModalWrapper.style.backdropFilter = "blur(12px)"
+			resolutionModalWrapper.style.opacity = "1"
 			alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
 			alertModalElemButton.textContent = "Ok"
-			resolutionModalWrapper.style.display = ""
+			setTimeout(() => {
+				resolutionModalWrapper.style.display = ""
+			}, 400)
 		} else {
 			gradioContainer.classList.remove("blur-container")
 			body.style.setProperty("--blur-value", "0px")
 			gradioApp.style.height = ""
 			resolutionModalWrapper.style.backdropFilter = "blur(0px)"
 			resolutionModalWrapper.style.opacity = "0"
-			resolutionModalWrapper.style.display = "none"
-			alertModalElem.style.display = "none"
+			setTimeout(() => {
+				resolutionModalWrapper.style.display = "none"
+			}, 400)
 		}
 	}