Skip to content

Commit bd0a038

Browse files
JeyffreyJeyffrey
committed
refactor(mon-pix): improve scorecard-details page style
1 parent 2e514d0 commit bd0a038

File tree

7 files changed

+162
-348
lines changed

7 files changed

+162
-348
lines changed

‎mon-pix/app/components/scorecard-details.hbs

+61-54
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<div>
2-
<div class="scorecard-details__header">
3-
<PixButtonLink @route="authenticated.profile" @variant="tertiary" @iconBefore="arrowLeft">
2+
<section class="scorecard-details__header">
3+
<PixButtonLink
4+
@route="authenticated.profile"
5+
@variant="tertiary"
6+
@iconBefore="arrowLeft"
7+
class="scorecard-details-header__back-button"
8+
>
49
{{t "navigation.back-to-profile"}}
510
</PixButtonLink>
6-
</div>
11+
</section>
712

8-
<div class="scorecard-details__content">
9-
<div class="scorecard-details-content__left">
10-
<div class="scorecard-details-content-left__area scorecard-details-content-left__area--{{@scorecard.area.color}}">
11-
{{@scorecard.area.title}}
12-
</div>
13-
<h1 class="scorecard-details-content-left__name">
13+
<section class="scorecard-details__competence">
14+
<div class="scorecard-details-competence__details">
15+
<h1 class="scorecard-details-competence-details__name">
1416
{{@scorecard.name}}
1517
</h1>
16-
<div class="scorecard-details-content-left__description">
18+
<div class="scorecard-details-competence-details__description">
1719
{{@scorecard.description}}
1820
</div>
1921
</div>
2022

21-
<div class="scorecard-details-content__right">
22-
23+
<div class="scorecard-details-content__score">
2324
{{#if @scorecard.isFinished}}
24-
<div class="scorecard-details-content-right__score-container">
25+
<div class="scorecard-details-content-score__score-container">
2526
{{#if this.displayCongrats}}
2627
<div class="competence-card__congrats">
2728
<div class="competence-card__level competence-card__level--congrats">
@@ -35,7 +36,7 @@
3536
<CircleChart
3637
@value={{@scorecard.capedPercentageAheadOfNextLevel}}
3738
@sliceColor={{@scorecard.area.color}}
38-
@chartClass="circle-chart__content--big"
39+
@chartClass="circle-chart--big"
3940
@thicknessClass="circle--thick"
4041
role="img"
4142
aria-label="{{scorecard-aria-label @scorecard}}"
@@ -47,36 +48,37 @@
4748
</CircleChart>
4849
{{/if}}
4950

50-
<div class="scorecard-details-content-right-score-container__pix-earned">
51+
<div class="pix-earned">
5152
<div class="score-label">{{t "common.pix"}}</div>
5253
<div class="score-value">{{replace-zero-by-dash @scorecard.earnedPix}}</div>
5354
</div>
5455
</div>
5556

5657
{{#if this.displayImprovingWaitSentence}}
5758
<div class="scorecard-details__improvement-countdown">
58-
<span class="scorecard-details-improvement-countdown__label">{{t
59+
<div class="scorecard-details-improvement-countdown__label">{{t
5960
"pages.competence-details.actions.improve.description.waiting-text"
60-
}}</span>
61-
<span class="scorecard-details-improvement-countdown__count">{{t
61+
}}</div>
62+
<strong class="scorecard-details-improvement-countdown__count">{{t
6263
"pages.competence-details.actions.improve.description.countdown"
6364
daysBeforeImproving=@scorecard.remainingDaysBeforeImproving
64-
}}</span>
65+
}}</strong>
6566
</div>
6667
{{/if}}
6768

6869
{{#if this.displayImprovingButton}}
6970
<PixButton
70-
class="scorecard-details__improve-button button--big"
71+
class="scorecard-details__improve-button"
7172
@variant="success"
73+
@size="large"
7274
@triggerAction={{this.improveCompetenceEvaluation}}
7375
>
7476
{{t "pages.competence-details.actions.improve.label"}}
7577
<span class="sr-only">{{t "pages.competence-details.for-competence" competence=@scorecard.name}}</span>
7678
</PixButton>
77-
<span class="scorecard-details__improving-text">{{t
79+
<div class="scorecard-details__improving-text">{{t
7880
"pages.competence-details.actions.improve.improvingText"
79-
}}</span>
81+
}}</div>
8082
{{/if}}
8183

8284
{{#if this.displayResetButton}}
@@ -92,19 +94,19 @@
9294
{{/if}}
9395

9496
{{#if this.displayResetWaitSentence}}
95-
<p class="scorecard-details-content-right__reset-message">{{t
97+
<p class="scorecard-details-content-score__reset-message">{{t
9698
"pages.competence-details.actions.reset.description"
9799
daysBeforeReset=@scorecard.remainingDaysBeforeReset
98100
}}</p>
99101
{{/if}}
100102
{{/if}}
101103

102104
{{#if @scorecard.isStarted}}
103-
<div class="scorecard-details-content-right__score-container">
105+
<div class="scorecard-details-content-score__score-container">
104106
<CircleChart
105107
@value={{@scorecard.capedPercentageAheadOfNextLevel}}
106108
@sliceColor={{@scorecard.area.color}}
107-
@chartClass="circle-chart__content--big"
109+
@chartClass="circle-chart--big"
108110
@thicknessClass="circle--thick"
109111
role="img"
110112
aria-label="{{scorecard-aria-label @scorecard}}"
@@ -115,14 +117,14 @@
115117
</div>
116118
</CircleChart>
117119

118-
<div class="scorecard-details-content-right-score-container__pix-earned">
120+
<div class="pix-earned">
119121
<div class="score-label">{{t "common.pix"}}</div>
120122
<div class="score-value">{{replace-zero-by-dash @scorecard.earnedPix}}</div>
121123
</div>
122124
</div>
123125

124126
{{#if this.displayRemainingPixToNextLevel}}
125-
<div class="scorecard-details-content-right__level-info">
127+
<div class="scorecard-details-content-score__level-info">
126128
{{t
127129
"pages.competence-details.next-level-info"
128130
remainingPixToNextLevel=@scorecard.remainingPixToNextLevel
@@ -131,14 +133,15 @@
131133
</div>
132134
{{/if}}
133135

134-
<LinkTo
136+
<PixButtonLink
137+
class="scorecard-details__resume-button"
135138
@route="authenticated.competences.resume"
136139
@model={{@scorecard.competenceId}}
137-
class="button button--big button--thin button--round button--link button--green scorecard-details__resume-or-start-button"
140+
@size="large"
138141
>
139142
{{t "pages.competence-details.actions.continue.label"}}
140143
<span class="sr-only">{{t "pages.competence-details.for-competence" competence=@scorecard.name}}</span>
141-
</LinkTo>
144+
</PixButtonLink>
142145

143146
{{#if this.displayResetButton}}
144147
<PixButton
@@ -153,47 +156,51 @@
153156
{{/if}}
154157

155158
{{#if this.displayResetWaitSentence}}
156-
<p class="scorecard-details-content-right__reset-message">{{t
159+
<p class="scorecard-details-content-score__reset-message">{{t
157160
"pages.competence-details.actions.reset.description"
158161
daysBeforeReset=@scorecard.remainingDaysBeforeReset
159162
}}</p>
160163
{{/if}}
161164
{{/if}}
162165

163166
{{#if @scorecard.isNotStarted}}
164-
<LinkTo
167+
<PixButtonLink
168+
class="scorecard-details__start-button"
165169
@route="authenticated.competences.resume"
166170
@model={{@scorecard.competenceId}}
167-
class="button button--big button--thin button--round button--link button--green scorecard-details__resume-or-start-button"
171+
@size="large"
172+
@variant="success"
168173
>
169174
{{t "pages.competence-details.actions.start.label"}}
170175
<span class="sr-only">{{t "pages.competence-details.for-competence" competence=@scorecard.name}}</span>
171-
</LinkTo>
176+
</PixButtonLink>
172177
{{/if}}
173178
</div>
174-
</div>
179+
</section>
180+
175181
{{#if this.tutorialsGroupedByTubeName}}
176-
<div class="scorecard-details__content">
177-
<div class="tutorials">
178-
<div class="tutorials__header">
179-
<h2 class="tutorials-header__title">{{t "pages.competence-details.tutorials.title"}}</h2>
180-
<p class="tutorials-header__description">{{t "pages.competence-details.tutorials.description"}}</p>
181-
</div>
182-
<div>
183-
{{#each this.tutorialsGroupedByTubeName as |tube|}}
184-
<div class="tube">
185-
<h3 class="tube__title">{{tube.practicalTitle}}</h3>
186-
<ul class="tube__content">
187-
{{#each tube.tutorials as |tutorial|}}
188-
<Tutorials::Card @tutorial={{tutorial}} />
189-
{{/each}}
190-
</ul>
191-
</div>
192-
{{/each}}
193-
</div>
182+
<section class="scorecard-details__tutorials">
183+
<div class="scorecard-details-tutorials__header">
184+
<h2 class="scorecard-details-tutorials-header__title">{{t "pages.competence-details.tutorials.title"}}</h2>
185+
<p class="scorecard-details-tutorials-header__description">{{t
186+
"pages.competence-details.tutorials.description"
187+
}}</p>
194188
</div>
195-
</div>
189+
<ul class="scorecard-details-tutorials__list">
190+
{{#each this.tutorialsGroupedByTubeName as |tube|}}
191+
<li class="tube">
192+
<h3 class="tube__title">{{tube.practicalTitle}}</h3>
193+
<ul class="tube__content">
194+
{{#each tube.tutorials as |tutorial|}}
195+
<Tutorials::Card @tutorial={{tutorial}} />
196+
{{/each}}
197+
</ul>
198+
</li>
199+
{{/each}}
200+
</ul>
201+
</section>
196202
{{/if}}
203+
197204
</div>
198205
<PixModal
199206
@title={{t "pages.competence-details.actions.reset.modal.title" scoreCardName=@scorecard.name}}

0 commit comments

Comments
 (0)