From 9f95e704b9b95e59f335f082e9ee54160baa2f85 Mon Sep 17 00:00:00 2001 From: Shy Date: Sat, 4 May 2024 18:28:09 +0200 Subject: [PATCH 1/6] Added buttons for known types. --- static/c4.css | 15 +++++++++++++++ static/form.js | 18 ++++++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/static/c4.css b/static/c4.css index 7805a9b..c0ca189 100644 --- a/static/c4.css +++ b/static/c4.css @@ -36,6 +36,21 @@ h1, h1 a { font-size: smaller; } +#knowntypes button { + color: #220; + background-color: #dfaa37; + border: 1px solid #220; + border-radius: 4px; + padding: 0.2em 0.4em; + margin: 0.2em; + font-weight: bolder; + cursor: pointer; +} + +#knowntypes button:hover, #knowntypes button:focus { + background-color: #f5c251; +} + .btn { box-shadow: 0 3px 6px -1px rgba(0,0,0,0.3); } diff --git a/static/form.js b/static/form.js index a82d2a5..d5ab745 100644 --- a/static/form.js +++ b/static/form.js @@ -65,8 +65,22 @@ function knownTypes() { map[i.type] = true; } } - let types = Object.keys(map).sort().join(', ') - document.getElementById('knowntypes').textContent = `Known types: ${types}.`; + + // Get location in document. + let known_types = document.getElementById('knowntypes'); + known_types.textContent = `Known types: `; + + // Create a button for every known type. + for (let label of Object.keys(map).sort()) { + btn = document.createElement('button'); + btn.setAttribute('type', 'button'); + btn.textContent = label; + btn.addEventListener('click', function() { + document.getElementById('type').value = label; + }); + + known_types.appendChild(btn); + } } function save() { From c9cda14f38631eb717593c0ceab9234fb005394c Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 14:42:21 +0200 Subject: [PATCH 2/6] Fix indentation and use const where preferable --- static/form.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/static/form.js b/static/form.js index d5ab745..d1affc1 100644 --- a/static/form.js +++ b/static/form.js @@ -67,19 +67,19 @@ function knownTypes() { } // Get location in document. - let known_types = document.getElementById('knowntypes'); + const known_types = document.getElementById('knowntypes'); known_types.textContent = `Known types: `; // Create a button for every known type. for (let label of Object.keys(map).sort()) { - btn = document.createElement('button'); - btn.setAttribute('type', 'button'); - btn.textContent = label; - btn.addEventListener('click', function() { - document.getElementById('type').value = label; - }); + btn = document.createElement('button'); + btn.setAttribute('type', 'button'); + btn.textContent = label; + btn.addEventListener('click', function() { + document.getElementById('type').value = label; + }); - known_types.appendChild(btn); + known_types.appendChild(btn); } } From d98342bd02124b7f0f24e6b17c77e17b7c8ee86b Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 17:26:31 +0200 Subject: [PATCH 3/6] Fixed colors for #mapnote --- static/c4.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/static/c4.css b/static/c4.css index c0ca189..d54dce4 100644 --- a/static/c4.css +++ b/static/c4.css @@ -8,12 +8,18 @@ h1, h1 a { } #map { - border: 1px solid #202020; - background: #4d4d4d; - max-width: 1440px; - max-height: 50vh; - aspect-ratio: 2 / 1; - box-shadow: 0px 6px 12px #000c; + border: 1px solid #202020; + background: #4d4d4d; + max-width: 1440px; + max-height: 50vh; + aspect-ratio: 2 / 1; + box-shadow: 0px 6px 12px #000c; +} + +#mapnote { + background: #202020; + border: 1px solid #000; + border-top: none; } .result { From 0c1a280a190157de33dd56ad417c4a1dc155cf6f Mon Sep 17 00:00:00 2001 From: Shy Date: Mon, 6 May 2024 18:43:03 +0200 Subject: [PATCH 4/6] More beautiful #mapnote --- static/c4.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/static/c4.css b/static/c4.css index d54dce4..0a62228 100644 --- a/static/c4.css +++ b/static/c4.css @@ -9,7 +9,7 @@ h1, h1 a { #map { border: 1px solid #202020; - background: #4d4d4d; + background-color: #4d4d4d; max-width: 1440px; max-height: 50vh; aspect-ratio: 2 / 1; @@ -17,9 +17,17 @@ h1, h1 a { } #mapnote { - background: #202020; - border: 1px solid #000; - border-top: none; + background-color: #ccc; + color: #333; + border-color: #202020; + padding: 0.25em 0.5em; + position: relative; + top: -1px; + box-shadow: 0px 6px 12px #000c; +} + +#mapnote:empty { + display: none; } .result { From bf182251ec3fca5a2854fd1a967644b5bb51f366 Mon Sep 17 00:00:00 2001 From: Shy Date: Tue, 7 May 2024 18:38:00 +0200 Subject: [PATCH 5/6] Yellow outline around search input --- static/c4.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/c4.css b/static/c4.css index 0a62228..224b6ae 100644 --- a/static/c4.css +++ b/static/c4.css @@ -7,6 +7,10 @@ h1, h1 a { color: #dfaa37; /* C4 Yellow */ } +#search:focus { + outline: 2px solid #dfaa37; +} + #map { border: 1px solid #202020; background-color: #4d4d4d; From 15d914fae3ad85cab91c4033662359ecba949603 Mon Sep 17 00:00:00 2001 From: Shy Date: Tue, 7 May 2024 19:13:45 +0200 Subject: [PATCH 6/6] Enhance visibility of marker --- static/c4.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/c4.css b/static/c4.css index 224b6ae..baa870b 100644 --- a/static/c4.css +++ b/static/c4.css @@ -108,8 +108,9 @@ h1, h1 a { } #mapgrid { - outline: 2px solid #dfaa37; - background: #dfaa3780; + outline: 2px solid #333; + background-color: #dfaa37; + border-radius: 4px; animation: blinker 1s infinite; }