Added splitters to make some UI elements resizable.

master
Pacman Ghost 2 years ago
parent a556d22117
commit 13a1b511e6
  1. 2
      vasl_templates/main_window.py
  2. 4
      vasl_templates/webapp/static/css/edit-vo-dialog.css
  3. 2
      vasl_templates/webapp/static/css/lfa.css
  4. 8
      vasl_templates/webapp/static/css/main.css
  5. 4
      vasl_templates/webapp/static/css/scenario-search-dialog.css
  6. 2
      vasl_templates/webapp/static/css/sortable.css
  7. 5
      vasl_templates/webapp/static/css/tabs-extras.css
  8. 4
      vasl_templates/webapp/static/css/tabs-ob.css
  9. 1
      vasl_templates/webapp/static/css/tabs-scenario.css
  10. 18
      vasl_templates/webapp/static/css/tabs.css
  11. 13
      vasl_templates/webapp/static/extras.js
  12. BIN
      vasl_templates/webapp/static/images/gripper-horz.png
  13. BIN
      vasl_templates/webapp/static/images/gripper-vert.png
  14. BIN
      vasl_templates/webapp/static/images/hsplitter-gripper.png
  15. BIN
      vasl_templates/webapp/static/images/vsplitter-gripper.png
  16. 7
      vasl_templates/webapp/static/lfa.js
  17. 101
      vasl_templates/webapp/static/main.js
  18. 7
      vasl_templates/webapp/static/scenarios.js
  19. 2
      vasl_templates/webapp/static/snippets.js
  20. 4
      vasl_templates/webapp/static/sortable.js
  21. 21
      vasl_templates/webapp/static/utils.js
  22. 7
      vasl_templates/webapp/static/vo2.js
  23. 24
      vasl_templates/webapp/templates/tabs-ob1.html
  24. 17
      vasl_templates/webapp/templates/tabs-scenario.html

@ -94,7 +94,7 @@ class MainWindow( QWidget ):
self.restoreGeometry( val )
else :
self.resize( 1000, 650 )
self.setMinimumSize( 980, 630 )
self.setMinimumSize( 1015, 630 )
# initialize the layout
layout = QVBoxLayout( self )

@ -24,7 +24,3 @@
.ui-dialog.edit-vo .fieldset .footer { margin-top: 0.25em ; display: flex ; align-items: center ; }
.ui-dialog.edit-vo .fieldset .footer img.trash { margin: 3px 5px ; height: 24px ; }
/* splitter */
#edit-vo .gutter { position: relative ; margin: 12px 8em -12px 8em ; min-height: 3px ; background-color: #eee ; cursor: row-resize ; }
#edit-vo .gutter img { position: absolute ; left: 40% ; top: -2px ; }

@ -23,8 +23,6 @@
#lfa .split.top-pane { display: flex ; min-height: 350px ; }
#lfa .split.top-pane .right { position: relative ; }
#lfa .split.bottom-pane { min-height: 200px ; position: relative ; }
#lfa .gutter { position: relative ; min-height: 3px ; background-color: #f0f0f0 ; cursor: row-resize ; z-index: 49 ; }
#lfa .gutter img { position: absolute ; left: 40% ; top: -2px ; }
/* top pane: dr/DR distribution & pie charts */
#lfa .distrib { position: relative ; }

@ -37,7 +37,7 @@ label { height: 1.25em ; }
.snippet-control .ui-selectmenu-button-closed { height: 26px ; }
.snippet-control .ui-selectmenu-icon.ui-icon { margin-top: -8px ; }
button.edit-template { height: 28px ; padding: 4px 10px ; }
button.edit-template { height: 28px ; padding: 4px 10px ; margin-right: 0 ; }
button.edit-template img { height: 18px ; vertical-align: middle ; margin: -2px 0.4em 0 0 ; }
input.snippet-width { width: 3.75em ; }
@ -63,6 +63,12 @@ input.snippet-width { width: 3.75em ; }
.growl .pre { font-family: monospace ; }
.growl div.pre { margin: 0 0 1em 1em ; font-size: 80% ; }
.gutter { position: relative ; background-color: #ddd ; }
.gutter-vertical { cursor: row-resize ; }
.gutter-horizontal { cursor: col-resize ; }
img.vsplitter-gripper { position: absolute ; left: calc(50% - 15px) ; }
img.hsplitter-gripper { position: absolute ; top: calc(50% - 15px) ; }
/* -------------------------------------------------------------------- */
.small { font-size: 80% ; }

@ -6,10 +6,6 @@
#scenario-search .right { min-width: 400px ; flex: 1 ; display: flex ; flex-direction: column ; padding-left: 5px ; }
#scenario-search .scenario-card { flex: 1 ; overflow-y: hidden ; }
/* splitter */
#scenario-search .gutter { position: relative ; margin: 0 0.5em ; background-color: #ccc ; cursor: col-resize ; }
#scenario-search .gutter img { position: absolute ; top: 45% ; left: -2px ; }
/* search control */
#scenario-search .select2-container { top: 1em !important ; left: 1em !important ; }
#scenario-search .select2-selection { display: none ; }

@ -17,4 +17,4 @@ img.sortable-reset { height: 16px ; margin: -2px 0.4em 0 -2px ; }
.sortable-hint .instructions { margin: 1em 0 0 1em ; font-size: 80% ; font-style: italic ; color: #888 ; }
.sortable-hint .instructions li { margin: 0.5em 0 0 0.25em ; }
.sortable-trash { height: 22px ; margin-left: 6px ; }
.sortable-trash { height: 22px ; margin-left: 6px ; margin-right: 6px ; }

@ -1,7 +1,7 @@
/* -------------------------------------------------------------------- */
#tabs-extras { height: 100% ; display: flex ; flex-direction: row ; overflow: hidden ; }
#tabs-extras .left-panel { flex: 0 0 auto ; overflow: hidden auto ; min-width: 13em ; border-right: 2px dotted #aaa; margin-right: 5px ; padding-right: 5px ; }
#tabs-extras .left-panel { flex: 0 0 auto ; overflow: hidden auto ; min-width: 13em ; max-width: 40% ; }
#tabs-extras .right-panel { flex: 1 1 auto ; width: 100%; bottom: 0 ; }
#tabs-extras .left-panel ul { list-style-type: none ; margin: 0 ; }
@ -17,6 +17,9 @@
#tabs-extras .right-panel div.caption { font-style: italic ; }
#tabs-extras .right-panel div.description { margin-top: 0.5em ; }
#tabs-extras .right-panel button.generate { height: 30px ; }
#tabs-extras .right-panel .snippet-control .ui-selectmenu-button { height: 30px ; }
#tabs-extras .right-panel table { margin-top: 1em ; }
#tabs-extras .right-panel td.caption { font-weight: bold ; padding-right: 0.25em ; }
#tabs-extras .right-panel .snippet-control { margin-top: 0.5em ; }

@ -2,13 +2,13 @@
.panel-ob_setups { height: 100% ; display: flex ; flex-direction: column ; }
.panel-ob_setups .content { flex-grow: 1 ; }
.panel-ob_setups .footer { margin-top: 0.5em ; padding-bottom: 1px ; display: flex ; align-items: center ; }
.panel-ob_setups .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
/* -------------------------------------------------------------------- */
.panel-ob_notes { height: 100% ; display: flex ; flex-direction: column ; }
.panel-ob_notes .content { flex-grow: 1 ; }
.panel-ob_notes .footer { margin-top: 0.5em ; padding-bottom: 1px ; display: flex ; align-items: center ; }
.panel-ob_notes .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
/* -------------------------------------------------------------------- */

@ -1,6 +1,7 @@
/* -------------------------------------------------------------------- */
#panel-scenario { display: flex ; flex-direction: column ; }
fieldset[name='scenario'] { min-height: 91px ; max-height: 265px ; overflow: hidden ; }
#panel-scenario .row { display: flex ; align-items: center ; margin-bottom: 2px ; }
#panel-scenario input { flex-grow: 1 ; }

@ -21,29 +21,29 @@
#tabs-scenario { display: flex ; }
#tabs-scenario .left { width: 29.25em ; min-width: 29.25em ; }
#tabs-scenario .right { flex-grow: 1 ; min-width: 25em ; }
#tabs-scenario .right { flex-grow: 1 ; min-width: 26em ; }
#tabs-scenario .left { display: flex ; flex-direction: column ; }
#tabs-scenario .tl { flex-basis: content ; }
#tabs-scenario .bl { height: 100% ; flex-grow: 1 ; }
#tabs-scenario .right { display: flex ; flex-direction: column ; }
#tabs-scenario .tr { height: 100% ; flex-grow: 1 ; }
#tabs-scenario .br { height: 100% ; flex-grow: 1 ; }
#tabs-scenario .br { height: 100% ; flex-grow: 1 ; min-height: 9em ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.ui-tabs-panel.tabs-ob { display: flex ; }
.ui-tabs-panel.tabs-ob .left { flex-grow: 1 ; min-width: 32em ; }
.ui-tabs-panel.tabs-ob .right { width: 28em ; min-width: 26em ; }
.ui-tabs-panel.tabs-ob .left { flex-grow: 1 ; min-width: 20em ; }
.ui-tabs-panel.tabs-ob .right { width: 28em ; min-width: 20em ; }
.ui-tabs-panel.tabs-ob .left { display: flex ; flex-direction: column ; }
.ui-tabs-panel.tabs-ob .tl { height: 100% ; flex-grow: 1 }
.ui-tabs-panel.tabs-ob .bl { height: 100% ; flex-grow: 1 }
.ui-tabs-panel.tabs-ob .tl { height: 100% ; flex-grow: 1 ; min-height: 9em ; }
.ui-tabs-panel.tabs-ob .bl { height: 100% ; flex-grow: 1 ; min-height: 9em ; }
.ui-tabs-panel.tabs-ob .right { display: flex ; flex-direction: column ; }
.ui-tabs-panel.tabs-ob .tr { height: 100% ; flex-grow: 1 }
.ui-tabs-panel.tabs-ob .br { height: 100% ; flex-grow: 1 }
/* NOTE: min-height for the vehicle/ordnance panels are set dynamically. */
.ui-tabs-panel.tabs-ob .tr { height: 100% ; flex-grow: 1 ; }
.ui-tabs-panel.tabs-ob .br { height: 100% ; flex-grow: 1 ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@ -4,12 +4,13 @@
function init_extras()
{
// initialize the layout
$( "#tabs-extras .left-panel" ).resizable( {
resizeHeight: false,
handles: "e",
create: function( event, ui ) {
$( ".ui-resizable-e" ).css( "cursor", "ew-resize" ) ;
},
Split( [ "#tabs-extras .left-panel", "#tabs-extras .right-panel" ], {
direction: "horizontal",
sizes: [ 1, 99 ],
gutterSize: 8,
} ) ;
addSplitterGripper( $( "#tabs-extras .left-panel + .gutter" ), true, 8, {
margin: "5px 2px", "background-color": "inherit"
} ) ;
// identify the extras templates

Binary file not shown.

Before

Width:  |  Height:  |  Size: 139 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 355 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 355 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 B

@ -147,11 +147,12 @@ window.show_lfa_dialog = function( resp )
direction: "vertical",
sizes: [ 60, 40 ],
minSize: [ 350, 200 ], /* nb: this needs to be set in the CSS as well */
gutterSize: 3,
gutterSize: 1,
onDrag: updateLayout,
} ) ;
var $gripper = $( "<img src='" + gImagesBaseUrl + "/gripper-horz.png'>" ) ;
$( "#lfa .gutter.gutter-vertical" ).append( $gripper ) ;
addSplitterGripper( $("#lfa .gutter"), false, 1, {
"margin-bottom": 3, "z-index": 49,
} ) ;
// initialize other controls
$(this).find( "select[name='roll-type']" ).selectmenu( {
width: 70,

@ -10,6 +10,7 @@ gOnlineCounterImages = {} ;
gAslRulebook2VoNoteTargets = {} ;
gWebChannelHandler = null ;
gPlayerOBSplitters = {} ;
gEmSize = null ;
var NATIONALITY_SPECIFIC_BUTTONS = {
@ -249,6 +250,9 @@ $(document).ready( function () {
$sel.data( "select2" ).$results.css( "max-height", "15em" ) ;
}
// initialize the splitters
initSplitters() ;
// get the application config
$.getJSON( gAppConfigUrl, function(data) {
gAppConfig = data ;
@ -422,7 +426,7 @@ $(document).ready( function () {
// handle requests to edit the templates
$("button.edit-template").click( function() {
edit_template( $(this).data( "id" ) ) ;
} ).html( "<div><img src='" + gImagesBaseUrl + "/edit-template.png'>Edit</div>" )
} ).html( "<div style='white-space:nowrap;'><img src='" + gImagesBaseUrl + "/edit-template.png'>Edit</div>" )
.attr( "title", EDIT_TEMPLATE_HINT )
.button( {} ) ;
@ -548,6 +552,83 @@ function init_player_droplists()
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function initSplitters()
{
// add splitters to the SCENARIO tab
Split( [ "#tabs-scenario .left", "#tabs-scenario .right" ], {
direction: "horizontal",
sizes: [ 1, 99 ],
gutterSize: 8,
} ) ;
addSplitterGripper( $( "#tabs-scenario .left + .gutter" ), true, 8, {
margin: "5px -2px", "background-color": "inherit"
} ) ;
Split( [ "#tabs-scenario .left .tl", "#tabs-scenario .left .bl" ], {
direction: "vertical",
sizes: [ 99, 1 ],
gutterSize: 8,
} ) ;
addSplitterGripper( $( "#tabs-scenario .left .gutter" ), false, 8, {
margin: "-2px 5px -6px 5px", "background-color": "inherit",
} ) ;
Split( [ "#tabs-scenario .right .tr", "#tabs-scenario .right .br" ], {
direction: "vertical",
sizes: [ 50, 50 ],
gutterSize: 8,
} ) ;
addSplitterGripper( $( "#tabs-scenario .right .gutter" ), false, 8, {
margin: "-2px 5px -6px 5px", "background-color": "inherit",
} ) ;
// add splitters to the OB tabs
// NOTE: The split sizes will be set later by on_player_change().
function initOBSplitter( col ) {
var $col = $( "#tabs-ob" + playerNo + " ." + col ) ;
gPlayerOBSplitters[ playerNo ].push(
Split( [ $col.find( ".t"+col[0] )[0], $col.find( ".b"+col[0] )[0] ], {
direction: "vertical",
gutterSize: 8,
} )
) ;
addSplitterGripper( $col.find(".gutter"), false, 8, {
margin: "-2px 5px -6px 5px", "background-color": "inherit",
} ) ;
}
for ( var playerNo=1 ; playerNo <= 2 ; ++playerNo ) {
gPlayerOBSplitters[ playerNo ] = [] ;
gPlayerOBSplitters[ playerNo ].push(
Split( [ "#tabs-ob"+playerNo+" .left", "#tabs-ob"+playerNo+" .right" ], {
direction: "horizontal",
gutterSize: 8,
} )
) ;
addSplitterGripper( $( "#tabs-ob"+playerNo+" .left + .gutter" ), true, 8, {
margin: "5px -2px", "background-color": "inherit",
} ) ;
[ "left", "right" ].forEach( initOBSplitter ) ;
}
}
function updatePlayerOBSplitters( playerNo )
{
// FUDGE! We want to set the minimum width of the left column in the OB tab based on how many
// extra template buttons the nationality has in the NOTES panel, but their widths will be 0
// if another tab is active.
// Instead, we count how many buttons there are, and estimate what the min-width should be,
// based on the number of buttons and their captions.
var nButtons=0, nChars=0 ;
$( "#panel-ob_notes_" + playerNo + " .footer .snippet-control" ).each( function() {
if ( $(this).css( "display" ) === "none" )
return ;
nButtons += 1 ;
nChars += $(this).find( "button.generate" ).text().length ;
} ) ;
var minWidth = Math.max( 270 + 60*nButtons + gEmSize*nChars*0.5, 320 ) ;
$( "#tabs-ob" + playerNo + " .left" ).css( "min-width", minWidth ) ;
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function init_snippet_button( $btn )
{
// figure out what template we're dealing with
@ -594,7 +675,7 @@ function init_snippet_button( $btn )
return false ;
} )
.attr( "title", GENERATE_SNIPPET_HINT )
.css( { "padding-right": $btn.text() !== "" ? "5px" : "0" } ) ;
.css( { "padding-right": $btn.text() !== "" ? "10px" : "0" } ) ;
// add in the droplist
$newBtn.controlgroup() ;
@ -874,9 +955,10 @@ function on_player_change( player_no )
var $fieldset = $( "#tabs-ob" + player_no + " fieldset[name='ob_" + vo_type + "_" + player_no ) ;
$fieldset.find( ".snippets-notes" ).css( "display", show?"block":"none" ) ;
$fieldset.find( "label[for='ob']" ).css( "display", show?"inline-block":"none" ) ;
return show ;
}
update_ma_notes_controls( "vehicles" ) ;
update_ma_notes_controls( "ordnance" ) ;
var hasVehicles = update_ma_notes_controls( "vehicles" ) ;
var hasOrdnance = update_ma_notes_controls( "ordnance" ) ;
// TO DO: We should also show a button that lets the ob_vehicle/ordnance_note template to be edited.
// reset the OB params
@ -892,14 +974,23 @@ function on_player_change( player_no )
function update_add_vo_button( vo_type ) {
var $panel = $( "#panel-ob_" + vo_type + "_" + player_no ) ;
if ( gVehicleOrdnanceListings[ vo_type ] !== undefined && gVehicleOrdnanceListings[vo_type][ player_nat ] !== undefined ) {
var hasMaNotes = (vo_type === "vehicles" && hasVehicles) || (vo_type === "ordnance" && hasOrdnance) ;
$panel.parent().css( "min-height", hasMaNotes ? "10.7em" : "9em" ) ;
$panel.find( ".footer" ).show() ;
} else {
$panel.parent().css( "min-height", "2.5em" ) ;
$panel.find( ".footer" ).hide() ;
$panel.find( ".sortable-hint" ).html( "There are no " + vo_type + " available." ) ;
}
}
update_add_vo_button( "vehicles" ) ;
update_add_vo_button( "ordnance" ) ;
// reset the player's splitters
updatePlayerOBSplitters( player_no ) ;
gPlayerOBSplitters[ player_no ].forEach( function( splitter ) {
splitter.setSizes( [ 50, 50 ] ) ;
} ) ;
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@ -1021,6 +1112,8 @@ function adjust_footer_vspacers()
var footer_bottom = $footer.position().top + $footer.height() ;
var delta = footer_bottom - fieldset_bottom ;
delta -= 4 ;
if ( gWebChannelHandler && $(this).attr("name").indexOf( "ob_" ) === 0 )
delta += 28 ;
// add a vertical spacer after the footer (to push it up a bit)
$footer.after( "<div class='vspacer' style='height:" + Math.ceil(Math.max(0,delta)) + "px'></div>" ) ;
} ) ;

@ -114,11 +114,12 @@ function initDialog( $dlg, scenarios )
Split( [ $dlg.find( ".left" )[0], $dlg.find( ".right" )[0] ], {
sizes: [ 30, 70 ],
direction: "horizontal",
gutterSize: 3,
gutterSize: 1,
onDrag: updateLayout,
} ) ;
var $gripper = $( "<img src='" + gImagesBaseUrl + "/gripper-vert.png'>" ) ;
$dlg.find( ".gutter.gutter-horizontal" ).append( $gripper ) ;
addSplitterGripper( $dlg.find(".gutter"), true, 1, {
margin: "0 5px",
} ) ;
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@ -2451,5 +2451,7 @@ function on_scenario_theater_change()
// show/hide the nationality-specific buttons
update_nationality_specific_buttons( 1 ) ;
updatePlayerOBSplitters( 1 ) ;
update_nationality_specific_buttons( 2 ) ;
updatePlayerOBSplitters( 2 ) ;
}

@ -77,7 +77,7 @@ $.fn.sortable2 = function( action, args )
$sortable2.data( "no_confirm_delete", args.no_confirm_delete ) ;
$sortable2.data( "on_edit", args.edit ) ;
var $add_btn = find_helper( $sortable2, "add" ) ;
$add_btn.prepend( $( "<div style='display:flex;align-items:center;whitespace:nowrap;'>" +
$add_btn.prepend( $( "<div style='display:flex;align-items:center;white-space:nowrap;'>" +
"<img src='" + gImagesBaseUrl + "/sortable-add.png' class='sortable-add'>" +
"Add" +
"</div>"
@ -88,7 +88,7 @@ $.fn.sortable2 = function( action, args )
if ( args.reset ) {
$sortable2.data( "on_reset", args.reset ) ;
var $reset_btn = find_helper( $sortable2, "reset" ) ;
$reset_btn.prepend( $( "<div style=display:flex;align-items:center;'whitespace:nowrap;'><img src='" + gImagesBaseUrl + "/sortable-reset.png' class='sortable-reset'> Reset</div>" ) )
$reset_btn.prepend( $( "<div style=display:flex;align-items:center;'white-space:nowrap;'><img src='" + gImagesBaseUrl + "/sortable-reset.png' class='sortable-reset'> Reset</div>" ) )
.button( {} ) ;
var $reset = find_helper( $sortable2, "reset" ) ;
$reset.prop( "title", "Reset the " + display_name[1] )

@ -440,6 +440,27 @@ function add_flag_to_dialog_titlebar( $dlg, player_no )
).css( { display: "flex", "align-items": "center" } ) ;
}
function addSplitterGripper( $gutter, horz, gutterSize, gutterStyle )
{
// add a gripper image to a splitter
var key = (horz ? "h" : "v") + "splitter-gripper" ;
var $gripper = $(
"<img src='" + gImagesBaseUrl+"/"+key+".png" + "' class='"+key+"'>"
) ;
$gutter.append( $gripper ) ;
if ( horz ) {
$gutter.css( "min-width", gutterSize ) ;
var gripperLeft = - Math.floor( (8 - gutterSize) / 2 ) ;
$gripper.css( "left", gripperLeft ) ;
} else {
$gutter.css( { "min-height": gutterSize } ) ;
var gripperTop = - Math.floor( (8 - gutterSize) / 2 ) ;
$gripper.css( { "top": gripperTop } ) ;
}
if ( gutterStyle )
$gutter.css( gutterStyle ) ;
}
function makeSnippetHotHover( $sel )
{
$sel.hover(

@ -183,10 +183,11 @@ function _do_edit_ob_vo( $entry, player_no, vo_type )
if ( gEditVoDialogSplitter === null ) {
gEditVoDialogSplitter = Split( [ "#edit-vo .capabilities", "#edit-vo .comments" ], {
"direction": "vertical",
gutterSize: 3
gutterSize: 1
} ) ;
addSplitterGripper( $("#edit-vo .gutter"), false, 1, {
margin: "13px 8em -13px 8em"
} ) ;
var $gripper = $( "<img src='" + gImagesBaseUrl + "/gripper-horz.png'>" ) ;
$( "#edit-vo .gutter.gutter-vertical" ).append( $gripper ) ;
// FUDGE! Work-around a weird layout problem with the splitter, where things don't work
// until the dialog is resized, and then it's OK thereafter :-/ The height will be corrected
// when the UI updates and the layout is re-calculated.

@ -67,15 +67,11 @@
</div>
<span class="spacer"></span>
<span class="small">
<div class="snippets-ob">
<label for="ob" class="header">OB:</label>
<input type="text" class="param snippet-width" name="OB_VEHICLES_WIDTH_1" size="5">
<button class="generate" data-id="ob_vehicles_1"></button>
<div class="snippets-ob" style="display:flex;align-items:center;">
<label for="ob" class="header">OB: </label><input type="text" class="param snippet-width" name="OB_VEHICLES_WIDTH_1" size="5" style="margin:0 0.25em;"><button class="generate" data-id="ob_vehicles_1"></button>
</div>
<div class="snippets-notes">
<label class="header">Notes:</label>
<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 class="snippets-notes" style="display:flex;align-items:center;">
<label class="header">Notes: </label><input type="text" class="param snippet-width" name="OB_VEHICLES_MA_NOTES_WIDTH_1" size="5" style="margin:0 0.25em;"><button class="generate" data-id="ob_vehicles_ma_notes_1"></button>
</div>
</span>
</div>
@ -95,15 +91,11 @@
</div>
<span class="spacer"></span>
<span class="small">
<div class="snippets-ob">
<label for="ob" class="header">OB:</label>
<input type="text" class="param snippet-width" name="OB_ORDNANCE_WIDTH_1" size="5">
<button class="generate" data-id="ob_ordnance_1"></button>
<div class="snippets-ob" style="display:flex;align-items:center;">
<label for="ob" class="header">OB: </label><input type="text" class="param snippet-width" name="OB_ORDNANCE_WIDTH_1" size="5" style="margin:0 0.25em;"><button class="generate" data-id="ob_ordnance_1"></button>
</div>
<div class="snippets-notes">
<label class="header">Notes:</label>
<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 class="snippets-notes" style="display:flex;align-items:center;">
<label class="header">Notes: </label><input type="text" class="param snippet-width" name="OB_ORDNANCE_MA_NOTES_WIDTH_1" size="5" style="margin:0 0.25em;"><button class="generate" data-id="ob_ordnance_ma_notes_1"></button>
</div>
</span>
</div>

@ -42,14 +42,15 @@
R<sub>2</sub>: <input type="text" name="TURN_TRACK_REINFORCEMENTS_2" class="param" size=7">
<input type="checkbox" name="TURN_TRACK_SWAP_PLAYERS" class="param"> Swap </input>
</div>
<div class="row" style="margin-top:-1.1em;">
<div class="row" style="margin-top:-1.1em;max-width:32em;">
<label></label>
<span style='width:12.8em;'></span>
<span style='flex-grow:1;'></span>
<label class="header" for="ELR">ELR</label>
<span style='width:0.1em'></span>
<label class="header" for="SAN">SAN</label>
<span style='width:58px;'></span>
</div>
<div class="row">
<div class="row" style='max-width:32em;'>
<label for="PLAYER_1"><u>P</u>layer 1:</label>
<select name="PLAYER_1" class="param"></select>
<select name="PLAYER_1_ELR" class="param"></select>
@ -60,7 +61,7 @@
<label for="PLAYER_1_DESCRIPTION"></label>
<input name="PLAYER_1_DESCRIPTION" type="text" class="param" title="Description of the player's OB">
</div>
<div class="row">
<div class="row" style='max-width:32em;'>
<label for="PLAYER_2">Player 2:</label>
<select name="PLAYER_2" class="param"></select>
<select name="PLAYER_2_ELR" class="param"></select>
@ -107,8 +108,8 @@
<textarea name="VICTORY_CONDITIONS" type="text" class="param"></textarea>
<div class="footer">
<span class="spacer"></span>
<span class="small">
<input type="text" class="param snippet-width" name="VICTORY_CONDITIONS_WIDTH">
<span class="small" style="display:flex;align-items:center;">
<input type="text" class="param snippet-width" name="VICTORY_CONDITIONS_WIDTH" style="margin:0 0.25em;">
<button class="generate" data-id="victory_conditions"></button>
</span>
</div>
@ -125,8 +126,8 @@
<button id="ssr-add" class="sortable-add"></button>
<img id="ssr-trash" class="sortable-trash">
<span class="spacer"></span>
<span class="small">
<input type="text" class="param snippet-width" name="SSR_WIDTH">
<span class="small" style="margin-bottom:-1px;display:flex;align-items:center;">
<input type="text" class="param snippet-width" name="SSR_WIDTH" style="margin:0 0.25em;">
<button class="generate" data-id="ssr"></button>
</span>
</div>

Loading…
Cancel
Save