Tightened up the presentation of lists in the UI and snippets.

vasl_templates/webapp/data/default-template-pack/common.css

@@ -6,10 +6,12 @@ body {
 p { margin-top: 5px ; margin-bottom: 0 ; }
 
 ul { margin: 0 ; padding: 0 0 0 10px ; }
+ol { margin: 0 ; padding: 0 0 0 21px ; }
 {%if CUSTOM_LIST_BULLETS%}
 ul { list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
 ul ul { list-style-image: url("{{IMAGES_BASE_URL}}/bullet2.png") ; }
 ul ul ul { list-style-image: url("{{IMAGES_BASE_URL}}/bullet3.png") ; }
+ol { list-style-image: none ; }
 {%endif%}
 
 td { margin: 0 ; padding: 0 ; }

vasl_templates/webapp/data/default-template-pack/ob_vo_note.css

@@ -1,4 +1,4 @@
-/* NOTE: This CSS is split out into a separate file so we can apply it when generating Chapter H notes as images. */
+{# NOTE: This CSS is split out into a separate file so we can apply it when generating Chapter H notes as images. #}
 
 img.piece { float: left ; margin-right: 0.5em ; }
 
@@ -22,3 +22,6 @@ img.piece { float: left ; margin-right: 0.5em ; }
 table.layout td { padding: 0 5px ; }
 
 .content .rf { display: none ; }
+
+{# FUDGE! VASSAL and modern browsers differ on how much left margin there should be :-/ The default setting works on VASSAL, but because I serve Chapter H as images (which get generated in a modern browser), we change things to suit that. Note that there are other places where unordered lists are used (e.g. multi-applicable notes), but since those are typically only shown in VASSAL, we let them use the VASSAL-preferred setting. #}
+.content ul { margin-left: 5px ; }

vasl_templates/webapp/static/css/html-editor.css

@@ -8,9 +8,11 @@
 .trumbowyg-button-group button::after { top: 25px !important ; }
 
 /* custom bullets for the editor */
-.trumbowyg-editor ul { margin: 0 0 0 0.85em ; list-style-image: url("../images/bullet.png") ; }
-.trumbowyg-editor ul ul { margin: 0 0 0 0.85em ; list-style-image: url("../images/bullet2.png") ; }
-.trumbowyg-editor ul ul ul { margin: 0 0 0 0.85em ; list-style-image: url("../images/bullet3.png") ; }
+.trumbowyg-editor ul { margin: 0 0 0 0.9em ; }
+.trumbowyg-editor ol { margin: 0 0 0 1.8em ; list-style-image: none ; }
+.trumbowyg-editor ul { list-style-image: url("../images/bullet.png") ; }
+.trumbowyg-editor ul ul { list-style-image: url("../images/bullet2.png") ; }
+.trumbowyg-editor ul ul ul { list-style-image: url("../images/bullet3.png") ; }
 
 /* make tables visible in the editor */
 .trumbowyg-editor table.table { width: auto ; }

vasl_templates/webapp/static/css/sortable.css

@@ -5,13 +5,18 @@ 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 0 15px ; float: right ; }
-.sortable li img.aslrb2 { height: 1.25em ; position: absolute ; bottom: -2px ; right: -2px ; opacity: 0.6 ; }
+.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 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 */
+/* fixup presentation of lists in sortable2 content */
+.sortable ul { margin: 0 0 0 0.9em ; }
+.sortable ol { margin: 0 0 0 1.8em ; list-style-image: none ; }
+.sortable ul { list-style-image: url("../images/bullet.png") ; }
+.sortable ul ul { list-style-image: url("../images/bullet2.png") ; }
+.sortable ul ul ul { list-style-image: url("../images/bullet3.png") ; }
 
 .sortable-hint { width: 100% ; height: calc(100% - 1.5em) ; color: #666 ; }
 .sortable-hint .instructions { margin: 1em 0 0 1em ; font-size: 80% ; font-style: italic ; color: #888 ; }