Changed the presentation of ruleid's and ruleref's.

asl_rulebook2/webapp/static/SearchResult.js

@@ -31,12 +31,18 @@ gMainApp.component( "index-sr", {
             </span>
         </div>
         <div v-if=sr.ruleids class="ruleids" >
-            <ruleid v-for="rid in sr.ruleids" :csetId=sr.cset_id :ruleId=rid :key=rid />
+            <ruleid v-for="(rid,rno) in sr.ruleids" :key=rid
+              :csetId=sr.cset_id :ruleId=rid
+              :delim="''" :sep="rno < sr.ruleids.length-1 ? ',' : ''"
+            />
         </div>
         <ul v-if=sr.rulerefs class="rulerefs" >
             <li v-for="rref in sr.rulerefs" v-show=showRuleref(rref) :key=rref >
                 <span v-if=rref.caption class="caption" v-html=fixupHilites(rref.caption) />
-                <ruleid v-for="rid in rref.ruleids" :csetId=sr.cset_id :ruleId=rid :key=rid />
+                <ruleid v-for="rid in rref.ruleids" :key=rid
+                  :csetId=sr.cset_id :ruleId=rid
+                  :delim="'[]'"
+                />
             </li>
         </ul>
     </div>
@@ -174,14 +180,15 @@ gMainApp.component( "asop-entry-sr", {
 
 gMainApp.component( "ruleid", {
 
-    props: [ "csetId", "ruleId" ],
+    // FUDGE! Can't get Vue to do the spacing right, so we pass in the delimiters and separator :-/
+    props: [ "csetId", "ruleId", "delim", "sep" ],
     data() { return {
         cdocId: null, ruleid: null,
         title: null,
     } ; },
 
     // NOTE: This bit of HTML is sensitive to spaces :-/
-    template: `<span class="ruleid" :class="{unknown:!ruleid}">[<a v-if=ruleid @click=onClick :title=title>{{ruleId}}</a><span v-else>{{ruleId}}</span>]</span>`,
+    template: `<span class="ruleid" :class="{unknown:!ruleid}">{{delim[0]}}<a v-if=ruleid @click=onClick :title=title>{{ruleId}}</a><span v-else>{{ruleId}}</span>{{delim[1]}}{{sep}}</span>`,
 
     created() {
         // check if the rule is one we know about

asl_rulebook2/webapp/static/css/SearchResult.css

@@ -7,13 +7,12 @@
 #search-results .index-sr .body { padding: 2px 5px 0 5px ; }
 #search-results .index-sr .content { color: #444 ; }
 #search-results .index-sr .see-also { color: #444 ; font-style: italic ; cursor: pointer ; }
-#search-results .index-sr .see-also a { border-bottom: 1px dotted #888 ; }
 #search-results .index-sr img.toggle-rulerefs { float: right ; margin: 0 0 0.25em 0.25em ; height: 1.25em ; cursor: pointer ; }
 #search-results .index-sr ul.rulerefs .caption { padding-right: 0.5em ; }
 #search-results .index-sr ul.rulerefs .ruleid { font-size: 80% ; }
-#search-results .index-sr .ruleid { margin-right: 0.25em ; font-style: italic ; color: #444 ; }
+#search-results .index-sr .ruleid { margin-right: 0.25em ; font-style: italic ; color: #888 ; }
 #search-results .index-sr .ruleid.unknown {  color: #888 ; }
-#search-results .index-sr .ruleid a { cursor: pointer ; }
+#search-results .index-sr .ruleid a { color: red ; cursor: pointer ; }
 
 /* nb: the real ASOP background color is #b72754, but it's quite dark */
 #search-results .asop-entry-sr .caption { padding: 3px 6px ; font-weight: bold ; border-radius: 3px ; background: #f6edda ; }

asl_rulebook2/webapp/static/css/global.css

@@ -12,7 +12,7 @@ ul, ol { margin-left: 15px ; }
 /* content */
 .hilite { padding: 0 2px ; background: #ffa ; }
 .exc { font-style: italic ; color: #666 ; }
-.auto-ruleid { color:red; border-bottom:1px dotted red; cursor: pointer ; }
+.auto-ruleid { color: red ; cursor: pointer ; }
 
  /* notification balloons */
 .growl { cursor: pointer ; }

asl_rulebook2/webapp/tests/test_search.py

@@ -324,8 +324,11 @@ def unload_search_results():
         ruleids = []
         for elem in find_children( ".ruleid", parent ):
             ruleid = unload_sr_text( elem )
-            assert ruleid.startswith( "[" ) and ruleid.endswith( "]" )
-            ruleids.append( ruleid[1:-1] )
+            if ruleid.startswith( "[" ) and ruleid.endswith( "]" ):
+                ruleid = ruleid[1:-1]
+            if ruleid.endswith( "," ):
+                ruleid = ruleid[:-1]
+            ruleids.append( ruleid )
         if ruleids:
             result[key] = ruleids