diff --git a/vasl_templates/webapp/static/css/main.css b/vasl_templates/webapp/static/css/main.css index f470bd5..f40a5e4 100644 --- a/vasl_templates/webapp/static/css/main.css +++ b/vasl_templates/webapp/static/css/main.css @@ -2,9 +2,11 @@ html { height: 100% ; } body { height: 100% ; overflow: hidden ; } +body { font-family: Arial, Helvetica, sans-serif ; font-size: 16px ; } + ul, ol { margin: 0.5em 0 0 1.25em ; } -input[type="text"] { height: 1.25em ; border: 1px solid #c5c5c5 ; } +input[type="text"] { height: 20px ; border: 1px solid #c5c5c5 ; } label { height: 1.25em ; margin-top: -3px ; } /* -------------------------------------------------------------------- */ @@ -22,7 +24,7 @@ label { height: 1.25em ; margin-top: -3px ; } /* -------------------------------------------------------------------- */ -.ui-selectmenu-button { padding: 2px 5px ; } +.select2-dropdown { color: #444 ; } .snippet-control button.generate { height: 26px ; padding: 2px 10px 2px 5px ; } .snippet-control button.generate img { height: 20px ; margin-right: 5px ; vertical-align: middle ; } diff --git a/vasl_templates/webapp/static/css/select-vo-dialog.css b/vasl_templates/webapp/static/css/select-vo-dialog.css index 43f4daf..3e08342 100644 --- a/vasl_templates/webapp/static/css/select-vo-dialog.css +++ b/vasl_templates/webapp/static/css/select-vo-dialog.css @@ -6,7 +6,7 @@ #select-vo .select2-search { padding: 0 0 5px 0 ; } #select-vo .select2-results__options { max-height: none ; } #select-vo .select2-dropdown { border: none ; } -#select-vo .select2-dropdown .vo-entry { display: flex ; } +#select-vo .select2-dropdown .vo-entry { display: flex ; color: #444 ; } #select-vo .select2-dropdown .vo-entry img { height: 3.5em ; margin-right: 0.5em ; } #select-vo .select2-dropdown .vo-entry .content { display: flex ; flex-direction: column ; justify-content: center ; } #select-vo .select2-dropdown .vo-entry.small-piece img { height: 2.7em ; margin-left: 0.4em ; margin-right: 0.9em ; } diff --git a/vasl_templates/webapp/static/css/tabs-scenario.css b/vasl_templates/webapp/static/css/tabs-scenario.css index 56d5950..fd19f96 100644 --- a/vasl_templates/webapp/static/css/tabs-scenario.css +++ b/vasl_templates/webapp/static/css/tabs-scenario.css @@ -5,7 +5,6 @@ #panel-scenario .row { display: flex ; align-items: center ; } #panel-scenario input { flex-grow: 1 ; } #panel-scenario input[name='SCENARIO_ID'] { margin-left: 0.25em ; width: 80px ; flex-grow: 0 ; } -#panel-scenario .ui-selectmenu-button.scenario_theater { margin: -3px 0 0 0.25em ; width: 70px ; flex-grow: 0 ; } #panel-scenario input[name='SCENARIO_DATE'] { width: 6em ; flex-grow: 0 ; } #panel-scenario label[for='PLAYER_1'], label[for='PLAYER_2'] { margin-top: 2px ; } @@ -14,6 +13,14 @@ #panel-scenario label.header { font-weight: bold ; width: 3em ; text-align: center ; } #panel-scenario input { margin-bottom: 0.25em ; } +#panel-scenario .select2-container { margin: 2px ; } +#panel-scenario .select2-selection__rendered { height: 24px ; margin-top: -3px ; } +#panel-scenario .select2-selection__arrow { margin-top: -2px ; } +#panel-scenario .select2-selection { height: 24px !important ; border-radius: 0 !important ; } + +#panel-scenario .select2-container[name="SCENARIO_THEATER"] .select2-selection { height: 22px !important ; margin-top: -4px ;} +#panel-scenario .select2-container[name="SCENARIO_THEATER"] .select2-selection__arrow { margin-top: -6px ; } + /* -------------------------------------------------------------------- */ #panel-vc { height: 100% ; display: flex ; flex-direction: column ; } diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js index def4f05..e192ab1 100644 --- a/vasl_templates/webapp/static/main.js +++ b/vasl_templates/webapp/static/main.js @@ -99,9 +99,7 @@ $(document).ready( function () { $("#tabs .ui-tabs-nav a").click( function() { $(this).blur() ; } ) ; // initialize the scenario theater - $( "select[name='SCENARIO_THEATER']" ).selectmenu( { - classes: { "ui-selectmenu-button": "scenario_theater" }, - } ) ; + init_select2( $("select[name='SCENARIO_THEATER']"), "5em", false, null ) ; // initialize the scenario date picker $("input[name='SCENARIO_DATE']").datepicker( { @@ -177,22 +175,33 @@ $(document).ready( function () { } ) ; $("#select-vo").dblclick( function(evt) { auto_select_vo(evt) ; } ) ; - // add player change handlers + // initialize the player droplists function on_player_droplist_open( $sel ) { // remember the current selection $sel.data( "prev-val", $sel.val() ) ; // limit the droplist's height to the available space restrict_droplist_height( $sel ) ; } - $("select[name='PLAYER_1']").selectmenu( { - width: "7.5em", - open: function(evt,ui) { on_player_droplist_open($(this)) ; }, - select: function() { on_player_change_with_confirm( 1 ) ; }, + function format_player_droplist_item( opt ) { + var url = gImagesBaseUrl + "/flags/" + opt.id + ".png" ; + return $( "
Do you want to change this player's nationality?
You will lose changes made to their OB.", { ok: function() { on_player_change( player_no ) ; }, cancel: function() { - $select.val( $select.data("prev-val") ).selectmenu( "refresh" ) ; + $select.val( $select.data("prev-val") ).trigger( "change" ) ; }, } ) ; } diff --git a/vasl_templates/webapp/static/snippets.js b/vasl_templates/webapp/static/snippets.js index eab107f..cf0b9de 100644 --- a/vasl_templates/webapp/static/snippets.js +++ b/vasl_templates/webapp/static/snippets.js @@ -702,7 +702,7 @@ function do_load_scenario_data( params ) else $elem.val( params[key] ) ; if ( $elem[0].nodeName.toLowerCase() === "select" ) - $elem.selectmenu( "refresh" ) ; + $elem.trigger( "change" ) ; params_loaded[key] = true ; return $elem ; } ; @@ -966,8 +966,8 @@ function reset_scenario() var player_no ; for ( player_no=1 ; player_no <= 2 ; ++player_no ) { on_player_change( player_no ) ; - $("select[name='PLAYER_" + player_no + "_ELR']").val( 0 ).selectmenu( "refresh" ) ; - $("select[name='PLAYER_" + player_no + "_SAN']").val( "" ).selectmenu( "refresh" ) ; + $("select[name='PLAYER_" + player_no + "_ELR']").val( 0 ).trigger( "change" ) ; + $("select[name='PLAYER_" + player_no + "_SAN']").val( "" ).trigger( "change" ) ; } // reset all the template parameters diff --git a/vasl_templates/webapp/static/utils.js b/vasl_templates/webapp/static/utils.js index 9aa6d74..3d746ea 100644 --- a/vasl_templates/webapp/static/utils.js +++ b/vasl_templates/webapp/static/utils.js @@ -252,24 +252,36 @@ function makeBulletListMsg( caption, items, li_class ) // -------------------------------------------------------------------- +function init_select2( $sel, width, search_box, format ) +{ + // initialize the select2 droplist + var name = $sel.attr( "name" ) ; + args = { width: width, height: "22px" } ; + if ( ! search_box ) + args.minimumResultsForSearch = Infinity ; // nb: this disables the search box :-/ + if ( format ) { + args.templateResult = format ; + args.templateSelection = format ; + } + $sel = $sel.select2( args ) ; + $sel.data( "select2" ).$container.attr( "name", name ) ; + + return $sel ; +} + function restrict_droplist_height( $sel ) { - // restrict the selectmenu's droplist height to the available space + // restrict the select2's droplist height to the available space // NOTE: The user can circumvent this by resizing the window after opening // the droplist, but we can live with that... :-/ // figure out how much space is available - var $droplist = $( "#" + $sel.attr("id") + "-menu" ) ; + var $droplist = $sel.data( "select2" ).$dropdown ; var avail = $(window).height() - $droplist.offset().top - 5 ; - // make sure the currently-selected item will be visible - $droplist.css( "max-height", "" ); - var $elem = $droplist.find( ".ui-menu-item-wrapper.ui-state-active" ) ; - var offset = $elem.offset().top - $droplist.offset().top - avail/3 ; - // set the max-height for the droplist - $droplist.css( "max-height", Math.floor(avail)+"px" ) ; - $droplist.animate({ scrollTop: offset }, 0 ) ; + var $results = $sel.data( "select2" ).$results ; + $results.css( "max-height", Math.floor(avail)+"px" ) ; } // -------------------------------------------------------------------- diff --git a/vasl_templates/webapp/templates/tabs-scenario.html b/vasl_templates/webapp/templates/tabs-scenario.html index 13bcac7..ab6a8f3 100644 --- a/vasl_templates/webapp/templates/tabs-scenario.html +++ b/vasl_templates/webapp/templates/tabs-scenario.html @@ -30,7 +30,7 @@