From b1e189eed23e85c089de0e8507fc3ea81cc79324 Mon Sep 17 00:00:00 2001 From: jaseg Date: Fri, 5 May 2023 23:10:57 +0200 Subject: protoserve: Add some input validation --- gerbonara/cad/protoserve_data/protoserve.html | 259 +++++++++++++++----------- 1 file changed, 152 insertions(+), 107 deletions(-) (limited to 'gerbonara/cad/protoserve_data/protoserve.html') diff --git a/gerbonara/cad/protoserve_data/protoserve.html b/gerbonara/cad/protoserve_data/protoserve.html index 00b038e..c42ce6c 100644 --- a/gerbonara/cad/protoserve_data/protoserve.html +++ b/gerbonara/cad/protoserve_data/protoserve.html @@ -97,6 +97,11 @@ input { text-align: center; } +.group > .attribution, .group > .usage { + grid-column-start: 1; + grid-column-end: span 3; +} + .group > div > .proportion { display: none; } @@ -140,6 +145,14 @@ input { margin: 0 5px 0 5px; } +input[type="text"]:invalid { + background: rgba(255 0 0 / 30%); +} + +input[type="text"]:focus:valid { + background: rgba(0 192 64 / 30%); +} + .group.expand { border-radius: 0; } @@ -161,6 +174,7 @@ input { } #preview { + position: relative; grid-area: main; padding: 20px; } @@ -171,6 +185,25 @@ input { object-fit: contain; } +#preview-message { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: hsla(0 0% 50% / 30%); + display: none; + justify-content: center; + align-items: center; + font-size: 18pt; + font-weight: bold; + color: white; +} + +#preview-message.loading { + display: flex; +} + #links { grid-area: links; display: flex; @@ -225,63 +258,66 @@ input {
-
-

Board settings

- - - - - - -
-
+
Automatically generated preview image +