Updated some icons, tightened up the UI.

loader/freeze.py

@@ -98,7 +98,7 @@ def _convert_app_icon( save_fname ):
     # to an image, then insert it into the PyInstaller-generated executable (so that
     # we don't have to bundle Pillow into the release).
     img = Image.open( APP_ICON )
-    img = img.convert( "RGBA" ).resize( (64, 64) )
+    img = img.convert( "RGBA" ).resize( (48, 48) )
     img.save( save_fname, "png" )
 
 # ---------------------------------------------------------------------

loader/main.py

@@ -93,7 +93,7 @@ def create_window( app_icon ):
     """Create the splash window."""
 
     # create the splash window
-    main_window.geometry( "290x75" )
+    main_window.geometry( "275x64" )
     main_window.title( "vasl-templates loader" )
     main_window.overrideredirect( 1 ) # nb: "-type splash" doesn't work on Windows :-/
     main_window.eval( "tk::PlaceWindow . center" )
@@ -103,11 +103,11 @@ def create_window( app_icon ):
 
     # add the app icon
     label = tkinter.Label( main_window, image=app_icon )
-    label.grid( row=0, column=0, rowspan=2, padx=5, pady=5 )
+    label.grid( row=0, column=0, rowspan=2, padx=8, pady=8 )
 
     # add the caption
     label = tkinter.Label( main_window, text="Loading vasl-templates...", font=("Helvetica",12) )
-    label.grid( row=0, column=1, padx=5, pady=(5,0) )
+    label.grid( row=0, column=1, padx=5, pady=(8,0) )
 
     # add the "loading" image (we have to animate it ourself :-/)
     anim_label = tkinter.Label( main_window )

vasl_templates/ui/about.ui

@@ -22,7 +22,7 @@
   <widget class="QLabel" name="app_icon">
    <property name="geometry">
     <rect>
-     <x>10</x>
+     <x>15</x>
      <y>10</y>
      <width>64</width>
      <height>64</height>
@@ -40,7 +40,7 @@
     <rect>
      <x>80</x>
      <y>20</y>
-     <width>371</width>
+     <width>361</width>
      <height>61</height>
     </rect>
    </property>
@@ -88,9 +88,9 @@
   <widget class="QWidget" name="horizontalLayoutWidget">
    <property name="geometry">
     <rect>
-     <x>10</x>
+     <x>15</x>
      <y>140</y>
-     <width>441</width>
+     <width>430</width>
      <height>31</height>
     </rect>
    </property>
@@ -129,9 +129,9 @@
   <widget class="QLabel" name="home_url">
    <property name="geometry">
     <rect>
-     <x>10</x>
+     <x>15</x>
      <y>120</y>
-     <width>441</width>
+     <width>411</width>
      <height>21</height>
     </rect>
    </property>
@@ -151,9 +151,9 @@
   <widget class="QLabel" name="license">
    <property name="geometry">
     <rect>
-     <x>10</x>
+     <x>15</x>
      <y>100</y>
-     <width>441</width>
+     <width>411</width>
      <height>17</height>
     </rect>
    </property>

vasl_templates/ui/server_settings.ui

@@ -509,7 +509,7 @@
     <rect>
      <x>650</x>
      <y>230</y>
-     <width>164</width>
+     <width>173</width>
      <height>31</height>
     </rect>
    </property>

vasl_templates/webapp/data/default-template-pack/extras/grid.j2

@@ -3,7 +3,7 @@
 <!-- vasl-templates:name Grid -->
 <!-- vasl-templates:description Generates a grid. -->
 
-<!-- caption = {{CAPTION:/20|Grid caption}} -->
+<!-- caption = {{CAPTION:/20|Caption}} -->
 <!-- #cols = {{COLS:3/1|# columns}} ; #rows = {{ROWS:2/1|# rows}} -->
 <!-- cell size = {{CELL_WIDTH:180px/5|Cell width}} x {{CELL_HEIGHT:70px/5|Cell height}} -->
 <!-- cell labels = {{CELL_LABELS:none::letters::numbers|Cell labels}} -->

vasl_templates/webapp/static/css/edit-vo-dialog.css

@@ -5,22 +5,22 @@
 .ui-dialog.edit-vo .header img.vasl-image { height: 3.5em ; margin-right: 0.5em ; }
 .ui-dialog.edit-vo .header img.vasl-image.small-piece { height: 2.7em ; margin-left: 0.4em ; margin-right: 0.9em ; }
 .ui-dialog.edit-vo .header .content { display: flex ; flex-direction: column ; justify-content: center ; }
-.ui-dialog.edit-vo .header .content .vo-name { font-size: 125% ; }
+.ui-dialog.edit-vo .header .content .vo-name { margin-left: 0.5em ; font-size: 125% ; font-weight: bold ; color: #333 ; }
 .ui-dialog.edit-vo .header .content input.select-vo-image { width: 15px ; position: relative ; top: 10px ; }
 
-.ui-dialog.edit-vo .capabilities { flex-grow: 1 ; }
-.ui-dialog.edit-vo .comments { flex-grow: 1 ; }
+.ui-dialog.edit-vo .capabilities { margin-top: 0.25em ; flex-grow: 1 ; }
+.ui-dialog.edit-vo .comments { margin-top: 0.5em ; flex-grow: 1 ; }
 /* FUDGE! Need this for Chromium (odd, because flex-grow works properly elsewhere :-/). */
 .ui-dialog.edit-vo .capabilities, .ui-dialog.edit-vo .comments { flex-basis: 0 ; }
 
 .ui-dialog.edit-vo .fieldset { height: calc(100% - 40px) ; display: flex ; flex-direction: column ; align-items: stretch ; }
 .ui-dialog.edit-vo .fieldset { margin: 0 ; padding: 5px 8px 8px 8px ; border: 1px solid #aaa ; }
-.ui-dialog.edit-vo .fieldset-legend { color: #666 ; }
+.ui-dialog.edit-vo .fieldset-legend { color: #333 ; font-weight: bold ; }
 .ui-dialog.edit-vo .fieldset ul { flex-grow: 1 ; margin: 0 0 5px 0 ; list-style-type: none ; overflow-y: auto ; }
 .ui-dialog.edit-vo .fieldset li { margin: 2px ; padding: 2px 0px 2px 5px ; background: #eee ; }
 .ui-dialog.edit-vo .fieldset li div { display: flex ; align-items: center ; }
 .ui-dialog.edit-vo .fieldset li img.dragger { height: 1em ; margin-right: 5px ; }
 .ui-dialog.edit-vo .fieldset li input[type='text'] { flex-grow: 1 ; margin-right: 1em ; }
 
-.ui-dialog.edit-vo .fieldset .footer { display: flex ; align-items: center ; }
+.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 ; }

vasl_templates/webapp/static/css/lfa.css

@@ -86,7 +86,7 @@
     background: #fffff8 ;
 }
 #lfa .options input[type=checkbox] { vertical-align: middle ; }
-#lfa .options button.download { position: absolute ; right: 5px ; bottom: 5px ; padding: 3px !important ; }
+#lfa .options button.download { position: absolute ; right: 5px ; bottom: 6px ; padding: 0 !important ; }
 #lfa .options button.player-colors { padding: 3px 6px 2px 5px !important ; }
 .ui-dialog.lfa input[type=checkbox][disabled] { opacity: 0.5 ; }
 .ui-dialog.lfa input[type=checkbox][disabled] + label { opacity: 0.5 ; }

vasl_templates/webapp/static/css/main.css

@@ -30,15 +30,15 @@ label { height: 1.25em ; }
 .select2-dropdown { color: #444 ; }
 
 .snippet-control button.generate { height: 26px ; padding: 2px 0 2px 5px ; color: #000 ; }
-.snippet-control button.generate.inactive { color: #aaa ; }
+.snippet-control button.generate.inactive { color: #888 ; }
 .snippet-control button.generate img { height: 20px ; margin-right: 5px ; vertical-align: middle ; }
 .snippet-control .ui-selectmenu-button { padding: 2px 10px ; }
 .snippet-control-menu-item { font-size: 75% ; font-style: italic ; }
 .snippet-control .ui-selectmenu-button-closed { height: 26px ; }
 .snippet-control .ui-selectmenu-icon.ui-icon { margin-top: -8px ; }
 
-button.edit-template { height: 30px ; padding: 4px 10px ; }
-button.edit-template img { height: 18px ; vertical-align: middle ; margin-right: 0.25em ; }
+button.edit-template { height: 28px ; padding: 4px 10px ; }
+button.edit-template img { height: 18px ; vertical-align: middle ; margin: -2px 0.4em 0 0 ; }
 
 input.snippet-width { width: 3.75em ; }
 
@@ -48,7 +48,8 @@ input.snippet-width { width: 3.75em ; }
 .ui-dialog-content { padding: 1em !important ; }
 .ui-dialog-content p { margin-bottom: 0.5em ; }
 .ui-dialog-buttonpane { margin: 0.5em !important ; padding: 0.75em 0.5em 0.4em 0.5em !important ; }
-.ui-dialog-buttonpane button { margin: 0 0 0 5px !important ; padding: 0.1em 0.5em ; }
+.ui-dialog-buttonpane button { margin: 0 0 0 0.5em !important ; padding: 0.2em 0.5em ; }
+.ui-dialog-buttonpane button:first-child {  margin-left: 0.25em !important ; }
 .ui-dialog-buttonpane button.ok { background: #ddd ; }
 .ui-dialog-buttonpane button.ok:hover { background: #ccc ; }
 
@@ -58,6 +59,7 @@ input.snippet-width { width: 3.75em ; }
 .sp-palette-row-selection { margin-top: 6px ; border-top: 1px solid #ccc ; padding-top: 6px ; }
 
 .growl-title { display: none ; }
+.growl-close { position: absolute ; top: 0 ; right: 5px ; }
 .growl .pre { font-family: monospace ; }
 .growl div.pre { margin: 0 0 1em 1em ; font-size: 80% ; }
 

vasl_templates/webapp/static/css/program-info.css

@@ -1,12 +1,15 @@
 .ui-dialog.program-info .ui-dialog-titlebar { background: #80d0ff ; }
+.ui-dialog.program-info .ui-dialog-buttonpane { margin-top: 0 !important ; }
 
-#program-info table { margin-bottom: 0.5em ; }
-#program-info td { text-align: bottom ; }
-#program-info td.key { width: 8.5em ; font-weight: bold ; white-space: nowrap ; }
+#program-info td { vertical-align: top ; padding: 0.2em 0 ; line-height: 18px ; }
+#program-info td.key { width: 9em ; font-weight: bold ; white-space: nowrap ; }
 #program-info td.val { border: none ; }
 #program-info td ul { margin-top: 0 ; }
 
+#program-info .downloads td { padding-top: 0 ; padding-bottom: 0 ; }
+#program-info .downloads td.key { width: 12.5em ; }
+
 #program-info .na { font-style: italic ; color: #444 ; }
-#program-info .path { font-family: monospace ; font-size: 90% ; }
+#program-info .path { font-family: monospace ; font-size: 80% ; }
 #program-info .extra { padding-left: 0.75em ; }
 #program-info .info { font-size: 80% ; font-style: italic ; color: #666 ; }

vasl_templates/webapp/static/css/scenario-card.css

@@ -26,6 +26,7 @@
 
 /* scenario card - sub-header */
 .scenario-card .header2 { margin: 0 0.5em ; font-size: 90% ; color: #666 ; }
+.scenario-card .header2 a { color: #666 ; }
 .scenario-card .publisher { font-size: 90% ; font-style: italic ; }
 .scenario-card .publication-date { font-size: 90% ; font-style: italic ; }
 
@@ -42,7 +43,7 @@
 .scenario-card .player-info .players .label { font-weight: bold ; padding-right: 0.25em ; }
 .scenario-card .player-info .players .flag { width: 1px ; text-align: center ; }
 .scenario-card .player-info .players .name { padding-left: 0.1em ; }
-.scenario-card .player-info .players .desc { font-size: 90% ; font-style: italic ; }
+.scenario-card .player-info .players .desc { font-size: 90% ; font-style: italic ; padding-bottom: 0.25em ; }
 
 .scenario-card .player-info .oba { clear: both ; float: right ; font-size: 90% ; border: 1px solid #c0c0a0 ; border-radius: 5px ; }
 .scenario-card .player-info .oba .oba-header { border-bottom: 1px dotted #c0c0a0 ; padding: 2px 5px 5px 5px ; font-weight: bold ; text-align: center ; white-space: nowrap ; }
@@ -70,12 +71,14 @@
 /* scenario card - misc */
 .scenario-card .boards img.map-previews { height: 0.75em ; margin-left: 0.5em ; cursor: pointer ; }
 .scenario-card .boards .map-preview-count { font-size: 80% ; font-style: italic ; color: #888 ; }
+.scenario-card .extra-rules { margin-top: 0.25em ; }
 .scenario-card .errata ul { margin-top: 0 ; }
 .scenario-card .errata .source { font-size: 90% ; font-style: italic ; color: #666 ; }
 
 /* scenario info dialog */
 .ui-dialog.scenario-info { border-radius: 10px ; }
 .ui-dialog.scenario-info .ui-dialog-titlebar { display: none ; }
+#scenario-info-dialog { padding: 8px !important ; }
 #scenario-info-dialog .scenario-card { height: 100% ; overflow-y: hidden ; }
 #scenario-info-dialog .connect-roar { display: inline-block ; margin-top: 0.25em ; font-size: 80% ; color: #444 ; cursor: pointer ; }
 #scenario-info-dialog .connect-roar img { height: 0.75em ; Xmargin-right: 0.25em ; opacity: 0.7 ; }

vasl_templates/webapp/static/css/scenario-downloads-dialog.css

@@ -16,5 +16,5 @@
 #scenario-downloads-dialog .fgroup .screenshot img { max-width: 100% ; max-height: 4em ; }
 #scenario-downloads-dialog .fgroup .user { font-style: italic ; }
 #scenario-downloads-dialog .fgroup .timestamp { font-size: 80% ; font-style: italic ; color: #888 ; }
-#scenario-downloads-dialog .fgroup button { float: left ; margin: 0.5em 0.5em 0 0 ; padding: 2px 5px ; display: flex ; align-items: center ; font-size: 80% ; }
+#scenario-downloads-dialog .fgroup button { float: left ; margin: 0.5em 0.5em 0 0 ; padding: 3px 6px ; display: flex ; align-items: center ; font-size: 80% ; }
 #scenario-downloads-dialog .fgroup button img { height: 1em ; margin-right: 0.5em ; }

vasl_templates/webapp/static/css/scenario-search-dialog.css

@@ -16,7 +16,7 @@
 #scenario-search .select2-dropdown { border: none ; }
 #scenario-search .select2-search--dropdown { padding: 0 0 0.5em 0 ; }
 
-#scenario-search .select2-results__options { padding: 0 0.25em ; }
+#scenario-search .select2-results__options { padding: 0 ; }
 #scenario-search .select2-results__option--highlighted[aria-selected] { color: #f0f0f0 ; }
 #scenario-search .select2-results__option--highlighted[aria-selected] .scenario-date { color: #f0f0f0 ; }
 #scenario-search .select2-results__option--highlighted[aria-selected] .publication-name { color: #f0f0f0 ; }
@@ -51,8 +51,8 @@
 #scenario-search .footer a:focus { outline: 0 ; }
 
 /* import control */
-#scenario-search .import-control { margin-top: 0.5em ; padding-top: 0.5em ; border-top: 1px dotted #666 ; }
-#scenario-search .import-control .buttons button { float: right ; margin-left: 0.5em ; padding: 0.1em 0.5em ; }
+#scenario-search .import-control { margin-top: 0.5em ; padding-top: 0.75em ; border-top: 1px dotted #666 ; }
+#scenario-search .import-control .buttons button { float: right ; margin-left: 0.5em ; padding: 0.2em 0.5em ; }
 #scenario-search .import-control .buttons button.import { height: 2em ; display: flex ; align-items: center ; }
 #scenario-search .import-control .buttons button.import img { height: 1em ; margin-right: 0.5em ; }
 #scenario-search .import-control .buttons button.downloads { height: 2em ; display: flex ; align-items: center ; }

vasl_templates/webapp/static/css/sortable.css

@@ -1,14 +1,14 @@
-button.sortable-add { vertical-align: top ; height: 30px ; padding: 4px 10px ; }
-img.sortable-add { vertical-align: middle ; height: 15px ; margin-right: 0.25em ; }
-button.sortable-reset { vertical-align: top ; height: 30px ; padding: 4px 10px ; }
-img.sortable-reset { vertical-align: middle ; height: 15px ; margin-right: 0.25em ; }
+button.sortable-add { height: 28px ; padding: 5px 10px ; }
+img.sortable-add { height: 16px ; margin: -2px 0.4em 0 -2px ; }
+button.sortable-reset { height: 28px ; padding: 5px 10px ; }
+img.sortable-reset { height: 16px ; margin: -2px 0.4em 0 -2px ; }
 
 .sortable { list-style-type: none ; margin: 0 ; padding: 0 ; }
 
 .sortable li { margin-bottom: 2px ; padding: 5px ; font-size: 90% ; }
 .sortable li:hover { cursor: pointer ; }
 .sortable li.ui-sortable-helper { opacity: 0.8 ; }
-.sortable li img.snippet { height: 1.25em ; margin: -2px -2px ; padding-left: 1em ; float: right ; }
+.sortable li img.snippet { height: 1.25em ; margin: -2px -2px 0 15px ; float: right ; }
 .sortable li img.aslrb2 { height: 1.25em ; position: absolute ; bottom: -2px ; right: -2px ; opacity: 0.6 ; }
 
 .sortable ul li, .sortable ol li { margin-top: -0.75em ; } /* nb: tighten up lists in sortable2 entries */
@@ -17,4 +17,4 @@ img.sortable-reset { vertical-align: middle ; height: 15px ; margin-right: 0.25e
 .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 { margin: 3px 5px 0 5px ; height: 24px ;  }
+.sortable-trash { height: 22px ; margin-left: 6px ; }

vasl_templates/webapp/static/css/tabs-extras.css

@@ -24,7 +24,9 @@
 #tabs-extras .right-panel .footer { margin-top: 1em ; font-size: 80% ; font-style: italic ; color: #444 ; }
 #tabs-extras .right-panel .footer table { margin: 0 ; }
 #tabs-extras .right-panel .footer td { vertical-align: top ; }
-#tabs-extras .right-panel .footer td.key, td.val { padding: 0.2em  0.5em; border: 1px dotted #ccc ; }
+#tabs-extras .right-panel .footer td.key, #tabs-extras .right-panel .footer td.val {
+    padding: 0.2em  0.5em; border: 1px dotted #ccc ;
+}
 #tabs-extras .right-panel .footer td.key { background: #f8f8f8 ; font-weight: bold ; }
 
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

vasl_templates/webapp/static/css/tabs-ob.css

@@ -29,5 +29,5 @@
 .panel-ob_vo .sortable .vo-entry .detail .vo-capabilities { max-height: 2.5em ; overflow: hidden ; font-size: 80% ; font-style: italic ; }
 .panel-ob_vo .sortable .vo-entry .detail .vo-capability { margin-right: 0.5em ; color: #444 ; }
 .panel-ob_vo label.header { font-weight: bold ; display: inline-block ; width: 3.25em ; }
-.panel-ob_vo .snippet-admin { align-self: flex-end ; }
+.panel-ob_vo .snippet-admin { align-self: flex-end ; display: flex ; align-items: center ; }
 .panel-ob_vo .snippets-notes { margin-top: 2px ; }

vasl_templates/webapp/static/css/tabs-scenario.css

@@ -39,7 +39,7 @@
 
 #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-scenario_notes .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
 
 /* -------------------------------------------------------------------- */
 

vasl_templates/webapp/static/css/user-settings-dialog.css

@@ -11,4 +11,4 @@
 
 .ui-dialog.user-settings img.need-localhost { display: inline-block ; height: 0.75em ; }
 .ui-dialog.user-settings div.need-localhost { float: left ; margin-top: -5px ; width: 290px ; font-size: 80% ; font-style: italic ; color: #c02020 ; }
-.ui-dialog.user-settings div.need-localhost img { float: left ; height: 1.5em ; margin-right: 0.25em ; }
+.ui-dialog.user-settings div.need-localhost img { float: left ; height: 1.5em ; margin-right: 0.5em ; }

vasl_templates/webapp/static/help/main.css

@@ -43,22 +43,25 @@ table.settings td.val { font-family: monospace ; }
 div.info {
     display: inline-block ; min-height: 18px ;
     border: 1px dotted #444 ; border-radius: 5px ;
-    padding: 0.5em 0.5em 0.5em 32px ;
-    background: url(images/info.gif) 0.25em 0.25em no-repeat ;
+    padding: 0.5em 0.5em 0.5em 35px ;
+    background: url(images/info.png) 6px 6px no-repeat ;
+    background-size: 20px 20px ;
     font-size: 80% ; font-style: italic ;
 }
 div.hint {
     display: inline-block ; min-height: 22px ;
     border: 1px dotted #444 ; border-radius: 5px ;
-    padding: 0.5em 0.5em 0.5em 32px ;
-    background: url(images/hint.gif) 0.25em 0.25em no-repeat ;
+    padding: 0.5em 0.5em 0.5em 30px ;
+    background: url(images/hint.png) 4px 4px no-repeat ;
+    background-size: 20px 20px ;
     font-size: 80% ; font-style: italic ;
 }
 div.warning {
     display: inline-block ; min-height: 18px ;
     border: 1px dotted #444 ; border-radius: 5px ;
-    padding: 0.5em 0.5em 0.5em 32px ;
-    background: url(images/warning.gif) 0.25em 0.25em no-repeat ;
+    padding: 0.5em 0.5em 0.5em 35px ;
+    background: url(images/warning.png) 6px 6px no-repeat ;
+    background-size: 20px 20px ;
     font-size: 80% ; font-style: italic ;
 }
 

vasl_templates/webapp/static/main.js

@@ -632,6 +632,7 @@ function updateCompassImage() {
     $btn.find( "img" ).attr( "src",
         make_app_url( "/static/images/compass/" + dirn + ".png" )
     ).css( {
+        opacity: (dirn === "none") ? 1 : 0.85,
         padding: imagePadding[dirn]
     } ) ;
     $btn.button( dirn === "none" ? "disable" : "enable" ) ;

vasl_templates/webapp/static/scenarios.js

@@ -619,7 +619,7 @@ function onImportScenario()
                         newVal = msg.substring( 2 ) ;
                     else {
                         buf = [ "<div class='warning2'>",
-                            "<img src='" + gImagesBaseUrl + "/warning.gif'>",
+                            "<img src='" + gImagesBaseUrl + "/warning.png'>",
                             msg,
                             "</div>"
                         ] ;
@@ -659,7 +659,7 @@ function onImportScenario()
                     buf.push( "<div class='hint'>", "Currently \"" + displayCurrVal + "\".", "</div>" ) ;
                 }
                 if ( extraMsg )
-                    buf.push( "<div class='hint'>", "<img src='"+gImagesBaseUrl+"/warning.gif'>", extraMsg, "</div>" ) ;
+                    buf.push( "<div class='hint'>", "<img src='"+gImagesBaseUrl+"/warning.png'>", extraMsg, "</div>" ) ;
                 warnings.push( $( buf.join("") ) ) ;
             }
         } ) ;
@@ -676,7 +676,7 @@ function onImportScenario()
         if ( warnings.length > 0 ) {
             var buf = [
                 "<div class='header'>",
-                "<img src='" + gImagesBaseUrl + "/warning.gif'>",
+                "<img src='" + gImagesBaseUrl + "/warning.png' style=height:1em;'>",
                 "<div class='caption'> Some values in your scenario will be changed: </div>",
                 "</div>"
             ] ;
@@ -1094,7 +1094,7 @@ function updateLayout()
     $dlg.find( ".select2-dropdown" ).css( "width",
         $dlg.find( ".scenarios" ).width()
     ) ;
-    var newHeight = $dlg.find( ".scenarios" ).height() - $dlg.find( ".select2-search" ).height() - 15 ;
+    var newHeight = $dlg.find( ".scenarios" ).height() - $dlg.find( ".select2-search" ).height() - 10 ;
     $sel.find( ".select2-results__options" ).css( {
         height: newHeight,
         "max-height": newHeight,
@@ -1274,7 +1274,7 @@ window.showScenarioInfo = function()
                 modal: true,
                 closeOnEscape: false, // nb: handled in handle_escape()
                 width: $(window).width() * 0.8,
-                minWidth: 550,
+                minWidth: 570,
                 height: $(window).height() * 0.8,
                 minHeight: 300,
                 create: function() {
@@ -1295,17 +1295,19 @@ window.showScenarioInfo = function()
                     // configure the "upload scenario" button
                     var $btn = $btnPane.find( "button.upload" ) ;
                     $btn.prepend(
-                        $( "<img src='" + gImagesBaseUrl+"/upload.png" + "' style='height:0.9em;margin:0 0.35em -1px 0;'>" )
+                        $( "<img src='" + gImagesBaseUrl+"/upload.png" + "' style='height:0.8em;margin:0 0.35em -1px 0;'>" )
                     ) ;
                     var creditWidth = $btnPane.find( ".credit" ).outerWidth() ;
-                    $btn.css( { position: "absolute", left: creditWidth+20, padding: "2px 5px" } ) ;
+                    // FUDGE! We force the width of $btn since $btn needs to know it in order to position itself,
+                    // and there is a short delay before the UI updates itself for the inserted image.
+                    $btn.css( { position: "absolute", left: creditWidth+20, width: 90 } ) ;
                     $btn.attr( "title", "Upload your setup to the ASL Scenario Archive" ) ;
                     // configure the "unlink scenario" button
                     var $btn2 = $btnPane.find( "button.unlink" ) ;
                     $btn2.prepend(
                         $( "<img src='" + gImagesBaseUrl+"/cross.png" + "' style='height:0.6em;margin-right:0.35em;padding-bottom:1px;'>" )
                     ) ;
-                    $btn2.css( { position: "absolute", left: creditWidth+40+$btn.outerWidth(), padding: "2px 5px" } ) ;
+                    $btn2.css( { position: "absolute", left: creditWidth+$btn.outerWidth()+30 } ) ;
                     $btn2.attr( "title", "Unlink your scenario from the ASL Scenario Archive" ) ;
                     // update the layout
                     onResize() ;
@@ -1378,7 +1380,7 @@ window.updateForConnectedScenario = function( scenarioId, roarId )
     // update the UI
     var $btn = $( "button.scenario-search" ) ;
     if ( scenarioId ) {
-        $btn.find( "img" ).attr( "src", gImagesBaseUrl+"/info.gif" ) ;
+        $btn.find( "img" ).attr( "src", gImagesBaseUrl+"/scenario-info.png" ) ;
         $btn.attr( "title", "Scenario details" ) ;
     } else {
         $btn.find( "img" ).attr( "src", gImagesBaseUrl+"/search.png" ) ;
@@ -1457,10 +1459,10 @@ window.addAsaCreditPanel = function( $dlg, scenarioId )
         "</div>"
     ] ;
     var $credit = $( buf.join("") ) ;
-    $credit.css( { position: "absolute", left: "1em", bottom: "13px",  display: "flex", "align-items": "center" } ) ;
+    $credit.css( { position: "absolute", left: "1em", bottom: "18px",  display: "flex", "align-items": "center" } ) ;
     $credit.find( "img" ).css( { height: "1.4em", "margin-right": "0.5em", opacity: 0.7 } ) ;
-    $credit.find( ".caption" ).css( { "font-size": "70%", "line-height": "1em", "margin-top": "-4px" } ) ;
-    $credit.find( "a" ).css( { "text-decoration": "none", "font-style": "italic", color: "#666" } ) ;
+    $credit.find( ".caption" ).css( { "font-size": "70%", "line-height": "1em" } ) ;
+    $credit.find( "a" ).css( { height: "1.4em", "text-decoration": "none", "font-style": "italic", color: "#666" } ) ;
     $credit.find( "a" ).on( "click", function() { $(this).blur() ; } ) ;
 
     // add the credit panel to the dialog's button pane

vasl_templates/webapp/static/simple_notes.js

@@ -141,10 +141,7 @@ function _make_simple_note( note_type, caption )
     buf.push( caption, "</div>" ) ;
     var $content = $( buf.join("") ) ;
     fixup_external_links( $content ) ;
-    $content.children( "img" ).hover(
-        function() { $(this).attr( "src", gImagesBaseUrl + "/snippet-hot.png" ) ; },
-        function() { $(this).attr( "src", gImagesBaseUrl + "/snippet.png" ) ; }
-    ) ;
+    makeSnippetHotHover( $content.children( "img" ) ) ;
 
     // add a handler for the snippet button
     $content.children("img.snippet").click( function( evt ) {

vasl_templates/webapp/static/sortable.js

@@ -77,15 +77,18 @@ $.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='white-space:nowrap;'><img src='" + gImagesBaseUrl + "/sortable-add.png' class='sortable-add'> Add</div>" ) )
-            .button( {} ) ;
+        $add_btn.prepend( $( "<div style='display:flex;align-items:center;whitespace:nowrap;'>" +
+            "<img src='" + gImagesBaseUrl + "/sortable-add.png' class='sortable-add'>" +
+            "Add" +
+            "</div>"
+        ) ).button( {} ) ;
         var $add = find_helper( $sortable2, "add" ) ;
         $add.prop( "title", "Add a new " + display_name[0] )
             .click( args.add ) ;
         if ( args.reset ) {
             $sortable2.data( "on_reset", args.reset ) ;
             var $reset_btn = find_helper( $sortable2, "reset" ) ;
-            $reset_btn.prepend( $( "<div style='white-space:nowrap;'><img src='" + gImagesBaseUrl + "/sortable-reset.png' class='sortable-reset'> Reset</div>" ) )
+            $reset_btn.prepend( $( "<div style=display:flex;align-items:center;'whitespace: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] )
@@ -188,7 +191,7 @@ $.fn.sortable2 = function( action, args )
         if ( $sortable2.children("li").length === 0 ) {
             $sortable2.hide() ;
             var display_name = SORTABLE_DISPLAY_NAMES[ get_sortable2_type($sortable2) ] ;
-            var img = "<img src='" + gImagesBaseUrl + "/sortable-add.png' style='height:1em;'>" ;
+            var img = "<img src='" + gImagesBaseUrl + "/sortable-add.png' style='height:12px;margin-bottom:-1px;'>" ;
             var buf = [
                 SORTABLE_HINTS[ get_sortable2_type($sortable2) ],
                 "<ul class='instructions'>",

vasl_templates/webapp/static/turn_track.js

@@ -266,7 +266,7 @@ function editTurnTrackSettings()
             var $btnPane = $( ".ui-dialog.turn-track .ui-dialog-buttonpane" ) ;
             var $btn = $btnPane.find( "button.snippet" ) ;
             $btn.prepend(
-                $( "<img src='" + gImagesBaseUrl+"/snippet.png" + "' style='height:0.9em;margin:0 0.35em -1px 0;'>" )
+                $( "<img src='" + gImagesBaseUrl+"/snippet.png" + "' style='height:0.9em;margin:0 0 -2px -2px;'>" )
             ) ;
             $btn.css( { position: "absolute", left: 15 } ) ;
             // load the dialog

vasl_templates/webapp/static/user_settings.js

@@ -106,15 +106,15 @@ function user_settings( on_ok, caption )
             init_dialog( $(this), "OK", true ) ;
             // initialize the "this program must be running" warnings
             $( "input.need-localhost" ).each( function() {
-                var $img = $( "<img src='" + gImagesBaseUrl+"/warning.gif" + "'class='need-localhost'>" ) ;
+                var $img = $( "<img src='" + gImagesBaseUrl+"/warning.png" + "'class='need-localhost'>" ) ;
                 if ( $(this).hasClass( "sometimes" ) )
                     $img.addClass( "sometimes" ) ;
-                $img.attr( "title", "If you turn this option on, this program must be running\nbefore you load scenarios into VASSAL." ) ;
+                $img.attr( "title", "If you turn this option on, this program must be running before you load scenarios into VASSAL." ) ;
                 $(this).next().before( $img ) ;
             } ) ;
             var $btn_pane = $(".ui-dialog.user-settings .ui-dialog-buttonpane") ;
             $btn_pane.prepend( $(
-                "<div class='need-localhost'><img src='" + gImagesBaseUrl+"/warning.gif" + "'>" +
+                "<div class='need-localhost'><img src='" + gImagesBaseUrl+"/warning.png" + "'>" +
                 "This program must be running before<br>you load scenarios into VASSAL.</div>"
             ) ) ;
             // install handlers to keep the UI updated

vasl_templates/webapp/static/utils.js

@@ -440,6 +440,14 @@ function add_flag_to_dialog_titlebar( $dlg, player_no )
     ).css( { display: "flex", "align-items": "center" } ) ;
 }
 
+function makeSnippetHotHover( $sel )
+{
+    $sel.hover(
+        function() { $(this).attr( "src", gImagesBaseUrl + "/snippet-hot.png" ) ; },
+        function() { $(this).attr( "src", gImagesBaseUrl + "/snippet.png" ) ; }
+    ) ;
+}
+
 // --------------------------------------------------------------------
 
 var _MONTH_NAMES = [ // nb: we assume English :-/

vasl_templates/webapp/static/vo.js

@@ -256,6 +256,7 @@ function do_add_vo( vo_type, player_no, vo_entry, vo_image_id, elite, custom_cap
     }
     buf.push( "</div>" ) ;
     var $content = $( buf.join("") ) ;
+    makeSnippetHotHover( $content.children( "img.snippet" ) ) ;
     fixup_external_links( $content, true ) ;
     var $entry = $sortable2.sortable2( "add", {
         content: $content,

vasl_templates/webapp/static/vo2.js

@@ -139,7 +139,7 @@ function _do_edit_ob_vo( $entry, player_no, vo_type )
         dialogClass: "edit-vo",
         title: "Edit "+vo_type,
         minWidth: 550,
-        minHeight: 470,
+        minHeight: 500,
         modal: true,
         create: function() {
             // initialize the dialog

vasl_templates/webapp/templates/edit-vo-dialog.html

@@ -3,11 +3,8 @@
 <div class="header"></div>
 
 <div class="capabilities">
-    <div class="fieldset-legend">
-        Capabilities:
-        <div style="float:right;"> <input type="checkbox" class="elite">&nbsp;Elite </input> </div>
-        <br clear="all">
-    </div>
+    <div style="float:right;"> <input type="checkbox" class="elite">&nbsp;Elite </input> </div>
+    <div class="fieldset-legend"> Capabilities: </div>
     <div class="fieldset">
         <ul id="vo_capabilities-sortable" class="sortable"></ul>
         <div class="footer">

vasl_templates/webapp/templates/lfa.html

@@ -57,8 +57,8 @@
     <button class="player-colors" style="display:flex;">
         <img src="{{url_for('static',filename='images/lfa/player-colors.png')}}" style="height:1em;"> <span style="display:inline-block;margin-left:0.25em;">Colors</span>
     </button>
-    <button class="download" style="display:flex;" title="Download the data">
-        <img src="{{url_for('static',filename='images/lfa/download.png')}}" style="height:1.5em;">
+    <button class="download" style="display:flex;" title="Download the raw data">
+        <img src="{{url_for('static',filename='images/lfa/download.png')}}" style="height:1.65em;">
     </button>
 </div>
 

vasl_templates/webapp/templates/program-info-content.html

@@ -26,33 +26,33 @@
     <td class="val"> {%if VASL_REAL_VERSION%} {{VASL_REAL_VERSION}} {%else%} <span class="na"> n/a </span> {%endif%}
          {%if VASL_MOD%} <span class="extra path"> {{VASL_MOD}} </span> {%endif%}
     <tr> <td class="key"> VASL extensions:
-         <td class="val path"> {%if VASL_EXTNS_DIR%} {{VASL_EXTNS_DIR}} {%else%} - {%endif%}
+        <td class="val"> <span class="path"> {%if VASL_EXTNS_DIR%} {{VASL_EXTNS_DIR}} {%else%} - {%endif%} </span>
     <tr> <td class="key"> VASL boards:
-         <td class="val path"> {%if BOARDS_DIR%} {{BOARDS_DIR}} {%else%} - {%endif%}
+        <td class="val"> <span class="path"> {%if BOARDS_DIR%} {{BOARDS_DIR}} {%else%} - {%endif%} </span>
 </table>
 
 <table>
     <tr> <td class="key"> Java:
-         <td class="val path"> {%if JAVA_PATH%}
+        <td class="val"> <span class="path"> {%if JAVA_PATH%}
             {{JAVA_PATH}}
             {%if JAVA_VERSION%} <span class="info"> ({{JAVA_VERSION}}) </span> {%endif%}
         {%else%}
             -
-        {%endif%}
+        {%endif%} </span>
     <tr> <td class="key"> Web driver:
-         <td class="val path"> {%if WEBDRIVER_PATH%} {{WEBDRIVER_PATH}} {%else%} - {%endif%}
+        <td class="val"> <span class="path"> {%if WEBDRIVER_PATH%} {{WEBDRIVER_PATH}} {%else%} - {%endif%} </span>
 </table>
 
 <table>
     <tr> <td class="key"> Chapter H:
-         <td class="val path"> {%if CHAPTER_H_NOTES_DIR%} {{CHAPTER_H_NOTES_DIR}} {%else%} - {%endif%}
+        <td class="val"> <span class="path"> {%if CHAPTER_H_NOTES_DIR%} {{CHAPTER_H_NOTES_DIR}} {%else%} - {%endif%} </span>
     <tr> <td class="key"> User files:
-         <td class="val path"> {%if USER_FILES_DIR%} {{USER_FILES_DIR}} {%else%} - {%endif%}
+        <td class="val"> <span class="path"> {%if USER_FILES_DIR%} {{USER_FILES_DIR}} {%else%} - {%endif%} </span>
 </table>
 
-<table>
+<table class="downloads">
     <tr> <td class="key" colspan="2"> Scenario downloads:
-    <tr> <td class="key"> <ul> <li> ASA: </ul>
+    <tr> <td class="key"> <ul> <li> ASL Scenario Archive: </ul>
          <td class="val"> {%if LAST_ASA_SCENARIO_INDEX_DOWNLOAD_TIME%}
               {{LAST_ASA_SCENARIO_INDEX_DOWNLOAD_TIME}}
               {%if LAST_ASA_SCENARIO_INDEX_GENERATED_AT%} <span class="info"> (generated {{LAST_ASA_SCENARIO_INDEX_GENERATED_AT}}) </span> {%endif%}

vasl_templates/webapp/templates/scenario-card.html

@@ -88,7 +88,7 @@
         <tr class="attacker"> <td class="comments" colspan="4">
     {%endif%}
     <tr> <td colspan="4" class="date-warning" style="display:none;">
-        <img src="{{url_for('static',filename='images/warning.gif')}}">
+        <img src="{{url_for('static',filename='images/warning.png')}}">
         Based on a scenario date of <span class="val"></span>.
 </table>
 {%endif%}

vasl_templates/webapp/templates/scenario-upload-dialog.html

@@ -8,11 +8,11 @@
 
 <div class="auth">
 <div class="row">
-    <label for="user"> User name: </label> <input class="user" type="text" size="20">
+    <label for="user"> User name: </label> <input class="user" type="text" size="15">
     <span class="hint"> (register for an account <a href="https://www.aslscenarioarchive.com/register.php">here</a>) <span>
 </div>
 <div class="row">
-    <label for="token"> API token: </label> <input class="token" type="text" size="20">
+    <label for="token"> API token: </label> <input class="token" type="text" size="35">
     <span class="hint"> (get this from your account's <em>My Page</em>) </span>
 </div>
 </div>
@@ -38,7 +38,7 @@
 <div class="disclaimer">
 Your <em>vasl-templates</em> setup will also be uploaded.
 <div style="margin-top:0.5em;display:flex;">
-    <img src="{{url_for('static',filename='images/warning.gif')}}" style="height:1.5em;margin:0.1em 0.5em 0 0;">
+    <img src="{{url_for('static',filename='images/warning.png')}}" style="height:1.5em;margin:0.1em 0.5em 0 0;">
     <div> For copyright reasons, some information will be removed from the uploads (e.g. Victory Conditions, SSR's). If you are sure that the scenario is <em>not</em> copyrighted, you can upload the complete files at the <a href="" class="asa-scenario">ASL Scenario Archive</a>. </div>
 </div>
 </div>

vasl_templates/webapp/templates/tabs-ob1.html

@@ -44,8 +44,8 @@
                     <button class="generate" data-id="baz-cpva17">BAZ Type 51</button>
                     <button class="generate" data-id="piat">PIAT</button>
                     <button class="generate" data-id="thh">THH</button>
-                    <button class="edit-template" data-id="ob_note"></button>
                 </span>
+                <button class="edit-template" data-id="ob_note" style="margin-left:0.5em;"></button>
             </div>
         </div>
     </fieldset>

vasl_templates/webapp/templates/tabs.html

@@ -10,7 +10,7 @@
     <li> <a href="#tabs-ob1"></a>
     <li> <a href="#tabs-ob2"></a>
     <li> <a href="#tabs-extras"></a>
-    <li style="display:none;"> <a href="#tabs-help"><img src="{{url_for('static',filename='images/help.png')}}">Help</a>
+    <li style="display:none;"> <a href="#tabs-help"><img src="{{url_for('static',filename='images/menu/help.png')}}">Help</a>
 </ul>
 
 {%include "tabs-scenario.html"%}

vasl_templates/webapp/tests/test_files.py

@@ -57,7 +57,7 @@ def test_remote_file_server( webapp ):
 
     # do the tests
     with webapp.test_request_context():
-        do_test( "hint.gif" )
+        do_test( "hint.png" )
         do_test( "flags/german.png" )
 
 # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

vasl_templates/webapp/tests/test_scenario_search.py

@@ -947,7 +947,7 @@ def _check_warnings( expected, expected2 ):
 def _get_scenario_info():
     """Open the scenario info and unload the information."""
     btn = find_child( "button.scenario-search" )
-    assert find_child( "img", btn ).get_attribute( "src" ).endswith( "/info.gif" )
+    assert find_child( "img", btn ).get_attribute( "src" ).endswith( "/scenario-info.png" )
     btn.click()
     wait_for_elem( 2, "#scenario-info-dialog" )
     card = _unload_scenario_card()