From 385d9fa27ea57b6f4196eb54349be8638d78256e Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 20 Sep 2021 22:33:19 +0300
Subject: [PATCH] markers rework - editor UI

---
 index.css  |  5 +----
 index.html | 38 +++++++++++++++++---------------------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/index.css b/index.css
index 7f99eb16..b7d51336 100644
--- a/index.css
+++ b/index.css
@@ -1528,6 +1528,7 @@ div.states > .coaIcon > use {
 #markerEditor div.label {
   display: inline-block;
   width: 5.5em;
+  padding: 0.3em 0;
 }
 
 #saveTilesScreen div.label {
@@ -1535,10 +1536,6 @@ div.states > .coaIcon > use {
   width: 5em;
 }
 
-#regimentBody div {
-  margin: 0.1em 0;
-}
-
 #regimentBody input[type="number"] {
   width: 5em;
 }
diff --git a/index.html b/index.html
index 598fee6f..d96ed70a 100644
--- a/index.html
+++ b/index.html
@@ -2039,18 +2039,19 @@
       <div id="markerBody" style="padding-bottom: .3em">
         <div data-tip="Marker type. Style changes will apply to all markers of the same type. Leave blank if the marker is unique">
           <div class="label">Type:</div>
-          <input id="markerType" />
+          <input id="markerType" style="width: 10.3em" />
         </div>
 
         <div data-tip="Marker icon. Paste any Unicode symbol or select from the predefined list">
           <div class="label">Icon:</div>
           <input id="markerIcon" style="width:5em" />
-          <button id="markerIconSelect" style="padding: 0; width: 4.5em">select</button>
+          <button id="markerIconSelect" style="width: 5em">select</button>
         </div>
 
-        <div data-tip="Marker icon size in pixels">
-          <div class="label">Icon size:</div>
-          <input id="markerIconSize" type="number" min="2" max="20" step="0.5" />
+        <div data-tip="Marker marker element and icon sizes in pixels">
+          <div class="label">Size:</div>
+          <input data-tip="Marker element size in pixels" id="markerSize" type="number" min="2" max="500" style="width: 5em" />
+          <input data-tip="Marker icon sizes in pixels" id="markerIconSize" type="number" min="2" max="20" step="0.5" style="width: 5em" />
         </div>
 
         <div data-tip="Marker icon shift (by X and by Y axis), percent. Set to 50 to position icon in center">
@@ -2059,14 +2060,9 @@
           <input id="markerIconShiftY" type="number" min="0" max="100" step="1" style="width:5em" />
         </div>
 
-        <div data-tip="Size of the marker">
-          <div class="label">Marker size:</div>
-          <input id="markerSize" type="number" min="2" max="500" />
-        </div>
-
         <div data-tip="Marker pin shape">
           <div class="label">Pin shape:</div>
-          <select id="markerPin" >
+          <select id="markerPin" style="width: 10.3em">
             <option value="bubble">Bubble</option>
             <option value="pin">Pin</option>
             <option value="square">Square</option>
@@ -2085,8 +2081,8 @@
 
         <div data-tip="Pin fill and stroke colors">
           <div class="label">Pin colors:</div>
-          <input id="markerFill" type="color" style="width:5em" />
-          <input id="markerStroke" type="color" style="width:5em" />
+          <input id="markerFill" type="color" style="width:5em; height:1.6em" />
+          <input id="markerStroke" type="color" style="width:5em; height:1.6em" />
         </div>
       </div>
 
@@ -2100,8 +2096,8 @@
 
     <div id="regimentEditor" class="dialog" style="display: none">
 
-      <div id="regimentBody">
-        <div>
+      <div id="regimentBody" style="padding-bottom: 0.3em">
+        <div style="padding-bottom: 0.2em">
           <button id="regimentType" data-tip="Regiment type (land or naval). Click to change"></button>
           <input id="regimentName" data-tip="Type to rename the regiment" autocorrect="off" spellcheck="false" style="width: 13em">
           <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
@@ -2555,7 +2551,7 @@
     </div>
 
     <div id="stateNameEditor" class="dialog" data-state="0" style="display: none">
-      <div style="padding: .1em">
+      <div>
         <div data-tip="State short name" class="label">Short name:</div>
         <input id="stateNameEditorShort" data-tip="Type to change the short name" autocorrect="off" spellcheck="false" style="width: 11em">
         <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
@@ -2563,7 +2559,7 @@
         <span id="stateNameEditorShortRandom" data-tip="Generate random name" class="icon-globe pointer"></span>
       </div>
 
-      <div style="padding: .1em" data-tip="Select form name">
+      <div data-tip="Select form name">
         <div data-tip="State form name" class="label">Form name:</div>
         <select id="stateNameEditorSelectForm" style="width: 11em">
           <option value="">blank</option>
@@ -2642,7 +2638,7 @@
         <span id="stateNameEditorAddForm" data-tip="Click to add custom state form name to the list" class="icon-plus pointer"></span>
       </div>
 
-      <div style="padding: .1em">
+      <div>
         <div data-tip="State full name" class="label">Full name:</div>
         <input id="stateNameEditorFull" data-tip="Type to change the full name" autocorrect="off" spellcheck="false" style="width: 11em">
         <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
@@ -2731,7 +2727,7 @@
     </div>
 
     <div id="provinceNameEditor" class="dialog" data-province="0" style="display: none">
-      <div style="padding: .1em">
+      <div>
         <div data-tip="Province short name" class="label">Short name:</div>
         <input id="provinceNameEditorShort" data-tip="Type to change the short name" autocorrect="off" spellcheck="false" style="width: 11em">
         <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
@@ -2739,7 +2735,7 @@
         <span id="provinceNameEditorShortRandom" data-tip="Generate random name" class="icon-globe pointer"></span>
       </div>
 
-      <div style="padding: .1em" data-tip="Select form name">
+      <div data-tip="Select form name">
         <div data-tip="Province form name" class="label">Form name:</div>
         <select id="provinceNameEditorSelectForm" style="display: inline-block; width: 11em; height: 1.645em">
           <option value="">blank</option>
@@ -2779,7 +2775,7 @@
         <span id="provinceNameEditorAddForm" data-tip="Click to add custom province form name to the list" class="icon-plus pointer"></span>
       </div>
 
-      <div style="padding: .1em">
+      <div>
         <div data-tip="Province full name" class="label">Full name:</div>
         <input id="provinceNameEditorFull" data-tip="Type to change the full name" autocorrect="off" spellcheck="false" style="width: 11em">
         <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>