Tightened up the player flags.

vasl_templates/webapp/snippets.py

@@ -216,7 +216,7 @@ def get_flag( nat ):
         with app.open_resource( fname, "rb" ) as fp:
             return _get_small_image( fp, key, height )
     except FileNotFoundError:
-        if nat in globvars.template_pack["nationalities"]:
+        if nat in globvars.template_pack["nationalities"] and not request.args.get("no-spacer"):
             # NOTE: If the nationalitity is valid but has no flag, we return a spacer image, so that
             # the scenario card doesn't show a "broken image" image.
             fname = os.path.join( "static/images/spacer.png" )

vasl_templates/webapp/static/css/main.css

@@ -43,7 +43,7 @@ button.edit-template img { height: 18px ; vertical-align: middle ; margin-right:
 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 img.flag { height: 0.9em ; margin: -2px 0.4em 0 0 ; }
 .ui-dialog-titlebar-close { margin-top: -10px !important ; }
 .ui-dialog-content { padding: 1em !important ; }
 .ui-dialog-content p { margin-bottom: 0.5em ; }

vasl_templates/webapp/static/css/tabs.css

@@ -8,8 +8,9 @@
 #tabs .ui-tabs-nav { background: white ; border: none ; }
 #tabs .ui-tabs-nav a { color: #888 ; }
 #tabs .ui-tabs-nav a:hover { color: #444 ; }
+#tabs .ui-tabs-anchor { display: flex ; align-items: center ; }
 #tabs .ui-tabs-tab.ui-state-active a { color: #444 ; }
-#tabs .ui-tabs-nav li img { position: relative ; top: 2px ; height: 1em ; }
+#tabs .ui-tabs-nav li img {  position: relative ; top: -1px ; margin-right: 0.4em ; height: 14px ; }
 #tabs .ui-tabs-panel { background: #f6f6f6 ; }
 
 /* nb: these are managed in the code but we define them here for the initial load */

vasl_templates/webapp/static/main.js

@@ -340,11 +340,13 @@ $(document).ready( function () {
             if ( ++nFlagsChecked === nats.length ) {
                 // we've checked all the flags - now we can build the player droplists
                 init_player_droplists() ;
+                update_ob_tab_header( 1 ) ;
+                update_ob_tab_header( 2 ) ;
                 update_page_load_status( "flag-urls" ) ;
             }
         }
         nats.forEach( function( nat ) {
-            var url = make_player_flag_url( nat, false ) ;
+            var url = make_player_flag_url( nat, false ) + "?no-spacer=1" ;
             $.ajax( url, {
                 success: function() { gHasPlayerFlag[nat] = true ; onFlagChecked() ; },
                 error: function() { onFlagChecked() ; },
@@ -522,8 +524,8 @@ function init_player_droplists()
             return opt.text ;
         var url = gHasPlayerFlag[opt.id] ? make_player_flag_url( opt.id, false ) : "" ;
         return $( "<div style='display:flex;align-items:center;height:23px;'>" +
-            "<div style='display:inline-block;width:1em;text-align:center;margin-right:5px;'>" +
-            "<img src='" + url + "' style='height:0.8em;'>" +
+            "<div style='width:12px;margin-right:5px;text-align:center;'>" +
+            "<img src='" + url + "' style='height:12px;'>" +
             "</div>" +
             " " + opt.text +
         "</div>" ) ;
@@ -682,8 +684,8 @@ function update_page_load_status( id )
     if ( gPageLoadStatus.length === 0 ) {
         // yup - update the UI
         apply_user_settings() ;
-        $( "a[href='#tabs-extras'] div" ).html(
-            "<img src='" + gImagesBaseUrl + "/extras.png'>&nbsp;Extras"
+        $( "a[href='#tabs-extras']" ).html(
+            "<img src='" + gImagesBaseUrl + "/extras.png'>Extras"
         ) ;
         $("#tabs").tabs({ disabled: [] }) ;
         $("#loader").fadeOut( 500 ) ;
@@ -781,7 +783,7 @@ function install_template_pack( data )
     }
 
     // update the OB tab headers
-    // NOTE: We don't do this while the page is initially loading, it will be done when the default scenario loaded.
+    // NOTE: We don't do this while the page is initially loading, since we need the player flags.
     if ( gPageLoadStatus.indexOf( "flag-urls" ) === -1 ) {
         update_ob_tab_header( 1 ) ;
         update_ob_tab_header( 2 ) ;
@@ -910,7 +912,7 @@ function update_ob_tab_header( player_no )
     var $elem = $( "#tabs .ui-tabs-nav a[href='#tabs-ob" + player_no + "']" ) ;
     var buf = [] ;
     if ( gHasPlayerFlag[ player_nat ] )
-        buf.push( "<img src='" + image_url + "'>&nbsp;" ) ;
+        buf.push( "<img src='" + image_url + "'>" ) ;
     buf.push( "<span>" + escapeHTML(display_name) + " OB</span>" ) ;
     $elem.html( buf.join("") ) ;
 

vasl_templates/webapp/static/utils.js

@@ -431,7 +431,7 @@ function add_flag_to_dialog_titlebar( $dlg, player_no )
 {
     // add a flag to the dialog's titlebar
     var player_nat = get_player_nat( player_no ) ;
-    if ( ! player_nat )
+    if ( ! player_nat || ! gHasPlayerFlag[ player_nat ] )
         return ;
     var $titlebar = $dlg.dialog( "instance" ).uiDialogTitlebar ;
     var url = make_player_flag_url( player_nat, false ) ;

vasl_templates/webapp/templates/tabs.html

@@ -6,11 +6,11 @@
 <img src="{{url_for('static',filename='images/extras.png')}}" style="display:none;">
 
 <ul>
-    <li> <a href="#tabs-scenario"><img src="{{url_for('static',filename='images/scenario.png')}}">&nbsp;Scenario</a>
-    <li> <a href="#tabs-ob1"><div style="width:7em;">&nbsp;</div></a>
-    <li> <a href="#tabs-ob2"><div style="width:7em;">&nbsp;</div></a>
-    <li> <a href="#tabs-extras"><div style="width:4em;">&nbsp;</div></a>
-    <li style="display:none;"> <a href="#tabs-help"><img src="{{url_for('static',filename='images/help.png')}}">&nbsp;Help</a>
+    <li> <a href="#tabs-scenario"><img src="{{url_for('static',filename='images/scenario.png')}}">Scenario</a>
+    <li> <a href="#tabs-ob1"></a>
+    <li> <a href="#tabs-ob2"></a>
+    <li> <a href="#tabs-extras"></a>
+    <li style="display:none;"> <a href="#tabs-help"><img src="{{url_for('static',filename='images/help.png')}}">Help</a>
 </ul>
 
 {%include "tabs-scenario.html"%}