Fixed the layout for the "add sortable entry" buttons.

vasl_templates/webapp/static/css/sortable.css

@@ -1,3 +1,6 @@
+button.sortable-add { vertical-align: top ; height: 26px ; padding: 2px 5px ; }
+img.sortable-add { height: 15px ; }
+
 .sortable { font-size: 80% ; }
 .sortable { list-style-type: none ; margin: 0 ; padding: 0 ; }
 .sortable li {
@@ -12,4 +15,4 @@
 .sortable-hint { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; font-style: italic ; }
 .sortable-hint p { margin-bottom: 1em ; }
 
-.sortable-trash { margin-left: 5px ; height: 2em ;  }
+.sortable-trash { margin-left: 5px ; height: 24px ;  }

vasl_templates/webapp/static/main.js

@@ -262,8 +262,8 @@ $(document).ready( function () {
     $("button.edit-template").click( function() {
         edit_template( $(this).data( "id" ) ) ;
     } ).html( "<div><img src='" + gImagesBaseUrl + "/edit-template.png'>Edit</div>" )
-    .attr( "title", "Edit the template." )
-    .addClass( "ui-button" ) ;
+        .attr( "title", "Edit the template." )
+        .addClass( "ui-button" ) ;
 
     // enable Ctrl-Enter when editing simple notes
     enable_ctrl_enter( $("#edit-simple_note"), "OK" ) ;

vasl_templates/webapp/static/sortable.js

@@ -9,6 +9,9 @@ $.fn.sortable2 = function( action, args )
         "init": function( $sortable2 ) {
             // initialize the sortable2 and support elements
             $sortable2.data( "on_edit", args.edit ) ;
+            var $add_btn = find_helper( $sortable2, "add" ) ;
+            $add_btn.prepend( $( "<div><img src='" + gImagesBaseUrl + "/sortable-add.png' class='sortable-add'> Add</div>" ) )
+                .addClass( "ui-button" ) ;
             var $add = find_helper( $sortable2, "add" ) ;
             $add.click( args.add ) ;
             // handle dragging entries to the trash

vasl_templates/webapp/templates/index.html

@@ -85,7 +85,7 @@
             </div>
             <div class="footer">
                 <div class="l">
-                    <input type="button" id="scenario_notes-add" value="+">
+                    <button id="scenario_notes-add" class="sortable-add"></button>
                     <img id="scenario_notes-trash" class="sortable-trash">
                 </div>
                 <button class="edit-template" data-id="scenario_note"></button>
@@ -101,7 +101,7 @@
             </div>
             <div class="footer">
                 <div class="l">
-                    <input type="button" id="ssr-add" value="+">
+                    <button id="ssr-add" class="sortable-add"></button>
                     <img id="ssr-trash" class="sortable-trash">
                 </div>
                 <label for="SSR_WIDTH">Width:</label>
@@ -125,7 +125,7 @@
             </div>
             <div class="footer">
                 <div class="l">
-                    <input type="button" id="ob_setups-add_1" value="+">
+                    <button id="ob_setups-add_1" class="sortable-add"></button>
                     <img id="ob_setups-trash_1" class="sortable-trash">
                 </div>
                 <button class="edit-template" data-id="ob_setup"></button>
@@ -141,7 +141,7 @@
             </div>
             <div class="footer">
                 <div class="l">
-                    <input type="button" id="ob_notes-add_1" value="+">
+                    <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>
@@ -164,7 +164,7 @@
             </div>
             <div class="footer">
                 <div class="l">
-                    <input type="button" id="vehicles-add_1" value="+">
+                    <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>
@@ -182,7 +182,7 @@
             </div>
             <div class="footer">
                 <div class="l">
-                    <input type="button" id="ordnance-add_1" value="+">
+                    <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>