Allow custom list bullets to be used everywhere (optionally).

Also factored out common CSS into its own include file.
5 years ago · 5e0019c753
parent 55e45af6f3
commit 5e0019c753
25 changed files with 75 additions and 53 deletions
--- a/vasl_templates/webapp/data/default-template-pack/atmm.j2
+++ b/vasl_templates/webapp/data/default-template-pack/atmm.j2
@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
+{{CSS:common}}
 </style>
 </head>

@ -23,7 +23,7 @@ td { margin: 0 ; padding: 0 ; }
    ATMM check: dr &le; 3 (&#9651;) <br>
    <table style="margin-left:10px;">
        <tr>
-            <td style="width:20px;"> +1 <td> HS/crew
+            <td style="width:25px;"> +1 <td> HS/crew
        <tr>
            <td> +2 <td> SMC
        <tr>
--- a/vasl_templates/webapp/data/default-template-pack/baz.j2
+++ b/vasl_templates/webapp/data/default-template-pack/baz.j2
@ -3,9 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-td.c { text-align: center ; }
-td.r { text-align: right ; }
+{{CSS:common}}
 </style>
 </head>

--- a/vasl_templates/webapp/data/default-template-pack/common.css
+++ b/vasl_templates/webapp/data/default-template-pack/common.css
@ -0,0 +1,13 @@
+p { margin-top: 5px ; margin-bottom: 0 ; }
+
+ul { margin: 0 ; padding: 0 0 0 10px ; }
+{% if CUSTOM_LIST_BULLETS %}
+ul { list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
+{%endif%}
+
+td { margin: 0 ; padding: 0 ; }
+td.c { text-align: center ; }
+td.l { text-align: left ; }
+td.r { text-align: right ; }
+
+sup { font-size: 75% ; }
--- a/vasl_templates/webapp/data/default-template-pack/mol-p.j2
+++ b/vasl_templates/webapp/data/default-template-pack/mol-p.j2
@ -3,10 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-td.c { text-align: center ; }
-td.r { text-align: right ; }
-ul { margin: 0 ; padding-left: 10px ; list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
+{{CSS:common}}
 </style>
 </head>

--- a/vasl_templates/webapp/data/default-template-pack/mol.j2
+++ b/vasl_templates/webapp/data/default-template-pack/mol.j2
@ -3,8 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-ul { margin: 0 ; padding-left: 10px ; list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
+{{CSS:common}}
 </style>
 </head>

@ -22,9 +21,9 @@ ul { margin: 0 ; padding-left: 10px ; list-style-image: url("{{IMAGES_BASE_URL}}
 <tr>
 <td style="padding:0 5px;">
    MOL check: dr &le; 3 (&#9651;) <br>
-    <table style="margin-left:10px;">
+    <table style="margin:0 0 5px 10px;">
        <tr>
-            <td style="width:20px;"> +1 <td> HS/crew
+            <td style="width:25px;"> +1 <td> HS/crew
        <tr>
            <td> +2 <td> SMC
        <tr>
@ -33,7 +32,7 @@ ul { margin: 0 ; padding-left: 10px ; list-style-image: url("{{IMAGES_BASE_URL}}
            <td> +1 <td> non-AFV target
    </table>
    IFT DR original colored dr:
-    <ul>
+    <ul style="margin-bottom:5px;">
        <li> 1 = Flame in target Location
        <li> 6 = thrower breaks, Flame in their Location
    </ul>
--- a/vasl_templates/webapp/data/default-template-pack/ob_ma_notes.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ob_ma_notes.j2
@ -3,11 +3,10 @@
 <head>
 <meta charset="utf-8">
 <style>
+{{CSS:common}}
 .ma-note { margin: 2px 0 3px 0 ; text-align: justify ; }
 .ma-note .key { font-weight: bold ; }
 .ma-note table { margin-left: 10px ; }
-.ma-note td { padding: 0 ; }
-.ma-note ul { padding-left: 10px ; list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
 .ma-note li { margin-bottom: 2px ; }
 .ma-note .example { font-size: 90% ; font-style: italic ; }
 .ma-note table { margin-left: 10px ; margin-top: -5px ; }
@ -15,9 +14,6 @@
 .ma-note table td { padding: 0 10px 0 5px ; }
 .extra-notes-caption { border: 1px solid #e0e0e0 ; background: #fcfcfc ; font-weight: bold ; padding: 2px 5px ; }
 .slashed { text-decoration: line-through ; }
-p { margin-top: 5px ; margin-bottom: 0 ; }
-ul { margin: 0 0 0 15px ; padding: 0 ; }
-sup { font-size: 75% ; }
 </style>
 </head>

--- a/vasl_templates/webapp/data/default-template-pack/ob_note.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ob_note.j2
@ -2,6 +2,9 @@

 <head>
 <meta charset="utf-8">
+<style>
+{{CSS:common}}
+</style>
 </head>

 <table>
--- a/vasl_templates/webapp/data/default-template-pack/ob_setup.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ob_setup.j2
@ -2,6 +2,9 @@

 <head>
 <meta charset="utf-8">
+<style>
+{{CSS:common}}
+</style>
 </head>

 <table>
--- a/vasl_templates/webapp/data/default-template-pack/ob_vo.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ob_vo.j2
@ -3,9 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-sup { font-size: 75% ; }
-
+{{CSS:common}}
 .note { font-size: 90% ; font-style: italic ; color: #808080 ; }
 .capability {}
 .comment { font-size: 90% ; font-style: italic ; color: #404040 ; }
--- a/vasl_templates/webapp/data/default-template-pack/ob_vo_note.css
+++ b/vasl_templates/webapp/data/default-template-pack/ob_vo_note.css
@ -7,8 +7,6 @@ img.piece { float: left ; margin-right: 0.5em ; }
 .header .name { font-weight: bold ; font-style: italic ; }

 .content { text-align: justify ; }
-.content p { margin-top: 5px ; }
-.content ul { margin-left: 0 ; padding-left: 25px ; list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
 .content li { margin-bottom: 2px ; }
 .content .example { font-size: 90% ; font-style: italic ; }
 .content .rf { font-style: italic ; color: #444 ; }
--- a/vasl_templates/webapp/data/default-template-pack/ob_vo_note.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ob_vo_note.j2
@ -2,7 +2,10 @@

 <head>
 <meta charset="utf-8">
-<style> {{CSS:ob_vo_note}} </style>
+<style>
+{{CSS:common}}
+{{CSS:ob_vo_note}}
+ </style>
 </head>

 <table>
--- a/vasl_templates/webapp/data/default-template-pack/pf.j2
+++ b/vasl_templates/webapp/data/default-template-pack/pf.j2
@ -3,9 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-td.c { text-align: center ; }
-td.r { text-align: right ; }
+{{CSS:common}}
 </style>
 </head>

@ -26,7 +24,7 @@ td.r { text-align: right ; }
    PF check: dr &le; {{PF_CHECK_DR}} (&#9651;)
    <table style="margin-left:10px;">
        <tr>
-            <td style="width:20px;"> +1 <td> HS/crew
+            <td style="width:25px;"> +1 <td> HS/crew
        <tr>
            <td> +2 <td> SMC
        <tr>
--- a/vasl_templates/webapp/data/default-template-pack/piat.j2
+++ b/vasl_templates/webapp/data/default-template-pack/piat.j2
@ -3,9 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-td.c { text-align: center ; }
-td.r { text-align: right ; }
+{{CSS:common}}
 </style>
 </head>

--- a/vasl_templates/webapp/data/default-template-pack/players.j2
+++ b/vasl_templates/webapp/data/default-template-pack/players.j2
@ -2,6 +2,9 @@

 <head>
 <meta charset="utf-8">
+<style>
+{{CSS:common}}
+</style>
 </head>

 <table style="
@ -12,10 +15,12 @@
 <td style="font-weight:bold;">
     {%if PLAYER_FLAG_1%}<img src="{{PLAYER_FLAG_1}}">&nbsp;{%endif%}{{PLAYER_1_NAME}}: <br>
     {%if PLAYER_FLAG_2%}<img src="{{PLAYER_FLAG_2}}">&nbsp;{%endif%}{{PLAYER_2_NAME}}:
-<td>
+
+<td style="padding-left:2px;">
    ELR: {{PLAYER_1_ELR}} <br>
    ELR: {{PLAYER_2_ELR}}
-<td>
+
+<td style="padding-left:5px;">
    SAN: {{PLAYER_1_SAN}} <br>
    SAN: {{PLAYER_2_SAN}}

--- a/vasl_templates/webapp/data/default-template-pack/psk.j2
+++ b/vasl_templates/webapp/data/default-template-pack/psk.j2
@ -3,9 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
-td.c { text-align: center ; }
-td.r { text-align: right ; }
+{{CSS:common}}
 </style>
 </head>

--- a/vasl_templates/webapp/data/default-template-pack/scenario.j2
+++ b/vasl_templates/webapp/data/default-template-pack/scenario.j2
@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { padding: 5px 10px 5px 10px ; }
+{{CSS:common}}
 </style>
 </head>

@ -13,6 +13,7 @@ td { padding: 5px 10px 5px 10px ; }

 <tr>
 <td style="
+  padding: 5px 10px 5px 10px ;
  background: #f0f0f0 ;
  border-bottom: 1px solid #c0c0c0 ;
 ">
@ -24,7 +25,6 @@ td { padding: 5px 10px 5px 10px ; }
    {%if SCENARIO_DATE%}
        <small><i>({{SCENARIO_MONTH_NAME}} {{SCENARIO_DAY_OF_MONTH_POSTFIX}}, {{SCENARIO_YEAR}})</i></small>
    {%endif%}
-</div>

 </table>

--- a/vasl_templates/webapp/data/default-template-pack/scenario_note.j2
+++ b/vasl_templates/webapp/data/default-template-pack/scenario_note.j2
@ -2,6 +2,9 @@

 <head>
 <meta charset="utf-8">
+<style>
+{{CSS:common}}
+</style>
 </head>

 <table>
--- a/vasl_templates/webapp/data/default-template-pack/ssr.j2
+++ b/vasl_templates/webapp/data/default-template-pack/ssr.j2
@ -3,7 +3,9 @@
 <head>
 <meta charset="utf-8">
 <style>
-ul { margin: 0 ; padding-left: 0 ; list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
+{{CSS:common}}
+ul#ssr { padding: 0 5px 0 10px ; }
+ul#ssr li { margin-top: 2px ; }
 </style>
 </head>

@ -15,15 +17,14 @@ ul { margin: 0 ; padding-left: 0 ; list-style-image: url("{{IMAGES_BASE_URL}}/bu
 <td style="
  background: #f0f0f0 ;
  border-bottom: 1px solid #c0c0c0 ;
+  padding: 2px 5px ;
 ">
    <b>Scenario Special Rules</b>

 <tr>
 <td>
-<ul style="margin:0 0 0 10px;">
-{%for ssr in SSR%}
-    <li> {{ssr}}
-{%endfor%}
+<ul id="ssr">
+{%for ssr in SSR%} <li> {{ssr}} {%endfor%}
 </ul>

 </table>
--- a/vasl_templates/webapp/data/default-template-pack/thh.j2
+++ b/vasl_templates/webapp/data/default-template-pack/thh.j2
@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <style>
-td { margin: 0 ; padding: 0 ; }
+{{CSS:common}}
 </style>
 </head>

@ -24,7 +24,7 @@ td { margin: 0 ; padding: 0 ; }
    THH creation: dr &le; 3 (&#9651;)
    <table style="margin-left:10px;">
        <tr>
-            <td style="width:20px;"> +2 <td> if Conscript
+            <td style="width:25px;"> +2 <td> if Conscript
        <tr>
            <td> +1 <td> if HS
        <tr>
--- a/vasl_templates/webapp/data/default-template-pack/victory_conditions.j2
+++ b/vasl_templates/webapp/data/default-template-pack/victory_conditions.j2
@ -2,6 +2,9 @@

 <head>
 <meta charset="utf-8">
+<style>
+{{CSS:common}}
+</style>
 </head>

 <table style="
@ -15,7 +18,7 @@
  padding: 2px 5px ;
  font-weight: bold ;
 ">
-        Victory Conditions
+    Victory Conditions

 <tr>
 <td style="padding:0 3px;">
--- a/vasl_templates/webapp/static/snippets.js
+++ b/vasl_templates/webapp/static/snippets.js
@ -126,6 +126,8 @@ function make_snippet( $btn, params, extra_params, show_date_warnings )

    // add simple parameters
    params.IMAGES_BASE_URL = APP_URL_BASE + gImagesBaseUrl ;
+    if ( gUserSettings["custom-list-bullets"] )
+        params.CUSTOM_LIST_BULLETS = true ;

    // set player-specific parameters
    var player_no = get_player_no_for_element( $btn ) ;
--- a/vasl_templates/webapp/static/user_settings.js
+++ b/vasl_templates/webapp/static/user_settings.js
@ -5,6 +5,7 @@ USER_SETTINGS = {
    "hide-unavailable-ma-notes": "checkbox",
    "include-vasl-images-in-snippets": "checkbox",
    "include-flags-in-snippets": "checkbox",
+    "custom-list-bullets": "checkbox",
    "vo-notes-as-images": "checkbox",
 } ;

@ -45,7 +46,7 @@ function user_settings()
        dialogClass: "user-settings",
        modal: true,
        width: 440,
-        height: 300,
+        height: 315,
        resizable: false,
        create: function() {
            init_dialog( $(this), "OK", true ) ;
--- a/vasl_templates/webapp/templates/user-settings-dialog.html
+++ b/vasl_templates/webapp/templates/user-settings-dialog.html
@ -18,6 +18,7 @@
        </div>
        <input type="checkbox" name="include-vasl-images-in-snippets">&nbsp;Include VASL images in snippets <br>
        <input type="checkbox" name="include-flags-in-snippets">&nbsp;Include flags in snippets <br>
+        <input type="checkbox" name="custom-list-bullets">&nbsp;Use custom list bullets <br>
        <div style="height:0.25em;"> &nbsp; </div>
        <input type="checkbox" name="vo-notes-as-images">&nbsp;Show Chapter H vehicle/ordnance notes as images
    </fieldset>
--- a/vasl_templates/webapp/tests/test_vassal.py
+++ b/vasl_templates/webapp/tests/test_vassal.py
@ -279,7 +279,8 @@ def test_latw_update( webapp, webdriver ):
        load_scenario_params( { "scenario": { "PLAYER_1": "german", "PLAYER_2": "russian", "SCENARIO_DATE": "" } } )
        # NOTE: We changed the MOL-P template (to add custom list bullets), so the snippet is different
        # to when this test was originally written, and so #updated changed from 2 to 3.
-        updated_vsav_dump = _update_vsav_and_dump( fname, { "created": 3, "updated": 3, "deleted": 2 } )
+        # NOTE: Same thing happened when we factored out the common CSS into common.css :-/ Sigh...
+        updated_vsav_dump = _update_vsav_and_dump( fname, { "created": 3, "updated": 5, "deleted": 2 } )
        _check_vsav_dump( updated_vsav_dump, {
            "pf": "Panzerfaust", "psk": "Panzerschrek", "atmm": "ATMM check:", # nb: the PF label now has a snippet ID
            "mol": "Kindling Attempt:", "mol-p": "TH#", # nb: the MOL label now has a snippet ID
@ -290,7 +291,7 @@ def test_latw_update( webapp, webdriver ):
        load_scenario_params( {
            "scenario": { "PLAYER_1": "british", "PLAYER_2": "american", "SCENARIO_DATE": "12/31/1943" }
        } )
-        updated_vsav_dump = _update_vsav_and_dump( fname, { "created": 3, "updated": 1, "deleted": 3 } )
+        updated_vsav_dump = _update_vsav_and_dump( fname, { "created": 3, "updated": 2, "deleted": 3 } )
        _check_vsav_dump( updated_vsav_dump, {
            # nb: the PSK/ATMM and MOL-P label are now gone
            "piat": "TH#",
--- a/vasl_templates/webapp/vo_notes.py
+++ b/vasl_templates/webapp/vo_notes.py
@ -236,9 +236,12 @@ def _make_vo_note_html( vo_note ):
        url_root = url_root[:-1]

    # inject the CSS (we do it like this since VASSAL doesn't support <link> :-/)
-    css = globvars.template_pack.get( "css", {} ).get( "ob_vo_note" )
-    if css:
-        vo_note = "<head>\n<style>\n{}\n</style>\n</head>\n\n{}".format( css, vo_note )
+    css = [
+        globvars.template_pack.get( "css", {} ).get( "common", "" ),
+        globvars.template_pack.get( "css", {} ).get( "ob_vo_note", "" ),
+    ]
+    if any( css ):
+        vo_note = "<head>\n<style>\n{}\n</style>\n</head>\n\n{}".format( "\n".join(css), vo_note )

    # update any parameters
    vo_note = vo_note.replace( "{{CHAPTER_H}}", url_root+"/chapter-h" )