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

Restructured the layout.

Browse Source
master
Pacman Ghost 6 years ago
parent cab39f3769
commit 6df95e46f3
6 changed files with 184 additions and 119 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. 94
      vasl_templates/webapp/static/css/main.css
  2. 14
      vasl_templates/webapp/static/css/tabs-ob.css
  3. 83
      vasl_templates/webapp/static/css/tabs-scenario.css
  4. 10
      vasl_templates/webapp/static/main.js
  5. 10
      vasl_templates/webapp/static/utils.js
  6. 92
      vasl_templates/webapp/templates/main.html

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

@ -13,122 +13,60 @@ body { height: 100% ; }
#tabs-scenario {
display: grid ; display: -ms-grid ;
grid-template-rows: 2fr 3fr ; -ms-grid-rows: 2fr 3fr ;
grid-template-rows: 14em 1fr ; -ms-grid-rows: 14em 1fr ;
grid-template-columns: 25em 1fr ; -ms-grid-columns: 25em 1fr ;
}
#panel-scenario {
grid-row-start: 1 ; -ms-grid-row: 1 ;
grid-row-end: 3 ; -ms-grid-row-span: 2 ;
}
#panel-vc {
#tabs-scenario fieldset.tr {
-ms-grid-row: 1 ; -ms-grid-column: 2 ;
}
#panel-ssr {
height: 100% ;
#tabs-scenario fieldset.br {
grid-column-start: 2 ;
-ms-grid-row: 2 ; -ms-grid-column: 2 ;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#tabs-ob1, #tabs-ob2 {
display: grid ; display: -ms-grid ;
grid-template-rows: 10em 1fr ; -ms-grid-rows: 10em 1fr ;
grid-template-columns: 1fr 1fr ; -ms-grid-columns: 1fr 1fr ;
}
#panel-obsetup1, #panel-obsetup2 {
#tabs-ob1 fieldset.tl, #tab-ob2 fieldset.tl {
grid-row-start: 1 ; -ms-grid-row: 1 ;
grid-column-start: 1 ; -ms-grid-row: 1 ;
}
#panel-obvehicles1, #panel-obvehicles2 {
height: 100% ;
#tabs-ob1 fieldset.r, #tabs-ob2 fieldset.r {
grid-row-start: 1 ; -ms-grid-row: 1 ;
grid-row-end: 3 ; -ms-grid-row-span: 2 ;
-ms-grid-column: 2 ;
grid-column-start: 2 ; -ms-grid-column: 2 ;
}
#panel-obordnance1, #panel-obordnance2 {
height: 100% ;
#tabs-ob1 fieldset.bl, #tabs-ob2 fieldset.bl {
-ms-grid-row: 2 ; -ms-grid-column: 1 ;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#tabs-other {
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr ; -ms-grid-rows: 1fr ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
#panel-other {
height: 100% ;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
fieldset { height: calc(100% - 30px) ; margin: 0 5px 5px 5px ; padding: 10px ; }
#tabs-other fieldset { border: none ; }
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 ; }
#panel-scenario {
display: grid ; display: -ms-grid ;
grid-template-columns: 5em 1fr ; -ms-grid-columns: 5em 1fr ;
}
#panel-scenario input[type="button"] { float: right ; }
/* 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.scenario_date { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#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 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 ; }
/* 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 select[name="player_1"] { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
#panel-players select[name="player_1_elr"] { -ms-grid-row: 2 ; -ms-grid-column: 3 ; }
#panel-players select[name="player_1_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 select[name="player_2"] { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-players select[name="player_2_elr"] { -ms-grid-row: 3 ; -ms-grid-column: 3 ; }
#panel-players select[name="player_2_san"] { -ms-grid-row: 3 ; -ms-grid-column: 4 ; }
#panel-players input[data-id="players"] { -ms-grid-row: 4 ; -ms-grid-column: 4 ; }
#panel-vc textarea[name="victory_conditions"] { width: calc(100% - 2px) ; height: calc(100% - 1.5em) ; resize: none ; }
#panel-vc input[type="button"] { float: right ; }
#panel-ssr #ssr-sortable { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; }
#panel-ssr #ssr-sortable { list-style-type: none ; margin: 0 ; padding: 0 ; }
#panel-ssr #ssr-sortable li {
margin-bottom: 2px ; padding: 5px ;
border: 1px dotted #333 ; background: #eee ;
}
#panel-ssr #ssr-sortable li.highlighted { background: #48c8ff ; }
#panel-ssr #ssr-sortable li:hover { cursor: pointer ; }
#panel-ssr input#add-ssr { float: left ; }
#panel-ssr #ssr-trash { margin-left: 5px ; float: left ; height: 1.5em ; }
#panel-ssr input[data-id="ssr"] { float: right ; }
#ssr-hint { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; font-style: italic ; }
#ssr-hint p { margin-bottom: 1em ; }
#panel-obsetup1 textarea[name="ob_setup_1"] { width: calc(100% - 2px) ; height: calc(100% - 1.5em) ; resize: none ; }
#panel-obsetup1 input[type="button"] { float: right ; }
#panel-obsetup2 textarea[name="ob_setup_2"] { width: calc(100% - 2px) ; height: calc(100% - 1.5em) ; resize: none ; }
#panel-obsetup2 input[type="button"] { float: right ; }
/* -------------------------------------------------------------------- */
.ui-dialog.edit-ssr .ui-dialog-titlebar { display: none ; }

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

@ -0,0 +1,14 @@
#panel-obsetup1, #panel-obsetup2 {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 2em ; -ms-grid-rows: 1fr 2em ;
grid-template-columns: 1fr ; -ms-grid-columns: 1fr ;
}
/* FUDGE! IE hackamathon follows (nb: <label> doesn't work, we use <div> for labels instead :-/) */
#panel-obsetup1 .footer, #panel-obsetup2 .footer { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-obsetup1 textarea { width: 100% ; height: 100% ; resize: none ; }
#panel-obsetup1 input[type="button"] { float: right ; }
#panel-obsetup2 textarea { width: 100% ; height: 100% ; resize: none ; }
#panel-obsetup2 input[type="button"] { float: right ; }

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

@ -0,0 +1,83 @@
/* -------------------------------------------------------------------- */
#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.scenario_date { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-scenario input[type="button"] { float: right ; }
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#panel-players {
margin-top: 1em ;
display: grid ; display: -ms-grid ;
grid-template-columns: 5em 1fr 3em 3em ; -ms-grid-columns: 5em 1fr 3em 3em ;
}
/* 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 select[name="player_1"] { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
#panel-players select[name="player_1_elr"] { -ms-grid-row: 2 ; -ms-grid-column: 3 ; }
#panel-players select[name="player_1_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 select[name="player_2"] { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-players select[name="player_2_elr"] { -ms-grid-row: 3 ; -ms-grid-column: 3 ; }
#panel-players select[name="player_2_san"] { -ms-grid-row: 3 ; -ms-grid-column: 4 ; }
#panel-players input[data-id="players"] { -ms-grid-row: 4 ; -ms-grid-column: 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-vc {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 2em ; -ms-grid-rows: 1fr 2em ;
}
/* 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% ; height: 100% ; resize: none ; }
#panel-vc input[type="button"] { height: 1.5em ; float: right ; }
/* -------------------------------------------------------------------- */
#panel-ssr {
height: 100% ;
display: grid ; display: -ms-grid ;
grid-template-rows: 1fr 2em ; -ms-grid-rows: 1fr 2em ;
}
/* 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 #ssr-sortable { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; }
#panel-ssr #ssr-sortable { list-style-type: none ; margin: 0 ; padding: 0 ; }
#panel-ssr #ssr-sortable li {
margin-bottom: 2px ; padding: 5px ;
border: 1px dotted #333 ; background: #eee ;
}
#panel-ssr #ssr-sortable li.highlighted { background: #48c8ff ; }
#panel-ssr #ssr-sortable li:hover { cursor: pointer ; }
#panel-ssr input#add-ssr { float: left ; }
#panel-ssr #ssr-trash { margin-left: 5px ; float: left ; height: 1.5em ; }
#panel-ssr input[data-id="ssr"] { float: right ; }
#ssr-hint { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; font-style: italic ; }
#ssr-hint p { margin-bottom: 1em ; }

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

@ -67,10 +67,10 @@ $(document).ready( function () {
showErrorMsg( "Can't get the default templates:<pre>" + escapeHTML(errorMsg) + "</pre>" ) ;
} ) ;
// FUDGE! CSS grids don't seem to update their layout vertically when
// inside a jQuery tab control - we do it manually :-/
var prevHeight = [] ;
$(window).resize( function() {
// FUDGE! CSS grids don't seem to update their layout vertically when
// inside a jQuery tab control - we do it manually :-/
$(".ui-tabs-panel").each( function() {
$(this).css( "padding", "5px" ) ; // FUDGE! doesn't work when set in the CSS :-/
var id = $(this).attr( "id" ) ;
@ -81,6 +81,12 @@ $(document).ready( function () {
prevHeight[id] = h ;
}
} ) ;
// FUDGE! Some panels are rendering with the wrong width in IE :-/
if ( isIE() ) {
var set_width = function($elem) { $elem.width( $elem.parent().width() ) ; } ;
set_width( $("#panel-vc textarea") ) ;
set_width( $("#panel-ssr .content") ) ;
}
} ) ;
$(window).trigger( "resize" ) ;

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

@ -141,3 +141,13 @@ function escapeHTML( val )
// escape HTML
return new Option(val).innerHTML ;
}
function isIE()
{
// check if we're running in IE :-/
if ( navigator.userAgent.indexOf("MSIE") !== -1 )
return true ;
if ( navigator.appVersion.indexOf("Trident/") !== -1 )
return true ;
return false ;
}

92
vasl_templates/webapp/templates/main.html
Unescape View File

@ -8,6 +8,8 @@
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='jquery-ui/jquery-ui.min.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='growl/jquery.growl.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/main.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/tabs-scenario.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/tabs-ob.css')}}" />
</head>
<body>
@ -21,7 +23,7 @@
</ul>
<div id="tabs-scenario">
<fieldset> <legend>Scenario</legend>
<fieldset class="tl"> <legend>Scenario</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">
@ -38,53 +40,65 @@
<div></div> <div></div> <div></div> <input type="button" class="generate" data-id="players" value="Go">
</div>
</fieldset>
<div id="panel-vc">
<fieldset> <legend>Victory Conditions</legend>
<fieldset class="tr"> <legend>Victory Conditions</legend>
<div id="panel-vc">
<textarea name="victory_conditions" type="text" class="param"></textarea>
<input type="button" class="generate" data-id="victory_conditions" value="Go">
</fieldset>
</div>
<div id="panel-ssr">
<fieldset> <legend>SSR's</legend>
<div id="ssr-hint"> <p>Click on the "+" below to add a new SSR, double-click on an SSR to edit it. <p>To re-order the SSR's, use the mouse to drag them around. <p>Ctrl-click on an SSR to delete it, or drag it into the trashcan below. </div>
<ul id="ssr-sortable" style="display:none;"></ul>
<input type="button" id="add-ssr" value="+"> <img id="ssr-trash" src="{{url_for('static',filename='images/trash.png')}}"> <input type="button" class="generate" data-id="ssr" value="Go">
</fieldset>
</div>
<div class="footer">
<input type="button" class="generate" data-id="victory_conditions" value="Go">
</div>
</div>
</fieldset>
<fieldset class="br"> <legend>SSR's</legend>
<div id="panel-ssr">
<div class="content">
<div id="ssr-hint"> <p>Click on the "+" below to add a new SSR, double-click on an SSR to edit it. <p>To re-order the SSR's, use the mouse to drag them around. <p>Ctrl-click on an SSR to delete it, or drag it into the trashcan below. </div>
<ul id="ssr-sortable" style="display:none;"></ul>
</div>
<div class="footer">
<input type="button" id="add-ssr" value="+">
<img id="ssr-trash" src="{{url_for('static',filename='images/trash.png')}}">
<input type="button" class="generate" data-id="ssr" value="Go">
</div>
</div>
</fieldset>
</div>
<div id="tabs-ob1">
<div id="panel-obsetup1">
<fieldset> <legend>OB setup</legend>
<fieldset class="tl"> <legend>OB setup</legend>
<div id="panel-obsetup1">
<textarea name="ob_setup_1" type="text" class="param"></textarea>
<input type="button" class="generate" data-id="ob_setup_1" value="Go">
</fieldset>
</div>
<div id="panel-obvehicles1">
<fieldset> <legend>Vehicles</legend>
</fieldset>
</div>
<div id="panel-obordnance1">
<fieldset> <legend>Ordnance</legend>
</fieldset>
</div>
<div class="footer">
<input type="button" class="generate" data-id="ob_setup_1" value="Go">
</div>
</div>
</fieldset>
<fieldset class="r"> <legend>Vehicles</legend>
<div id="panel-obvehicles1">
</div>
</fieldset>
<fieldset class="bl"> <legend>Ordnance</legend>
<div id="panel-obordnance1">
</div>
</fieldset>
</div>
<div id="tabs-ob2">
<div id="panel-obsetup2">
<fieldset> <legend>OB setup</legend>
<fieldset class="tl"> <legend>OB setup</legend>
<div id="panel-obsetup2">
<textarea name="ob_setup_2" type="text" class="param"></textarea>
<input type="button" class="generate" data-id="ob_setup_2" value="Go">
</fieldset>
</div>
<div id="panel-obvehicles2">
<fieldset> <legend>Vehicles</legend>
</fieldset>
</div>
<div id="panel-obordnance2">
<fieldset> <legend>Ordnance</legend>
</fieldset>
</div>
<div class="footer">
<input type="button" class="generate" data-id="ob_setup_2" value="Go">
</div>
</div>
</fieldset>
<fieldset class="r"> <legend>Vehicles</legend>
<div id="panel-obvehicles2">
</div>
</fieldset>
<fieldset class="bl"> <legend>Ordnance</legend>
<div id="panel-obordnance2">
</div>
</fieldset>
</div>
<div id="tabs-other">

Write Preview
Loading…
Cancel
Save