Style search

src/app/app.component.html

@@ -41,8 +41,17 @@
 
     <div *ngIf="results.length > 0">
 
-      <div *ngFor="let result of results">
-        {{ result.url }} ({{ result.tfidf }})
+      <div *ngFor="let result of results" class="results">
+        <a href="{{ result.url }}">
+          <div class="result">
+            <div>
+              {{ result.url }}
+            </div>
+            <div>
+              Ranking {{ round(100 * result.tfidf) }}
+            </div>
+          </div>
+        </a>
       </div>
 
     </div>

src/app/app.component.less

@@ -104,6 +104,27 @@
     }
   }
 
+  .results {
+    margin-top: 30px;
+
+    a {
+      text-decoration: none;
+      color: #000;
+
+      .result {
+        padding: 10px 20px;
+        display: flex;
+        justify-content: space-between;
+        background: #FFF;
+        border-radius: 15px;
+        margin-bottom: 10px;
+        border: 1px solid rgba(200, 200, 200, 0.3);
+      }
+
+    }
+
+  }
+
 }
 
 .main-container.top {

src/app/app.component.ts

@@ -35,4 +35,8 @@ export class AppComponent {
     }
   }
 
+  public round( value: number ) {
+    return Math.round( value * 100 ) / 100;
+  }
+
 }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  baseUrl: 'https://us-central1-pq-man.cloudfunctions.net/search?s=',
+  baseUrl: 'http://142.4.212.26:8080/search?s=',
 };
 
 /*