public
/
vasl-templates
1
0
Fork 0
Code Issues Pull Requests Projects Releases 29 Wiki Activity

Use flexbox for layout.

Browse Source
master
Pacman Ghost 6 years ago
parent dceace62b6
commit b87b9110dd
5 changed files with 166 additions and 251 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 71
      vasl_templates/webapp/static/css/main.css
  2. 68
      vasl_templates/webapp/static/css/tabs-ob.css
  3. 89
      vasl_templates/webapp/static/css/tabs-scenario.css
  4. 10
      vasl_templates/webapp/static/main.js
  5. 179
      vasl_templates/webapp/templates/index.html

71
vasl_templates/webapp/static/css/main.css
Unescape View File

@ -25,7 +25,6 @@ body { height: 100% ; }
#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-panel { background: #f6f6f6 ; }
fieldset { background: #ffffff ; }
/* nb: these are managed in the code but we define them here for the initial load */
#tabs .ui-tabs-tab.ui-state-active { background: #ddd ; border-color: #ccc ; }
@ -33,68 +32,42 @@ fieldset { background: #ffffff ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#tabs-scenario {
display: grid ; display: -ms-grid ;
grid-template-rows: 16em 1fr ; -ms-grid-rows: 14em 1fr ;
grid-template-columns: 28em 1fr ; -ms-grid-columns: 28em 1fr ;
}
/* FUDGE! IE hackamathon follows... */
#tabs-scenario fieldset.tl { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
#tabs-scenario fieldset.tr { -ms-grid-row: 1 ; -ms-grid-column: 2 ; }
#tabs-scenario fieldset.bl { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#tabs-scenario fieldset.br { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#tabs-scenario { display: flex ; }
#tabs-scenario .left { width: 28em ; min-width: 28em ; }
#tabs-scenario .right { flex-grow: 1 ; min-width: 23em ; }
#tabs-ob1, #tabs-ob2 {
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 1fr ; -ms-grid-rows: 1fr 1fr ;
grid-template-columns: 1fr 1fr ; -ms-grid-columns: 1fr 1fr ;
}
#tabs-scenario .left { display: flex ; flex-direction: column ; }
#tabs-scenario .tl { flex-basis: content ; }
#tabs-scenario .bl { height: 100% ; flex-grow: 1 ; }
#tabs-ob1 fieldset.tl, #tabs-ob2 fieldset.tl {
grid-row-start: 1 ; -ms-grid-row: 1 ;
grid-column-start: 1 ; -ms-grid-column: 1 ;
}
#tabs-ob1 fieldset.bl, #tabs-ob2 fieldset.bl {
grid-row-start: 2 ; -ms-grid-row: 2 ;
grid-column-start: 1 ; -ms-grid-column: 1 ;
}
#tabs-ob1 fieldset.tr, #tabs-ob2 fieldset.tr {
grid-row-start: 1 ; -ms-grid-row: 1 ;
grid-column-start: 2 ; -ms-grid-column: 2 ;
}
#tabs-ob1 fieldset.br, #tabs-ob2 fieldset.br {
grid-row-start: 2 ; -ms-grid-row: 2 ;
grid-column-start: 2 ; -ms-grid-column: 2 ;
}
#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-other {
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr ; -ms-grid-rows: 1fr ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
.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: 25em ; min-width: 25em ; }
#panel-other {
height: 100% ;
}
.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 .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 }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
fieldset { height: calc(100% - 30px) ; margin: 0 5px 5px 5px ; padding: 10px ; }
#tabs-other fieldset { border: none ; }
fieldset { margin: 0 5px 5px 5px ; padding: 10px ; background: #ffffff ; }
fieldset legend { padding: 0 0.2em 0 0.2em ; font-style: italic ; font-weight: bold ; }
.label { font-weight: bold ; }
input[type="text"] { margin-bottom: 0.25em ; }
.small { font-size: 80% ; }
.spacer { flex-grow: 1 ; }
/* -------------------------------------------------------------------- */
/* FUDGE! Fix vertical alignment between labels and their input boxes :-/ */
div.label { border: 1px dotted transparent ; }
.ui-selectmenu-button { padding: 2px 5px ; }
.snippet-control button.generate { height: 26px ; padding: 2px 10px 2px 5px ; }

68
vasl_templates/webapp/static/css/tabs-ob.css
Unescape View File

@ -1,65 +1,23 @@
/* -------------------------------------------------------------------- */
.panel-ob_setups {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
/* FUDGE! IE hackamathon follows... */
.panel-ob_setups .content { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
.panel-ob_setups .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
.panel-ob_setups .footer { text-align: right ; font-size: 75% ; }
.panel-ob_setups .footer .l { float: left ; }
.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 ; display: flex ; align-items: center ; }
/* -------------------------------------------------------------------- */
.panel-ob_notes {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
/* FUDGE! IE hackamathon follows... */
.panel-ob_notes .content { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
.panel-ob_notes .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
.panel-ob_notes .footer { font-size: 75% ; }
.panel-ob_notes .footer .l { float: left ; }
.panel-ob_notes .footer button[data-id="ob_note"] { float: right ; }
.panel-ob_notes div.snippet-control { float: right ; margin-right: 0.5em ; }
.panel-ob_notes button.edit-template { margin-left: 1em ; }
.panel-ob_notes div.snippet-control button.generate { height: 30px ; padding: 2px 5px ; }
.panel-ob_notes div.snippet-control .ui-selectmenu-button-closed { height: 30px ; }
.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 ; display: flex ; align-items: center ; }
/* -------------------------------------------------------------------- */
.panel-vehicles {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
/* FUDGE! IE hackamathon follows... */
.panel-vehicles .content { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
.panel-vehicles .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
.panel-vehicles { height: 100% ; display: flex ; flex-direction: column ; }
.panel-vehicles .content { flex-grow: 1 ; }
.panel-vehicles .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
.panel-vehicles .footer { text-align: right ; font-size: 75% ; }
.panel-vehicles .footer .l { float: left ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.panel-ordnance {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
/* FUDGE! IE hackamathon follows... */
.panel-ordnance .content { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
.panel-ordnance .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
/* -------------------------------------------------------------------- */
.panel-ordnance .footer { text-align: right ; font-size: 75% ; }
.panel-ordnance .footer .l { float: left ; }
.panel-ordnance { height: 100% ; display: flex ; flex-direction: column ; }
.panel-ordnance .content { flex-grow: 1 ; }
.panel-ordnance .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }

89
vasl_templates/webapp/static/css/tabs-scenario.css
Unescape View File

@ -1,87 +1,30 @@
/* -------------------------------------------------------------------- */
#panel-scenario {
display: grid ; display: -ms-grid ;
grid-template-columns: 5em 1fr ; -ms-grid-columns: 5em 1fr ;
}
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
#panel-scenario div[data-labelfor="SCENARIO_NAME"] { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
#panel-scenario input[name="SCENARIO_NAME"] { -ms-grid-row: 1 ; -ms-grid-column: 2 ; }
#panel-scenario div[data-labelfor="SCENARIO_LOCATION"] { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-scenario input[name="SCENARIO_LOCATION"] { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
#panel-scenario div[data-labelfor="SCENARIO_DATE"] { -ms-grid-row: 3 ; -ms-grid-column: 1 ; }
#panel-scenario div.last_row { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-scenario { display: flex ; flex-direction: column ; }
#panel-scenario .last_row .r { display: block-inline ; float: right ; font-size: 75% ; }
#panel-scenario .row { display: flex ; align-items: center ; }
#panel-scenario input { flex-grow: 1 ; }
#panel-scenario input[name='SCENARIO_DATE'] { width: 6em ; flex-grow: 0 ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#panel-players {
margin-top: 1em ;
display: grid ; display: -ms-grid ;
grid-template-columns: 5em 1fr 3em 3em ; -ms-grid-columns: 5em 1fr 3em 3em ;
}
#panel-players .footer { grid-column-start: 1 ; grid-column-end: 5 ; }
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
#panel-players div[data-labelfor="ELR"] { -ms-grid-row: 1 ; -ms-grid-column: 3 ; }
#panel-players div[data-labelfor="SAN"] { -ms-grid-row: 1 ; -ms-grid-column: 4 ; }
#panel-players div[data-labelfor="PLAYER_1"] { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-players .ui-selectmenu-button.player1 { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
#panel-players .ui-selectmenu-button.player1_elr { -ms-grid-row: 2 ; -ms-grid-column: 3 ; }
#panel-players .ui-selectmenu-button.player1_san { -ms-grid-row: 2 ; -ms-grid-column: 4 ; }
#panel-players div[data-labelfor="PLAYER_2"] { -ms-grid-row: 3 ; -ms-grid-column: 1 ; }
#panel-players .ui-selectmenu-button.player2 { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-players .ui-selectmenu-button.player2_elr { -ms-grid-row: 3 ; -ms-grid-column: 3 ; }
#panel-players .ui-selectmenu-button.player2_san { -ms-grid-row: 3 ; -ms-grid-column: 4 ; }
#panel-players .footer { -ms-grid-row: 4 ; -ms-grid-column: 1 ; -ms-grid-column-span: 4 ; }
#panel-players div[data-labelfor="ELR"] { margin-left: 0.25em ; }
#panel-players div[data-labelfor="SAN"] { margin-left: 0.25em ; }
#panel-players select[name="PLAYER_1"] { margin-right: 0.5em ; }
#panel-players select[name="PLAYER_2"] { margin-right: 0.5em ; }
#panel-players select[name="PLAYER_1_ELR"] { margin-right: 0.25em ; }
#panel-players select[name="PLAYER_2_ELR"] { margin-right: 0.25em ; }
#panel-players input[data-id="players"] { margin-top: 0.25em ; }
#panel-players .footer { margin-top: 0.25em ; font-size: 75% ; text-align: right ; }
#panel-scenario label { font-weight: bold ; width: 5em ; }
#panel-scenario label.header { font-weight: bold ; width: 3em ; text-align: center ; }
#panel-scenario input { margin-bottom: 0.25em ; }
/* -------------------------------------------------------------------- */
#panel-vc {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
}
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
#panel-vc .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-vc textarea { width: 100% ; margin-bottom: 0.5em ; resize: none ; }
#panel-vc .footer { text-align: right ; font-size: 75% ; }
#panel-vc { height: 100% ; display: flex ; flex-direction: column ; }
#panel-vc textarea { width: 100% ; resize: none ; flex-grow: 1 ; }
#panel-vc .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
/* -------------------------------------------------------------------- */
#panel-scenario_notes {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
}
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
#panel-scenario_notes .content { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
#panel-scenario_notes .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-scenario_notes .footer { text-align: right ; font-size: 75% ; }
#panel-scenario_notes .footer .l { float: left ; }
#panel-scenario_notes { height: 100% ; display: flex ; flex-direction: column ; }
#panel-scenario_notes .content { flex-grow: 1 ; }
#panel-scenario_notes .footer { margin-top: 0.5em ; display: flex ; }
/* -------------------------------------------------------------------- */
#panel-ssr {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 40px ; -ms-grid-rows: 1fr 40px ;
}
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
#panel-ssr .content { -ms-grid-row: 1 ; -ms-grid-column: 1 ; }
#panel-ssr .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-ssr { height: 100% ; display: flex ; flex-direction: column ; }
#panel-ssr .content { flex-grow: 1 ; }
#panel-ssr .footer { text-align: right ; font-size: 75% ; }
#panel-ssr .footer .l { float: left ; }
#panel-ssr .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }

10
vasl_templates/webapp/static/main.js
Unescape View File

@ -54,7 +54,7 @@ $(document).ready( function () {
if ( val && val.substring(val.length-1) === "1" )
$elem.attr( attrName, val.substring(0,val.length-1)+"2" ) ;
} ;
var fixupOB2 = function( $elem ) {
function fixupOB2( $elem ) {
adjustAttr( $elem, "id" ) ;
adjustAttr( $elem, "name" ) ;
adjustAttr( $elem, "data-id" ) ;
@ -62,9 +62,9 @@ $(document).ready( function () {
$elem.children().each( function() {
fixupOB2( $(this) ) ;
} ) ;
} ;
}
fixupOB2( $ob2 ) ;
$("#tabs-ob2").html( $ob2.html() ) ;
$("#tabs-ob2").html( $ob2.html() ).addClass( "tabs-ob" ) ;
// initialize the tabs
$("#tabs").tabs( {
@ -143,9 +143,11 @@ $(document).ready( function () {
// add player change handlers
$("select[name='PLAYER_1']").selectmenu( {
width: "7em",
select: function() { on_player_change( $(this) ) ; },
} ) ;
$("select[name='PLAYER_2']").selectmenu( {
width: "7em",
select: function() { on_player_change( $(this) ) ; },
} ) ;
@ -416,7 +418,7 @@ function on_player_change( $select )
for ( var i=0 ; i < _NATIONALITY_SPECIFIC_BUTTONS[nat].length ; ++i ) {
var button_id = _NATIONALITY_SPECIFIC_BUTTONS[nat][i] ;
var $elem = $( "#panel-ob_notes" + player_no + " div.snippet-control[data-id='" + button_id + "']" ) ;
$elem.css( "display", nat == player_nat ? "block" : "none" ) ;
$elem.css( "display", nat == player_nat ? "inline-block" : "none" ) ;
}
}

179
vasl_templates/webapp/templates/index.html
Unescape View File

@ -38,39 +38,48 @@
<div id="tabs-scenario">
<div class="left">
<fieldset class="tl"> <legend>S<u>c</u>enario</legend>
<div id="panel-scenario">
<div class="label" data-labelfor="SCENARIO_NAME">Name:</div> <input name="SCENARIO_NAME" type="text" class="param">
<div class="label" data-labelfor="SCENARIO_LOCATION">Location:</div> <input name="SCENARIO_LOCATION" type="text" class="param">
<div class="label" data-labelfor="SCENARIO_DATE">Date:</div>
<div class="last_row">
<div class='row'>
<label for="SCENARIO_NAME">Name:</label>
<input name="SCENARIO_NAME" type="text" class="param">
</div>
<div class='row'>
<label for="SCENARIO_LOCATION">Location:</label>
<input name="SCENARIO_LOCATION" type="text" class="param">
</div>
<div class='row'>
<label for="SCENARIO_DATE">Date:</label>
<input name="SCENARIO_DATE" type="text" size="10" class="param">
<div class="r">
<label for="SCENARIO_WIDTH">Width:</label>
<input type="text" class="param" name="SCENARIO_WIDTH" size="5">
<span class="spacer"></span>
<span class="small">
Width: <input type="text" class="param" name="SCENARIO_WIDTH" size="5">
<button class="generate" data-id="scenario">Snippet</button>
</div>
</span>
</div>
</div>
<div id="panel-players">
<div></div> <div></div> <div class="label" data-labelfor="ELR">ELR</div> <div class="label" data-labelfor="SAN">SAN</div>
<div class="label" data-labelfor="PLAYER_1"><u>P</u>layer 1:</div> <select name="PLAYER_1" class="param"></select>
<select name="PLAYER_1_ELR" class="param"></select>
<select name="PLAYER_1_SAN" class="param"></select>
<div class="label" data-labelfor="PLAYER_2">Player 2:</div> <select name="PLAYER_2" class="param"></select>
<select name="PLAYER_2_ELR" class="param"></select>
<select name="PLAYER_2_SAN" class="param"></select>
<div class="footer"> <button class="generate" data-id="players">Snippet</button> </div>
</div>
</fieldset>
<fieldset class="tr"> <legend>Victor<u>y</u> Conditions</legend>
<div id="panel-vc">
<textarea name="VICTORY_CONDITIONS" type="text" class="param"></textarea>
<div class="footer">
<label for="VICTORY_CONDITIONS_WIDTH">Width:</label>
<input type="text" class="param" name="VICTORY_CONDITIONS_WIDTH" size="5">
<button class="generate" data-id="victory_conditions">Snippet</button>
<div class='row'>
<label></label>
<span style='width:7em'></span>
<label class="header">ELR</label>
<label class="header">SAN</label>
</div>
<div class='row'>
<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>
<select name="PLAYER_1_SAN" class="param"></select>
</div>
<div class='row'>
<label for="PLAYER_2">Player 2:</label>
<select name="PLAYER_2" class="param"></select>
<select name="PLAYER_2_ELR" class="param"></select>
<select name="PLAYER_2_SAN" class="param"></select>
<span class="spacer"></span>
<span class="small">
<button class="generate" data-id="players">Snippet</button>
</span>
</div>
</div>
</fieldset>
@ -82,15 +91,32 @@
<ul id="scenario_notes-sortable" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="scenario_notes-add" class="sortable-add"></button>
<img id="scenario_notes-trash" class="sortable-trash">
</div>
<button id="scenario_notes-add" class="sortable-add"></button>
<img id="scenario_notes-trash" class="sortable-trash">
<span class="spacer"></span>
<button class="edit-template" data-id="scenario_note"></button>
</div>
</div>
</fieldset>
</div>
<div class="right">
<fieldset class="tr"> <legend>Victor<u>y</u> Conditions</legend>
<div id="panel-vc">
<textarea name="VICTORY_CONDITIONS" type="text" class="param"></textarea>
<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">
<button class="generate" data-id="victory_conditions">Snippet</button>
</span>
</div>
</div>
</fieldset>
<fieldset class="br"> <legend>SSR's</legend>
<div id="panel-ssr">
<div class="content">
@ -98,22 +124,27 @@
<ul id="ssr-sortable" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ssr-add" class="sortable-add"></button>
<img id="ssr-trash" class="sortable-trash">
</div>
<label for="SSR_WIDTH">Width:</label>
<input type="text" class="param" name="SSR_WIDTH" size="5">
<button class="generate" data-id="ssr">Snippet</button>
<button id="ssr-add" class="sortable-add"></button>
<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">
<button class="generate" data-id="ssr">Snippet</button>
</span>
</div>
</div>
</fieldset>
</div>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="tabs-ob1">
<div id="tabs-ob1" class="tabs-ob">
<div class="left">
<fieldset class="tl"> <legend>OB setup</legend>
<div id="panel-ob_setups1" class="panel-ob_setups">
@ -122,10 +153,9 @@
<ul id="ob_setups-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ob_setups-add_1" class="sortable-add"></button>
<img id="ob_setups-trash_1" class="sortable-trash">
</div>
<button id="ob_setups-add_1" class="sortable-add"></button>
<img id="ob_setups-trash_1" class="sortable-trash">
<span class="spacer"></span>
<button class="edit-template" data-id="ob_setup"></button>
</div>
</div>
@ -138,22 +168,27 @@
<ul id="ob_notes-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ob_notes-add_1" class="sortable-add"></button>
<img id="ob_notes-trash_1" class="sortable-trash">
</div>
<button class="edit-template" data-id="ob_note"></button>
<button class="generate" data-id="mol">MOL</button>
<button class="generate" data-id="mol-p">MOL-P</button>
<button class="generate" data-id="pf">PF</button>
<button class="generate" data-id="psk">PSK</button>
<button class="generate" data-id="atmm">ATMM</button>
<button class="generate" data-id="baz">BAZ</button>
<button class="generate" data-id="piat">PIAT</button>
<button id="ob_notes-add_1" class="sortable-add"></button>
<img id="ob_notes-trash_1" class="sortable-trash">
<span class="spacer"></span>
<span class="small">
<button class="generate" data-id="pf">PF</button>
<button class="generate" data-id="atmm">ATMM</button>
<button class="generate" data-id="psk">PSK</button>
<button class="generate" data-id="mol">MOL</button>
<button class="generate" data-id="mol-p">MOL-P</button>
<button class="generate" data-id="baz">BAZ</button>
<button class="generate" data-id="piat">PIAT</button>
<button class="edit-template" data-id="ob_note"></button>
</span>
</div>
</div>
</fieldset>
</div>
<div class="right">
<fieldset class="tr"> <legend>Vehicles</legend>
<div id="panel-vehicles_1" class="panel-vehicles">
<div class="content">
@ -161,13 +196,14 @@
<ul id="vehicles-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="vehicles-add_1" class="sortable-add"></button>
<img id="vehicles-trash_1" class="sortable-trash">
</div>
<label for="VEHICLES_WIDTH_1">Width:</label>
<input type="text" class="param" name="VEHICLES_WIDTH_1" size="5">
<button class="generate" data-id="vehicles_1">Snippet</button>
<button id="vehicles-add_1" class="sortable-add"></button>
<img id="vehicles-trash_1" class="sortable-trash">
<span class="spacer"></span>
<span class="small">
<label for="VEHICLES_WIDTH_1">Width:</label>
<input type="text" class="param" name="VEHICLES_WIDTH_1" size="5">
<button class="generate" data-id="vehicles_1">Snippet</button>
</span>
</div>
</div>
</fieldset>
@ -179,19 +215,22 @@
<ul id="ordnance-sortable_1" class="sortable" style="display:none;"></ul>
</div>
<div class="footer">
<div class="l">
<button id="ordnance-add_1" class="sortable-add"></button>
<img id="ordnance-trash_1" class="sortable-trash">
</div>
<label for="ORDNANCE_WIDTH_1">Width:</label>
<input type="text" class="param" name="ORDNANCE_WIDTH_1" size="5">
<button class="generate" data-id="ordnance_1">Snippet</button>
<button id="ordnance-add_1" class="sortable-add"></button>
<img id="ordnance-trash_1" class="sortable-trash">
<span class="spacer"></span>
<span class="small">
<label for="ORDNANCE_WIDTH_1">Width:</label>
<input type="text" class="param" name="ORDNANCE_WIDTH_1" size="5">
<button class="generate" data-id="ordnance_1">Snippet</button>
</span>
</div>
</div>
</fieldset>
</div>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="tabs-ob2"> <!-- nb: this will be created dynamically from the OB1 tab -->

Write Preview
Loading…
Cancel
Save