tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changed result layout

Browse Source
This commit is contained in:
Timo Volkmann 2020-06-25 11:58:59 +02:00
parent cea47548bc
commit 6be202a0d2
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/components/result/result.component.html
View File

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

23
frontend/src/app/components/result/result.component.scss
View File

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