SKE-51 SKE-52 changes in competitions list

This commit is contained in:
Przemysław Stawujak 2018-12-13 20:57:45 +01:00
parent d519712c2d
commit dfcb5e97d7
3 changed files with 35 additions and 9 deletions

View File

@ -14,9 +14,13 @@
line-height: 90px; line-height: 90px;
font-size: 25px; font-size: 25px;
border-radius: 25px; border-radius: 25px;
border: 1px solid gray; border: 1px solid white;
color: darkolivegreen; color: darkolivegreen;
text-shadow: 2px 2px 6px ghostwhite; text-shadow: 2px 2px 6px ghostwhite;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }
.flex-item:hover {
box-shadow: 0px 0px 10px #2196F3;
}

View File

@ -7,16 +7,32 @@
} }
.flex-item { .flex-item {
background-color: darkgrey; background-color: #DED4F4;
width: 300px; width: 450px;
margin: 10px; margin: 10px;
text-align: center; text-align: center;
line-height: 90px;
font-size: 20px; font-size: 20px;
border-radius: 25px; border-radius: 5px;
border: 1px solid gray; border: 1px solid gray;
border-left: 10px #739CB9 solid;
color: darkblue; color: darkblue;
text-shadow: 2px 2px 6px ghostwhite; text-shadow: 2px 2px 6px #ab93ab;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }
.flex-item:hover {
box-shadow: 0px 0px 10px #2196F3;
}
.organizer {
font-size: 14px;
color: #f44336;
font-weight: bold;
margin-bottom: 6px;
}
.bottom-flex {
color: white;
background-color: #2196F3;
}

View File

@ -1,5 +1,11 @@
<div class="flex-container" id="competitions-list-area"> <div class="flex-container" id="competitions-list-area">
<div class="flex-item" (click)="goToDetail(competition)" *ngFor="let competition of (competitionsList | filterClasses : [2, 6])"> <div class="flex-item" (click)="goToDetail(competition)" *ngFor="let competition of (competitionsList | filterClasses : [1, 8])">
{{ competition.name }} <p><u>{{ competition.name }}</u></p>
<div class="organizer">Organizowany przez: {{ competition.creatorName }}</div>
<div class="bottom-flex">
<p>Czas trwania: {{ competition.startDate | date:"dd/MM/yyyy" }} - {{ competition.endDate | date:"dd/MM/yyyy" }}</p>
<p>Przedział klasowy: {{ competition.minClass }}-{{ competition.maxClass }}</p>
</div>
</div> </div>
</div> </div>