changed result layout

frontend/src/app/components/result/result.component.html

@@ -1,6 +1,6 @@
 <div class="result-mat-card">
   <img alt="Picture of {{result.name}}" class="result-img"
-       src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
+    src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
   <div class="result-title">
     <div class="result-header">
       <span class="result-name">{{result.name}}<span *ngIf="debug"> ({{result.score}})</span></span>
@@ -16,8 +16,8 @@
       <span matTooltip="Total accommodation">{{result.total_accommodation_costs|number:'1.2-2'}}€</span>
     </div>
     <mat-divider *ngIf="result.scores.length > 0"></mat-divider>
-    <div class="searched-params">
-      <div class="result-desc">Estimated values for your chosen travel dates</div>
+    <div *ngIf="result.scores.length > 0" class="searched-params">
+
       <table>
         <tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}">
           <td>
@@ -44,5 +44,7 @@
         </tr>
       </table>
     </div>
+    <mat-divider></mat-divider>
+    <div class="result-desc">Estimated values for your chosen travel dates</div>
   </div>
-</div>
+</div>

frontend/src/app/components/result/result.component.scss

@@ -4,33 +4,33 @@
   flex-direction: column;
   cursor: pointer;
 
-  > .result-img {
+  >.result-img {
     flex: 0 0 auto;
     width: 100%;
     height: 15rem;
     object-fit: cover;
   }
 
-  > .result-title {
+  >.result-title {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-bottom: 0.25rem;
 
-    > .result-header {
+    >.result-header {
       flex: 1 1 auto;
       display: flex;
       flex-direction: row;
       margin: 0.25rem 0;
       align-items: center;
 
-      > .result-name {
+      >.result-name {
         font-weight: bold;
         font-size: larger;
         margin-right: 0.25rem;
       }
 
-      > .result-country {
+      >.result-country {
         text-transform: uppercase;
         font-size: small;
         margin-right: 0.25rem;
@@ -41,26 +41,26 @@
     }
   }
 
-  > .result-details {
+  >.result-details {
 
     display: flex;
     flex-direction: column;
 
-    > .total-accommodation {
+    >.total-accommodation {
       margin: 0.5rem 0;
       display: flex;
       flex-direction: row;
       align-items: center;
       font-weight: bold;
 
-      > mat-icon {
+      >mat-icon {
         margin-right: 0.5rem;
         margin-left: 3px;
       }
 
     }
 
-    > .searched-params {
+    >.searched-params {
       margin: 0.5rem 0
     }
 
@@ -69,10 +69,11 @@
     }
 
     .result-desc {
+      color: #b5b9be;
       text-transform: uppercase;
       font-size: small;
       margin-right: 0.25rem;
-      margin-bottom: 0.5rem;
+      margin-top: 0.5rem;
       overflow-y: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -95,7 +96,7 @@
     margin-right: 1rem;
   }
 
-  > mat-icon {
+  >mat-icon {
     margin-right: 0.5rem;
   }
-}
+}