From 37665dda7f5a3ab5e67ecd472f43fe8be3b9b781 Mon Sep 17 00:00:00 2001
From: Taka <taka@vm-linux-dev>
Date: Wed, 30 Jun 2021 00:14:55 +1000
Subject: [PATCH] Tweaked the layout of index search result headers.

---
 asl_rulebook2/webapp/static/SearchResult.js      | 10 ++++++----
 asl_rulebook2/webapp/static/css/SearchResult.css |  7 ++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/asl_rulebook2/webapp/static/SearchResult.js b/asl_rulebook2/webapp/static/SearchResult.js
index 78922f2..ad1f96d 100644
--- a/asl_rulebook2/webapp/static/SearchResult.js
+++ b/asl_rulebook2/webapp/static/SearchResult.js
@@ -20,10 +20,12 @@ gMainApp.component( "index-sr", {
       :class=makeBorderColor() class="caption"
     >
         <collapser @click=onToggleRulerefs ref="collapser" />
-        <img v-if=iconUrl :src=iconUrl :style="{cursor: this.primaryTarget ? 'pointer' : null}"
-          @click=onClickIcon
-          class="icon"
-        />
+        <div class="icon-wrapper">
+            <img v-if=iconUrl :src=iconUrl :style="{cursor: this.primaryTarget ? 'pointer' : null}"
+              @click=onClickIcon
+              class="icon"
+            />
+        </div>
         <span v-if=sr.title v-html=sr.title :style="{cursor: this.primaryTarget ? 'pointer' : null}"
           @click=onClickIcon
           class="title"
diff --git a/asl_rulebook2/webapp/static/css/SearchResult.css b/asl_rulebook2/webapp/static/css/SearchResult.css
index 5ae4996..00af6e0 100644
--- a/asl_rulebook2/webapp/static/css/SearchResult.css
+++ b/asl_rulebook2/webapp/static/css/SearchResult.css
@@ -1,12 +1,13 @@
 #search-results .sr { padding: 5px ; }
+#search-results .sr>.caption .icon-wrapper { height: 18px ; float: left ; display: flex ; align-items: center ; }
+#search-results .sr>.caption img.icon { width: 35px ; max-height: 14px ; float: left ; margin-right: 5px ; }
 #search-results .sr p { margin-top: 3px ; }
 #search-results .sr .note { font-size: 90% ; font-style: italic ; color: #666 ; }
 
-#search-results .index-sr>.caption { padding: 3px 6px ; border-radius: 3px ; }
-#search-results .index-sr>.caption img.icon { height: 14px ; float: left ; margin: 2px 4px 0 0 ; }
+#search-results .index-sr>.caption { position: relative ; padding: 3px 25px 3px 6px ; border-radius: 3px ; }
 #search-results .index-sr>.caption .title { font-weight: bold ; }
 #search-results .index-sr>.caption .subtitle { padding-left: 6px ; font-size: 80% ; font-style: italic ; }
-#search-results .index-sr>.caption .collapser { height: 16px ; float: right ; margin: 1px 2px 1px 5px ; }
+#search-results .index-sr>.caption .collapser { height: 16px ; position: absolute ; top: 4px ; right: 4px ; }
 #search-results .index-sr .body { padding: 2px 5px 0 5px ; }
 #search-results .index-sr .see-also { font-style: italic ; cursor: pointer ; }
 #search-results .index-sr img.toggle-rulerefs { float: right ; margin: 0 0 0.25em 0.25em ; height: 1.25em ; cursor: pointer ; }