Update search page

razonyang · Nov 17, 2020 · 5f02bd0 · 5f02bd0
1 parent 9406ebc
commit 5f02bd0
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 10 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/js/search.js b/assets/js/search.js
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
@@ -55,7 +55,7 @@ <h2 class="search-result-title mb-4">
       {{- end -}}
     </div>
     <div class="search-result-meta mb-3">
-      <span class="search-result-score"><i class="fas fa-fw fa-star"></i> {{ printf "{{score}}%%" }}</span>
+      <span class="search-result-score"><i class="fas fa-fw fa-star"></i> {{ printf "{{{score}}}" }}</span>
     </div>
   </div>
 </script>
@@ -66,6 +66,6 @@ <h2 class="search-result-title mb-4">
   {{ i18n "search_no_results" }}
 </script>
 <script type="text/html" id="templateStat">
-  {{ i18n "search_stat" (dict "Total" "<span class=\"search-keyword\">{{total}}</span>") | safeHTML }}
+  {{ i18n "search_stat" (dict "Total" "<span class=\"text-accent\">{{total}}</span>") | safeHTML }}
 </script>
 {{ end }}
diff --git a/src/scss/_color.scss b/src/scss/_color.scss
@@ -91,3 +91,9 @@ $yellow-primary-light: #ffb04c;
 .bg-yellow {
   background-color: #{$yellow-primary} !important;
 }
+
+/* text colors */
+
+.text-accent {
+  color: var(--hbs-accent) !important;
+}
diff --git a/src/search/index.scss b/src/search/index.scss
@@ -1,7 +1,3 @@
-.search-keyword {
-  color: var(--hbs-accent);
-}
-
 .search-stat,
 .search-result-content {
   color: var(--hbs-secondary-text);

diff --git a/src/search/search.ts b/src/search/search.ts
@@ -23,7 +23,7 @@ export class Search {
 
   public highlightOptions = {
     element: 'span',
-    className: 'search-keyword',
+    className: 'text-accent',
   };
 
   public tmplMissingKeywords: string;
@@ -194,7 +194,7 @@ export class Search {
         categories: result.item.categories,
         tags: result.item.tags,
         series: result.item.series,
-        score: (100*(1-result.score)).toFixed(2),
+        score: instance.formatScore(result.score),
         url: function() {
           return instance.normalizeTaxonomy;
         }
@@ -209,6 +209,15 @@ export class Search {
     this.page += 1;
   }
 
+  formatScore(score) {
+    score = 100*(1-score)
+    if (score < 90) {
+      return score.toFixed(2) + '%'
+    }
+
+    return `<span class="text-accent">${score.toFixed(2)}%</span>`
+  }
+
   highlight(id, titleKeywords, contentKeywords) {
     const titleHighlighter = new Mark(document.querySelectorAll(`#${id} .search-result-title`));
     titleHighlighter.mark(titleKeywords, this.highlightOptions);