Skip to content

Commit fe97392

Browse files
JeyffreyJeyffrey
committed
refactor(mon-pix): improve scorecard-details page style
1 parent f6465e9 commit fe97392

File tree

5 files changed

+133
-294
lines changed

5 files changed

+133
-294
lines changed

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

+54-53
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
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 @route="authenticated.profile" @variant="tertiary" @iconBefore="arrowLeft" class="scorecard-details-header__back-button">
44
{{t "navigation.back-to-profile"}}
55
</PixButtonLink>
6-
</div>
6+
</section>
77

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">
8+
<section class="scorecard-details__competence">
9+
<div class="scorecard-details-competence__details">
10+
<h1 class="scorecard-details-competence-details__name">
1411
{{@scorecard.name}}
1512
</h1>
16-
<div class="scorecard-details-content-left__description">
13+
<div class="scorecard-details-competence-details__description">
1714
{{@scorecard.description}}
1815
</div>
1916
</div>
2017

21-
<div class="scorecard-details-content__right">
18+
<div class="scorecard-details-content__score">
2219

2320
{{#if @scorecard.isFinished}}
24-
<div class="scorecard-details-content-right__score-container">
21+
<div class="scorecard-details-content-score__score-container">
2522
{{#if this.displayCongrats}}
2623
<div class="competence-card__congrats">
2724
<div class="competence-card__level competence-card__level--congrats">
@@ -35,7 +32,7 @@
3532
<CircleChart
3633
@value={{@scorecard.capedPercentageAheadOfNextLevel}}
3734
@sliceColor={{@scorecard.area.color}}
38-
@chartClass="circle-chart__content--big"
35+
@chartClass="circle-chart--big"
3936
@thicknessClass="circle--thick"
4037
role="img"
4138
aria-label="{{scorecard-aria-label @scorecard}}"
@@ -47,36 +44,37 @@
4744
</CircleChart>
4845
{{/if}}
4946

50-
<div class="scorecard-details-content-right-score-container__pix-earned">
47+
<div class="pix-earned">
5148
<div class="score-label">{{t "common.pix"}}</div>
5249
<div class="score-value">{{replace-zero-by-dash @scorecard.earnedPix}}</div>
5350
</div>
5451
</div>
5552

5653
{{#if this.displayImprovingWaitSentence}}
5754
<div class="scorecard-details__improvement-countdown">
58-
<span class="scorecard-details-improvement-countdown__label">{{t
55+
<div class="scorecard-details-improvement-countdown__label">{{t
5956
"pages.competence-details.actions.improve.description.waiting-text"
60-
}}</span>
61-
<span class="scorecard-details-improvement-countdown__count">{{t
57+
}}</div>
58+
<strong class="scorecard-details-improvement-countdown__count">{{t
6259
"pages.competence-details.actions.improve.description.countdown"
6360
daysBeforeImproving=@scorecard.remainingDaysBeforeImproving
64-
}}</span>
61+
}}</strong>
6562
</div>
6663
{{/if}}
6764

6865
{{#if this.displayImprovingButton}}
6966
<PixButton
70-
class="scorecard-details__improve-button button--big"
67+
class="scorecard-details__improve-button"
7168
@variant="success"
69+
@size="large"
7270
@triggerAction={{this.improveCompetenceEvaluation}}
7371
>
7472
{{t "pages.competence-details.actions.improve.label"}}
7573
<span class="sr-only">{{t "pages.competence-details.for-competence" competence=@scorecard.name}}</span>
7674
</PixButton>
77-
<span class="scorecard-details__improving-text">{{t
75+
<div class="scorecard-details__improving-text">{{t
7876
"pages.competence-details.actions.improve.improvingText"
79-
}}</span>
77+
}}</div>
8078
{{/if}}
8179

8280
{{#if this.displayResetButton}}
@@ -92,19 +90,19 @@
9290
{{/if}}
9391

9492
{{#if this.displayResetWaitSentence}}
95-
<p class="scorecard-details-content-right__reset-message">{{t
93+
<p class="scorecard-details-content-score__reset-message">{{t
9694
"pages.competence-details.actions.reset.description"
9795
daysBeforeReset=@scorecard.remainingDaysBeforeReset
9896
}}</p>
9997
{{/if}}
10098
{{/if}}
10199

102100
{{#if @scorecard.isStarted}}
103-
<div class="scorecard-details-content-right__score-container">
101+
<div class="scorecard-details-content-score__score-container">
104102
<CircleChart
105103
@value={{@scorecard.capedPercentageAheadOfNextLevel}}
106104
@sliceColor={{@scorecard.area.color}}
107-
@chartClass="circle-chart__content--big"
105+
@chartClass="circle-chart--big"
108106
@thicknessClass="circle--thick"
109107
role="img"
110108
aria-label="{{scorecard-aria-label @scorecard}}"
@@ -115,14 +113,14 @@
115113
</div>
116114
</CircleChart>
117115

118-
<div class="scorecard-details-content-right-score-container__pix-earned">
116+
<div class="pix-earned">
119117
<div class="score-label">{{t "common.pix"}}</div>
120118
<div class="score-value">{{replace-zero-by-dash @scorecard.earnedPix}}</div>
121119
</div>
122120
</div>
123121

124122
{{#if this.displayRemainingPixToNextLevel}}
125-
<div class="scorecard-details-content-right__level-info">
123+
<div class="scorecard-details-content-score__level-info">
126124
{{t
127125
"pages.competence-details.next-level-info"
128126
remainingPixToNextLevel=@scorecard.remainingPixToNextLevel
@@ -131,14 +129,15 @@
131129
</div>
132130
{{/if}}
133131

134-
<LinkTo
132+
<PixButtonLink
133+
class="scorecard-details__resume-button"
135134
@route="authenticated.competences.resume"
136135
@model={{@scorecard.competenceId}}
137-
class="button button--big button--thin button--round button--link button--green scorecard-details__resume-or-start-button"
136+
@size="large"
138137
>
139138
{{t "pages.competence-details.actions.continue.label"}}
140139
<span class="sr-only">{{t "pages.competence-details.for-competence" competence=@scorecard.name}}</span>
141-
</LinkTo>
140+
</PixButtonLink>
142141

143142
{{#if this.displayResetButton}}
144143
<PixButton
@@ -153,47 +152,49 @@
153152
{{/if}}
154153

155154
{{#if this.displayResetWaitSentence}}
156-
<p class="scorecard-details-content-right__reset-message">{{t
155+
<p class="scorecard-details-content-score__reset-message">{{t
157156
"pages.competence-details.actions.reset.description"
158157
daysBeforeReset=@scorecard.remainingDaysBeforeReset
159158
}}</p>
160159
{{/if}}
161160
{{/if}}
162161

163162
{{#if @scorecard.isNotStarted}}
164-
<LinkTo
163+
<PixButtonLink
164+
class="scorecard-details__start-button"
165165
@route="authenticated.competences.resume"
166166
@model={{@scorecard.competenceId}}
167-
class="button button--big button--thin button--round button--link button--green scorecard-details__resume-or-start-button"
167+
@size="large"
168+
@variant="success"
168169
>
169170
{{t "pages.competence-details.actions.start.label"}}
170171
<span class="sr-only">{{t "pages.competence-details.for-competence" competence=@scorecard.name}}</span>
171-
</LinkTo>
172+
</PixButtonLink>
172173
{{/if}}
173174
</div>
174-
</div>
175+
</section>
176+
175177
{{#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>
178+
<section class="scorecard-details__tutorials">
179+
<div class="scorecard-details-tutorials__header">
180+
<h2 class="scorecard-details-tutorials-header__title">{{t "pages.competence-details.tutorials.title"}}</h2>
181+
<p class="scorecard-details-tutorials-header__description">{{t "pages.competence-details.tutorials.description"}}</p>
194182
</div>
195-
</div>
183+
<ul class="scorecard-details-tutorials__list">
184+
{{#each this.tutorialsGroupedByTubeName as |tube|}}
185+
<li class="tube">
186+
<h3 class="tube__title">{{tube.practicalTitle}}</h3>
187+
<ul class="tube__content">
188+
{{#each tube.tutorials as |tutorial|}}
189+
<Tutorials::Card @tutorial={{tutorial}} />
190+
{{/each}}
191+
</ul>
192+
</li>
193+
{{/each}}
194+
</ul>
195+
</section>
196196
{{/if}}
197+
197198
</div>
198199
<PixModal
199200
@title={{t "pages.competence-details.actions.reset.modal.title" scoreCardName=@scorecard.name}}

0 commit comments

Comments
 (0)