backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-17 09:41:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(religions editor): enhance UI paddings

Browse source
This commit is contained in:
Azgaar 2023-03-19 14:39:48 +04:00
parent 13e247ed9c
commit 3ce0481a49
1 changed files with 33 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

66
modules/dynamic/editors/religions-editor.js
View file

@ -23,7 +23,7 @@ export function open() {
function insertEditorHtml() { function insertEditorHtml() {
const editorHtml = /* html */ `<div id="religionsEditor" class="dialog stable"> const editorHtml = /* html */ `<div id="religionsEditor" class="dialog stable">
<div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 5em 6em 6em 8em"> <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 6em 7em 6em 7em">
<div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div> <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
<div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div> <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
<div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div> <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
@ -177,7 +177,7 @@ function religionsEditorAddLines() {
data-expansion="" data-expansion=""
data-expansionism="" data-expansionism=""
> >
<svg width="11" height="11" class="placeholder"></svg> <svg width="9" height="9" class="placeholder"></svg>
<input data-tip="Religion name. Click and type to change" class="religionName italic" style="width: 11em" <input data-tip="Religion name. Click and type to change" class="religionName italic" style="width: 11em"
value="${r.name}" autocorrect="off" spellcheck="false" /> value="${r.name}" autocorrect="off" spellcheck="false" />
<select data-tip="Religion type" class="religionType placeholder" style="width: 5em"> <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
@ -187,12 +187,11 @@ function religionsEditorAddLines() {
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span> <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
<input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" /> <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span> <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
<div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div> <div data-tip="Religion area" class="religionArea hide" style="width: 6em">${si(area) + unit}</div>
<span data-tip="${populationTip}" class="icon-male hide"></span> <span data-tip="${populationTip}" class="icon-male hide"></span>
<div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div> <div data-tip="${populationTip}" class="religionPopulation hide pointer" style="width: 5em">${si(
<select data-tip="Potential religion extent" class="religionExtent placeholder hide" style="width: 5em"></select> population
<span class="icon-resize-full placeholder hide"></span> )}</div>
<input class="religionExpan placeholder hide" type="number" />
</div>`; </div>`;
continue; continue;
} }
@ -222,14 +221,13 @@ function religionsEditorAddLines() {
<input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em" <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
value="${r.deity || ""}" autocorrect="off" spellcheck="false" /> value="${r.deity || ""}" autocorrect="off" spellcheck="false" />
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span> <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
<div data-tip="Religion area" class="religionArea hide" style="width: 5em">${si(area) + unit}</div> <div data-tip="Religion area" class="religionArea hide" style="width: 6em">${si(area) + unit}</div>
<span data-tip="${populationTip}" class="icon-male hide"></span> <span data-tip="${populationTip}" class="icon-male hide"></span>
<div data-tip="${populationTip}" class="religionPopulation hide pointer">${si(population)}</div> <div data-tip="${populationTip}" class="religionPopulation hide pointer" style="width: 5em">${si(
population
)}</div>
${getExpansionColumns(r)} ${getExpansionColumns(r)}
<span <span data-tip="Lock this religion" class="icon-lock${r.lock ? "" : "-open"} hide"></span>
data-tip="Lock this religion"
class="icon-lock${r.lock ? "" : "-open"} hide"
></span>
<span data-tip="Remove religion" class="icon-trash-empty hide"></span> <span data-tip="Remove religion" class="icon-trash-empty hide"></span>
</div>`; </div>`;
} }
@ -260,7 +258,7 @@ function religionsEditorAddLines() {
$body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity)); $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity));
$body.querySelectorAll("div > div.religionPopulation").forEach(el => el.on("click", changePopulation)); $body.querySelectorAll("div > div.religionPopulation").forEach(el => el.on("click", changePopulation));
$body.querySelectorAll("div > select.religionExtent").forEach(el => el.on("change", religionChangeExtent)); $body.querySelectorAll("div > select.religionExtent").forEach(el => el.on("change", religionChangeExtent));
$body.querySelectorAll("div > input.religionExpan").forEach(el => el.on("change", religionChangeExpansionism)); $body.querySelectorAll("div > input.religionExpantion").forEach(el => el.on("change", religionChangeExpansionism));
$body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemovePrompt)); $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemovePrompt));
$body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus)); $body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus));
$body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus)); $body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus));
@ -282,25 +280,27 @@ function getTypeOptions(type) {
function getExpansionColumns(r) { function getExpansionColumns(r) {
if (r.type === "Folk") if (r.type === "Folk")
return `<span data-tip="Potential religion extent" class="religionExtent hide" style="width: 5em"> return /* html */ `
culture <span class="icon-resize-full-alt placeholder hide" style="padding-right: 2px"></span>
</span> <span data-tip="Potential religion extent" class="religionExtent hide" style="width: 5em">culture</span>
<span class="icon-resize-full placeholder hide"></span> <span class="icon-resize-full placeholder hide"></span>
<input class="religionExpan placeholder hide" type="number" />`; <input class="religionExpantion placeholder hide" type="number" />`;
else
return `<select data-tip="Potential religion extent" class="religionExtent hide" style="width: 5em"> return /* html */ `
${getExtentOptions(r.expansion)} <span class="icon-resize-full-alt hide" style="padding-right: 2px"></span>
</select> <select data-tip="Potential religion extent" class="religionExtent hide" style="width: 5em">
<span data-tip="Religion expansionism. Defines competitive size" class="icon-resize-full hide"></span> ${getExtentOptions(r.expansion)}
<input </select>
data-tip="Religion expansionism. Defines competitive size. Click to change, then click Recalculate to apply change" <span data-tip="Religion expansionism. Defines competitive size" class="icon-resize-full hide"></span>
class="religionExpan hide" <input
type="number" data-tip="Religion expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
min="0" class="religionExpantion hide"
max="99" type="number"
step=".1" min="0"
value=${r.expansionism} max="99"
/>`; step=".1"
value=${r.expansionism}
/>`;
} }
function getExtentOptions(type) { function getExtentOptions(type) {