style(search): display the score

razonyang · Aug 17, 2022 · e8ab7ab · e8ab7ab
1 parent d616d65
commit e8ab7ab
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/assets/main/scss/_search.scss b/assets/main/scss/_search.scss
@@ -61,21 +61,22 @@
   }
 }
 
-.search-result-score {
+.search-result-score-rating {
   font-size: 20px;
   position: relative;
+  width: fit-content;
 
   &::before {
     content: "★★★★★";
   }
 
   span {
-    color: var(--#{$prefix}primary);
     left: 0;
     overflow: hidden;
     position: absolute;
 
     &::before {
+      color: gold;
       content: "★★★★★";
     }
   }

diff --git a/assets/main/scss/post/index.scss b/assets/main/scss/post/index.scss
@@ -12,7 +12,7 @@
   font-size: 0.875rem;
   word-break: break-all;
 
-  span {
+  > span {
     &:not(:last-child) {
       margin-right: 0.125rem;
 

diff --git a/assets/search/search.ts b/assets/search/search.ts
@@ -245,7 +245,7 @@ export class Search {
   }
 
   static formatScore(value) {
-    return (100 * (1 - value)).toFixed(0) + '%';
+    return ((1 - value) * 5).toFixed(1);
   }
 
   highlight(id, titleKeywords, contentKeywords) {

diff --git a/assets/search/templates/result.html b/assets/search/templates/result.html
@@ -3,8 +3,12 @@
         <h2 class="card-title search-result-title fs-4 mt-2 mb-1 text-surface"><a href="{{permalink}}">{{title}}</a></h2>
         <p class="text-success user-select-all mb-1 text-nowrap overflow-hidden text-truncate">{{permalink}}</p>
         <div class="post-meta mb-2">
-            <span class="search-result-score text-nowrap overflow-hidden">
-                <span style="width: {{score}}"></span>
+            <span class="search-result-score-wrapper">
+                <span class="search-result-score">{{score}}</span>
+                <span class="search-result-score-rating text-nowrap overflow-hidden">
+                    <span style="width: calc({{score}}/5*100%);">
+                    </span>
+                </span>
             </span>
             <span class="post-lang">{{langName}}</span>
             <span class="post-date">{{date}}</span>