From e479bf2a760dcf1a3338e23ea0db69f89cbb3397 Mon Sep 17 00:00:00 2001
From: Taka <taka@vm-linux-dev>
Date: Mon, 18 Jul 2022 20:31:41 +1000
Subject: [PATCH] Removed the "Width:" labels from the UI.

---
 vasl_templates/webapp/static/css/main.css     |  2 ++
 vasl_templates/webapp/static/main.js          | 15 +++++++++---
 vasl_templates/webapp/templates/tabs-ob1.html | 12 ++++------
 .../webapp/templates/tabs-scenario.html       | 23 ++++++++-----------
 4 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/vasl_templates/webapp/static/css/main.css b/vasl_templates/webapp/static/css/main.css
index 781e30e..61d3402 100644
--- a/vasl_templates/webapp/static/css/main.css
+++ b/vasl_templates/webapp/static/css/main.css
@@ -40,6 +40,8 @@ label { height: 1.25em ; }
 button.edit-template { height: 30px ; padding: 4px 10px ; }
 button.edit-template img { height: 18px ; vertical-align: middle ; margin-right: 0.25em ; }
 
+input.snippet-width { width: 3.75em ; }
+
 .ui-dialog-titlebar { padding: 0.2em 0.5em 0.2em 0.5em !important ; }
 .ui-dialog-titlebar img.flag { height: 0.9em ; margin: -2px 0.25em 0 0 ; }
 .ui-dialog-titlebar-close { margin-top: -10px !important ; }
diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js
index b080798..61e0ed5 100644
--- a/vasl_templates/webapp/static/main.js
+++ b/vasl_templates/webapp/static/main.js
@@ -31,8 +31,8 @@ var NATIONALITY_SPECIFIC_BUTTONS = {
     "thh": [ "japanese" ],
 } ;
 
-GENERATE_SNIPPET_HINT = "Generate an HTML snippet (shift-click to get an image)." ;
-EDIT_TEMPLATE_HINT = "Edit the template that will generate this snippet." ;
+GENERATE_SNIPPET_HINT = "Generate an HTML snippet" ;
+EDIT_TEMPLATE_HINT = "Edit the snippet template" ;
 
 // --------------------------------------------------------------------
 
@@ -391,6 +391,15 @@ $(document).ready( function () {
     // replace all the "generate" buttons with "generate/edit" button/droplist's
     $("button.generate").each( function() { init_snippet_button( $(this) ) ; } ) ;
 
+    // add a tooltip to the snippet width textbox's
+    $( "input.param.snippet-width" ).each( function() {
+        // NOTE: I tried putting a little icon in the textbox background, and placeholder text, but it didn't
+        // look good (and the whole point of removing the "Width:" labels was to remove visual clutter),
+        // so we just leave the textbox's blank. Hopefully, the default values in some of them, plus the tooltip,
+        // will be enough for the user to figure out what's going on.
+        $(this).attr( "title", "Snippet width" ) ;
+    } ) ;
+
     // add special options to the COMPASS snippet button menu
     var $compassMenu = $( "select[data-id='compass']" ) ;
     var compassDirns = [ "", "right", "left", "down", "up" ] ;
@@ -564,7 +573,7 @@ function init_snippet_button( $btn )
         // NOTE: We use really short captions so they don't get truncated if the popup menu
         // is opened near the right-hand edge of the window :-/
         "<option value='edit' class='edit-template' title='" + EDIT_TEMPLATE_HINT + "'>Edit</option>",
-        "<option value='as-image' class='as-image' title='Generate the snippet as an image.'>Image</option>",
+        "<option value='as-image' class='as-image' title='Generate the snippet as an image'>Image</option>",
         "</select>",
         "</div>"
     ] ;
diff --git a/vasl_templates/webapp/templates/tabs-ob1.html b/vasl_templates/webapp/templates/tabs-ob1.html
index b66dd40..5a28110 100644
--- a/vasl_templates/webapp/templates/tabs-ob1.html
+++ b/vasl_templates/webapp/templates/tabs-ob1.html
@@ -69,14 +69,12 @@
                 <span class="small">
                     <div class="snippets-ob">
                         <label for="ob" class="header">OB:</label>
-                        <label for="OB_VEHICLES_WIDTH_1">Width:</label>
-                        <input type="text" class="param" name="OB_VEHICLES_WIDTH_1" size="5">
+                        <input type="text" class="param snippet-width" name="OB_VEHICLES_WIDTH_1" size="5">
                         <button class="generate" data-id="ob_vehicles_1"></button>
                     </div>
                     <div class="snippets-notes">
                         <label class="header">Notes:</label>
-                        <label for="OB_VEHICLES_MA_NOTES_WIDTH_1">Width:</label>
-                        <input type="text" class="param" name="OB_VEHICLES_MA_NOTES_WIDTH_1" size="5">
+                        <input type="text" class="param snippet-width" name="OB_VEHICLES_MA_NOTES_WIDTH_1" size="5">
                         <button class="generate" data-id="ob_vehicles_ma_notes_1"></button>
                     </div>
                 </span>
@@ -99,14 +97,12 @@
                 <span class="small">
                     <div class="snippets-ob">
                         <label for="ob" class="header">OB:</label>
-                        <label for="OB_ORDNANCE_WIDTH_1">Width:</label>
-                        <input type="text" class="param" name="OB_ORDNANCE_WIDTH_1" size="5">
+                        <input type="text" class="param snippet-width" name="OB_ORDNANCE_WIDTH_1" size="5">
                         <button class="generate" data-id="ob_ordnance_1"></button>
                     </div>
                     <div class="snippets-notes">
                         <label class="header">Notes:</label>
-                        <label for="OB_ORDNANCE_MA_NOTES_WIDTH_1">Width:</label>
-                        <input type="text" class="param" name="OB_ORDNANCE_MA_NOTES_WIDTH_1" size="5">
+                        <input type="text" class="param snippet-width" name="OB_ORDNANCE_MA_NOTES_WIDTH_1" size="5">
                         <button class="generate" data-id="ob_ordnance_ma_notes_1"></button>
                     </div>
                 </span>
diff --git a/vasl_templates/webapp/templates/tabs-scenario.html b/vasl_templates/webapp/templates/tabs-scenario.html
index 68181d2..8708741 100644
--- a/vasl_templates/webapp/templates/tabs-scenario.html
+++ b/vasl_templates/webapp/templates/tabs-scenario.html
@@ -6,29 +6,29 @@
         <div id="panel-scenario">
             <div class="row">
                 <label for="SCENARIO_NAME">Name:</label>
-                <input name="SCENARIO_NAME" type="text" class="param">
+                <input name="SCENARIO_NAME" type="text" class="param" title="Scenario name">
                 <input name="SCENARIO_ID" type="text" class="param" title="Scenario ID">
                 <button class="scenario-search" title="Search for scenarios"></button>
             </div>
             <div class="row">
                 <label for="SCENARIO_LOCATION">Location:</label>
-                <input name="SCENARIO_LOCATION" type="text" class="param">
+                <input name="SCENARIO_LOCATION" type="text" class="param" title="Scenario location">
                 <select name="SCENARIO_THEATER" class="param" title="Scenario theater"> </select>
                 <button class="generate" data-id="compass"></button>
                 <input name="COMPASS" type="text" class="param" style="display:none;width:1em;">
             </div>
             <div class="row">
                 <label for="SCENARIO_DATE">Date:</label>
-                <input name="SCENARIO_DATE" type="text" size="10" class="param">
+                <input name="SCENARIO_DATE" type="text" size="10" class="param" title="Scenario date">
                 <span class="spacer"></span>
                 <span class="small" style="display:flex;align-items:center;">
-                    Width: <input type="text" class="param" name="SCENARIO_WIDTH" size="5" style="margin:0 0.25em;">
+                    <input type="text" class="param snippet-width" name="SCENARIO_WIDTH" style="margin:0 0.25em;">
                     <button class="generate" data-id="scenario"></button>
                 </span>
             </div>
             <div class="row" style="margin-top:0.2em;height:26px;">
                 <label for="TURN_TRACK_NTURNS">Turns:</label>
-                <select name="TURN_TRACK_NTURNS" class="param"></select>
+                <select name="TURN_TRACK_NTURNS" class="param" "Number of turns"></select>
                 <div class="turn-track-controls small" style="display:none;align-items:center;">
                     <button id="turn-track-settings" title="Turn track settings"><img src="{{url_for('static',filename='images/menu/settings.png')}}"></button>
                     <button class="generate" data-id="turn_track"></button>
@@ -58,7 +58,7 @@
             </div>
             <div class="row">
                 <label for="PLAYER_1_DESCRIPTION"></label>
-                <input name="PLAYER_1_DESCRIPTION" type="text" class="param" title="Description of the player's OB.">
+                <input name="PLAYER_1_DESCRIPTION" type="text" class="param" title="Description of the player's OB">
             </div>
             <div class="row">
                 <label for="PLAYER_2">Player 2:</label>
@@ -69,15 +69,14 @@
             </div>
             <div class="row">
                 <label for="PLAYER_2_DESCRIPTION"></label>
-                <input name="PLAYER_2_DESCRIPTION" type="text" class="param" title="Description of the player's OB.">
+                <input name="PLAYER_2_DESCRIPTION" type="text" class="param" title="Description of the player's OB">
             </div>
             <div class="row">
                 <input name="ASA_ID" type="text" size="1" class="param" style="display:none;">
                 <input name="ROAR_ID" type="text" size="1" class="param" style="display:none;">
                 <span class="spacer"></span>
                 <span class="small" style="display:flex;align-items:center;">
-                    Width:
-                    <input type="text" class="param" name="PLAYERS_WIDTH" size="5" style="margin:0 0.25em;">
+                    <input type="text" class="param snippet-width" name="PLAYERS_WIDTH" style="margin:0 0.25em;">
                     <button class="generate" data-id="players"></button>
                 </span>
             </div>
@@ -109,8 +108,7 @@
             <div class="footer">
                 <span class="spacer"></span>
                 <span class="small">
-                    <label for="VICTORY_CONDITIONS_WIDTH">Width:</label>
-                    <input type="text" class="param" name="VICTORY_CONDITIONS_WIDTH" size="5">
+                    <input type="text" class="param snippet-width" name="VICTORY_CONDITIONS_WIDTH">
                     <button class="generate" data-id="victory_conditions"></button>
                 </span>
             </div>
@@ -128,8 +126,7 @@
                 <img id="ssr-trash" class="sortable-trash">
                 <span class="spacer"></span>
                 <span class="small">
-                    <label for="SSR_WIDTH">Width:</label>
-                    <input type="text" class="param" name="SSR_WIDTH" size="5">
+                    <input type="text" class="param snippet-width" name="SSR_WIDTH">
                     <button class="generate" data-id="ssr"></button>
                 </span>
             </div>