diff --git a/static/form.html b/static/form.html index e9d7aeb..5f87da3 100644 --- a/static/form.html +++ b/static/form.html @@ -20,9 +20,9 @@ Coordinates (click on map) -
+
-
+
diff --git a/static/form.js b/static/form.js index b2f0949..2138949 100644 --- a/static/form.js +++ b/static/form.js @@ -35,7 +35,7 @@ function fillForm() { document.getElementById('note').value = item.note; document.getElementById('hidden').checked = item.hidden; - coordsToMap(item.coords_bl, item.coords_tr); + formCoordsToMap(); } const saveBtn = document.getElementById('save'); diff --git a/static/index.html b/static/index.html index 10ba555..125ce66 100644 --- a/static/index.html +++ b/static/index.html @@ -5,27 +5,39 @@ + -

in?

- - -
- loading… - +

+
+
+ loading… + +
+ +
- + diff --git a/static/index.js b/static/index.js index 1b1db31..a13bf62 100644 --- a/static/index.js +++ b/static/index.js @@ -39,23 +39,23 @@ function renderItems() { } function getLocString(items, item) { - let ancestors = []; + item.ancestors = []; let next = item; let loop = false; while (next) { - if (ancestors.includes(next)) { + if (item.ancestors.includes(next)) { loop = true; - if (ancestors.length == 1) { - ancestors.push(null); + if (item.ancestors.length == 1) { + item.ancestors.push(null); } break; } - ancestors.unshift(next); + item.ancestors.unshift(next); next = items[next.is_in]; } - ancestors.pop(); - let loc = ancestors.map(i => i.id).join(' ➜ ') || '⬚'; - let longloc = ancestors.map(i => `${i.type || ''} ${i.id} ${i.name && `(${i.name})` || ''}`).join(' ➜ ') || 'universe'; + item.ancestors.pop(); + let loc = item.ancestors.map(i => i.id).join(' ➜ ') || '⬚'; + let longloc = item.ancestors.map(i => `${i.type || ''} ${i.id} ${i.name && `(${i.name})` || ''}`).join(' ➜ ') || 'universe'; if (loop) { loc += ' ↻'; longloc += ' ↻'; @@ -69,7 +69,7 @@ function search(e) { const regex = new RegExp(query, 'i') for (const elem of document.getElementsByClassName('result')) { - const item = items[elem.id.substr(5)]; + const item = items[elem.id.slice(5)]; let found = false; if (query) { for (const a in searchAttrs) { @@ -99,3 +99,23 @@ function showhidden(e){ results.classList.remove('showhidden'); } } + +function showItem(e) { + const item = items[e.target.id.slice(5)]; + const ancestors = item.ancestors.concat(item); + for (let i = ancestors.length-1; i >= 0; i--) { + const ancestor = ancestors[i]; + if (ancestor.coords_bl && ancestor.coords_tr) { + if (ancestor != item) { + const mapnote = `Showing ${ancestor.type || ''} ${ancestor.id} ${ancestor.name && `(${ancestor.name})` || ''}`; + document.getElementById('mapnote').textContent = mapnote; + } + coordsToMap(ancestor.coords_bl, ancestor.coords_tr); + break; + } + } +} + +function hideItem(e) { + clearMap(); +} \ No newline at end of file diff --git a/static/shared.js b/static/shared.js index 10a5128..7a51e29 100644 --- a/static/shared.js +++ b/static/shared.js @@ -2,7 +2,7 @@ function renderMap(xx, yy) { if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 && xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 && xx[1] >= xx[0] && yy[1] >= yy[0]) { - let grid = document.getElementById('grid'); + let grid = document.getElementById('mapgrid'); grid.style.top = `${yy[0]*10}%`; grid.style.left = `${100/31*xx[0]}%`; grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`; @@ -12,6 +12,14 @@ function renderMap(xx, yy) { } } +function clearMap() { + const mapnote = document.getElementById('mapnote'); + if (mapnote) { + mapnote.textContent = ''; + } + document.getElementById('mapgrid').removeAttribute('style'); +} + function coordsToMap(coords_bl, coords_tr) { let bl_y = coords_bl[0]; let tr_y = coords_tr[0]; diff --git a/static/style.css b/static/style.css index 489e22a..59a1f31 100644 --- a/static/style.css +++ b/static/style.css @@ -4,10 +4,8 @@ body { font-family: sans-serif; - max-width: 600px; margin: auto; - padding-bottom: 1em; - background: #fefefe; + padding: 1em; } h1, #search { @@ -28,7 +26,12 @@ h1 a { .result { background: #eee; padding: 1em; - margin: 1em 0; + border: 1px solid #bbb; +} + +.result:focus { + outline: 2px solid #08f; + border-radius: 1px; } .result a { @@ -91,8 +94,10 @@ h2 { font-weight: bold; text-align: center; font-size: 1.5em; - margin: 0.5em 0; + margin: 0.5em auto; cursor: pointer; + grid-column: 1/-1; + max-width: 400px; } .btn.green { @@ -105,6 +110,11 @@ h2 { color: white; } +form { + max-width: 600px; + margin: auto; +} + form label { display: block; width: 100%; @@ -127,7 +137,7 @@ input, textarea, select { padding: 0.3em; font-family: monospace; font-size: 1.4em; - background: initial; + background: #eee; border: 1px solid gray; } @@ -135,34 +145,93 @@ input[type=checkbox] { width: initial; display: initial; min-width: initial; + margin: 0; } textarea { min-height: 8em; } -#plan { +#mapcontainer { + grid-column: 1/-1; + text-align: center; + position: sticky; + pointer-events: none; + top: 0; +} + +#mapcontainer * { + pointer-events: all; +} + +#map { position: relative; border: 1px solid black; background: #fff; + max-width: 800px; + max-height: 50vh; + aspect-ratio: 31 / 10; + margin: 0 auto; } -#plan img { +#mapnote { + min-height: 1.95em; + font-style: italic; + margin: 0; + padding: 0.5em; + display: inline-block; + background: #fff; + border: 1px solid; + border-top: none; +} + +#mapnote:empty { + background: none; + border: none; +} + +#map img { width: 100%; + max-height: 100%; + max-width: 100%; display: block; } -form #plan { +form #map { margin: 0.3em 0 1em 0; } -#grid { +#mapgrid { position: absolute; pointer-events: none; outline: 2px solid #f00; background: #ff08; } -#grid:not([style]) { +#mapgrid:not([style]) { outline: none; +} + +#grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 1em; +} + +@media only screen and (max-width: 500px) { + #grid { + grid-template-columns: none; + } +} + +#grid #results { + display: contents; +} + +#grid #searchcontainer { + grid-column: 1/-1; + width: calc(min(600px, 100%)); + max-width: 100%; + text-align: center; + margin: auto; } \ No newline at end of file