Fixes flag image scale on contributors page (to be tested)

This commit is contained in:
apapachristou 2020-10-08 23:27:47 +03:00
parent 103f89c0b6
commit 71a270137a
3 changed files with 42 additions and 9 deletions

View File

@ -14,7 +14,6 @@
</div>
</div>
<p *ngIf="listingItems && listingItems.length > 0" class="col-auto header-title">{{(isPublic ? 'GENERAL.TITLES.EXPLORE-PLANS' : 'GENERAL.TITLES.PLANS') | translate}}</p>
<!-- <div *ngIf="listingItems && listingItems.length > 0" class="filter-btn" [style.right]="this.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()"> -->
<div class="filter-btn" [style.right]="this.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar || this.dialog.getDialogById('filters') ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon>

View File

@ -69,34 +69,54 @@
<div class="row title-4">Translators</div>
</div>
<div class="card mt-3 flex-row">
<img class="col-4 flag" alt="Flag of Greece" src="../assets/img/flag-of-greece.png">
<div class="col-4 d-flex justify-content-center align-items-center">
<div class="flag-img-container">
<img class="flag" alt="Flag of Greece" src="../assets/img/flag-of-greece.png">
</div>
</div>
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">Athena Research & Innovation Center</p>
<p class="card-text-2">Dimitra Aglamisi, Elli Papadopoulou</p>
</div>
</div>
<div class="card flex-row">
<img class="col-4 card-img" alt="Flag of Spain" src="../assets/img/flag-of-spain.png">
<div class="col-4 d-flex justify-content-center align-items-center">
<div class="flag-img-container">
<img class="card-img" alt="Flag of Spain" src="../assets/img/flag-of-spain.png">
</div>
</div>
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">Consorcio Madroño</p>
<p class="card-text-2">Lanko López, Juan Corrales Correyero, Fernando González Ballesteros</p>
</div>
</div>
<div class="card flex-row">
<img class="col-4 card-img" alt="Flag of Turkey" src="../assets/img/flag-of-turkey.png">
<div class="col-4 d-flex justify-content-center align-items-center">
<div class="flag-img-container">
<img class="card-img" alt="Flag of Turkey" src="../assets/img/flag-of-turkey.png">
</div>
</div>
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">Turkish Higher Education Council Research Data and Open Data working group</p>
</div>
</div>
<div class="card flex-row">
<img class="col-4 flag" alt="Flag of Austria" src="../assets/img/flag-of-austria.png">
<div class="col-4 d-flex justify-content-center align-items-center">
<div class="flag-img-container">
<img class="flag" alt="Flag of Austria" src="../assets/img/flag-of-austria.png">
</div>
</div>
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">UNIVERSITY OF VIENNA</p>
<p class="card-text-2">Gerda McNeill, Raman Ganguly, Mihaela Hubert</p>
</div>
</div>
<div class="card flex-row">
<img class="col-4 flag" alt="Flag of Slovakia" src="../assets/img/flag-of-slovakia.png">
<div class="col-4 d-flex justify-content-center align-items-center">
<div class="flag-img-container">
<img class="flag" alt="Flag of Slovakia" src="../assets/img/flag-of-slovakia.png">
</div>
</div>
<div class="col-8 card-body pl-0" class="flex-column align-items-center">
<p class="card-text-1">SLOVAK CENTRE FOR SCIENTIFIC AND TECHNICAL INFORMATION</p>
<p class="card-text-2">Silvia Horáková, Richard Rac, Iryna Kuchma</p>

View File

@ -331,7 +331,12 @@ hr {
}
.card-img {
transform: scale(0.5);
width: 100%;
height: auto;
/* -webkit-transform: scale(0.45);
-moz-transform: scale(0.45);
-o-transform: scale(0.45);
transform: scale(0.45); */
}
.card-body {
@ -354,12 +359,21 @@ hr {
opacity: 0.6;
}
.flag-img-container {
width: 6.8rem;
}
.flag {
border: 10px solid #EEEEEE;
border: 5px solid #EEEEEE;
border-radius: 50% !important;
padding-right: 0px !important;
padding-left: 0px !important;
transform: scale(0.45);
width: 100%;
height: auto;
/* -webkit-transform: scale(0.45);
-moz-transform: scale(0.45);
-o-transform: scale(0.45);
transform: scale(0.45); */
}
.ext-link-icon {