Skip to content

Commit ef641d4

Browse files
ivilaropivilarop
authored
Merge pull request #764 from IT-Academy-BCN/bugfix/#178-challenge-card-background
Fix (challenge-card): The background of the cards turns all into the status color instead of just the top
2 parents f5a6eb3 + 390bfd2 commit ef641d4

File tree

5 files changed

+83
-68
lines changed

5 files changed

+83
-68
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
44
and this project adheres to
55
[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

7+
### [ita-challenges-frontend-3.27.4-RELEASE] - 2026-02-18
8+
9+
### Fixed
10+
- Challenge card layout div to show the status of the challenge
11+
712
### [ita-challenges-frontend-3.27.3-RELEASE] - 2026-02-23
813

914
### Changed
1015
- Display related challenge cards in a responsive grid layout (3 columns on desktop, 1 column on mobile).
16+
1117
### [ita-challenges-frontend-3.27.2-RELEASE] - 2026-02-23
1218

1319
### Fixed
@@ -19,6 +25,7 @@ and this project adheres to
1925
- Fixed environment.ts and environment.prod.ts route for solution submission and retrieval.
2026

2127
### [ita-challenges-frontend-3.27.0-RELEASE] - 2026-02-16
28+
2229
### Added
2330
- Feedback to user when saving solution.
2431

@@ -72,7 +79,7 @@ and this project adheres to
7279
### [ita-challenges-frontend-3.22.0-RELEASE] - 2026-02-11
7380

7481
### Changed
75-
- Changed the challenge card layout and style to fit the new design
82+
- Changed the challenge card layout and style to fit the new design
7683

7784
### [ita-challenges-frontend-3.21.0-RELEASE] - 2026-02-12
7885

‎conf/.env.CI.dev‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
MICROSERVICE_DEPLOY=ita-challenges-frontend
2-
MICROSERVICE_VERSION=3.27.3-RELEASE
2+
MICROSERVICE_VERSION=3.27.4-RELEASE

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ita-challenges-frontend",
3-
"version": "3.27.3-RELEASE",
3+
"version": "3.27.4-RELEASE",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve --proxy-config proxy.conf.dev.json",

‎src/app/shared/components/challenge-card/challenge-card.component.html‎

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,68 @@
55
[class.status-incomplete]="solutionStatus === SolutionStatus.SHOW_SOLUTION"
66
[routerLink]="['/ita-challenge/challenges/', id]"
77
>
8-
<div>
9-
@for (language of languages; track $index) {
10-
<img
11-
class="icon"
12-
[src]="
13-
'assets/img/icon/language_icon_' + language.language_name + '.svg'
14-
"
15-
[alt]="language.language_name + ' icon'"
16-
/>
17-
}
18-
</div>
19-
<div class="title">{{ title }}</div>
20-
<div class="description">{{ descriptionPreview }}</div>
21-
<app-tags [tags]="tags"></app-tags>
22-
<!-- STATS WRAPPER -->
23-
<div class="stats-info-wrapper">
24-
<!-- DIFFICULTY LEVEL -->
25-
<app-difficulty-level [level]="level"></app-difficulty-level>
26-
<!-- TIMES SOLVED -->
27-
<div
28-
class="times-solved"
29-
[ngbTooltip]="'tooltips.startedFinished' | translate"
30-
>
31-
<div>
8+
<div class="challenge-list-element-content">
9+
<div>
10+
@for (language of languages; track $index) {
3211
<img
33-
src="assets/img/icon/times-performed.svg"
34-
alt="Times performed"
12+
class="icon"
13+
[src]="
14+
'assets/img/icon/language_icon_' + language.language_name + '.svg'
15+
"
16+
[alt]="language.language_name + ' icon'"
3517
/>
36-
</div>
37-
<span>{{ challenge_timesSolved }}</span>
18+
}
3819
</div>
39-
<!-- LIKES button -->
40-
<button
41-
class="likes-button"
42-
[ngbTooltip]="'tooltips.favorites' | translate"
43-
(click)="toggleFavorite($event)"
44-
>
45-
<div>
46-
<img
47-
*ngIf="!isFavorite"
48-
src="assets/img/icon/heart.svg"
49-
alt="Favorites"
50-
/>
51-
<img
52-
*ngIf="isFavorite"
53-
src="assets/img/icon/heart-filled.svg"
54-
alt="Favorites"
55-
/>
20+
<div class="title">{{ title }}</div>
21+
<div class="description">{{ descriptionPreview }}</div>
22+
<app-tags [tags]="tags"></app-tags>
23+
<!-- STATS WRAPPER -->
24+
<div class="stats-info-wrapper">
25+
<!-- DIFFICULTY LEVEL -->
26+
<app-difficulty-level [level]="level"></app-difficulty-level>
27+
<!-- TIMES SOLVED -->
28+
<div
29+
class="times-solved"
30+
[ngbTooltip]="'tooltips.startedFinished' | translate"
31+
>
32+
<div>
33+
<img
34+
src="assets/img/icon/times-performed.svg"
35+
alt="Times performed"
36+
/>
37+
</div>
38+
<span>{{ challenge_timesSolved }}</span>
39+
</div>
40+
<!-- LIKES button -->
41+
<button
42+
class="likes-button"
43+
[ngbTooltip]="'tooltips.favorites' | translate"
44+
(click)="toggleFavorite($event)"
45+
>
46+
<div>
47+
<img
48+
*ngIf="!isFavorite"
49+
src="assets/img/icon/heart.svg"
50+
alt="Favorites"
51+
/>
52+
<img
53+
*ngIf="isFavorite"
54+
src="assets/img/icon/heart-filled.svg"
55+
alt="Favorites"
56+
/>
57+
</div>
58+
<div class="txt">{{ favorites_count }}</div>
59+
</button>
60+
<!-- CREATION DATE -->
61+
<div
62+
class="creation-date"
63+
*ngIf="creation_date"
64+
[ngbTooltip]="'tooltips.creationDate' | translate"
65+
>
66+
<img src="assets/img/icon/date.svg" alt="Date" />
67+
<div class="txt">{{ creation_date | customDate }}</div>
5668
</div>
57-
<div class="txt">{{ favorites_count }}</div>
58-
</button>
59-
<!-- CREATION DATE -->
60-
<div
61-
class="creation-date"
62-
*ngIf="creation_date"
63-
[ngbTooltip]="'tooltips.creationDate' | translate"
64-
>
65-
<img src="assets/img/icon/date.svg" alt="Date" />
66-
<div class="txt">{{ creation_date | customDate }}</div>
6769
</div>
68-
</div>
6970

7071
<!-- Old content pending to validate with product what is needed-->
7172
<!-- <div class="info d-flex align-items-start justify-content-between">
@@ -115,4 +116,5 @@
115116
/>
116117
</div>
117118
</button> -->
119+
</div>
118120
</article>

‎src/app/shared/components/challenge-card/challenge-card.component.scss‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@
22

33
.challenge-list-element {
44
border-radius: 1rem;
5-
padding: 2rem;
6-
display: flex;
7-
flex-direction: column;
8-
gap: 1rem;
5+
padding-top: 0.4rem;
96
min-height: 110px;
107
cursor: pointer;
11-
background-color: $white;
128
max-width: 24rem;
9+
background-color: $white;
1310
color: $gray-3;
14-
margin: 0 auto;
1511

1612
&:hover {
1713
transform: translateY(-5px);
@@ -20,15 +16,25 @@
2016
}
2117

2218
&.status-ended {
23-
background-color: #1e7d34;
19+
background-color: $success;
2420
}
2521
&.status-progress {
26-
background-color: #efa81b;
22+
background-color: $warning;
2723
}
2824
&.status-incomplete {
29-
background-color: rgb(84, 68, 91);
25+
background-color: $gray-2;
3026
}
3127

28+
}
29+
30+
.challenge-list-element-content {
31+
padding: 2rem;
32+
border-radius: 1rem;
33+
background-color: $white;
34+
display: flex;
35+
flex-direction: column;
36+
gap: 1rem;
37+
3238
.title {
3339
display: flex;
3440
flex-direction: column;

0 commit comments

Comments
 (0)