Skip to content

Commit 0b3774f

Browse files
JulienDroulezJulienDroulez
committed
fix: skill display and edit on mobile
1 parent d43557d commit 0b3774f

File tree

6 files changed

+204
-42
lines changed

6 files changed

+204
-42
lines changed

‎src/components/people/skill/SkillEditor.vue‎

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,29 @@ function onUpdateMentorship(mentorship) {
5757
:data-test="`${type}-editor-${skill.id}`"
5858
ref="el"
5959
>
60-
<h4 class="skill-name">{{ skillTexts.title(skill) }}</h4>
60+
<h4 class="skill-name">
61+
<span>{{ skillTexts.title(skill) }}</span>
62+
63+
<div class="edit-action mobile">
64+
<LpiButton
65+
v-if="skill.can_mentor || skill.needs_mentor"
66+
secondary
67+
@click="editMentorship = true"
68+
label=""
69+
btn-icon="Pen"
70+
class="borderless"
71+
/>
72+
<span v-else>&nbsp;</span>
73+
</div>
74+
<div class="delete-action mobile">
75+
<IconImage
76+
name="TrashCanOutline"
77+
:data-test="`delete-${type}-${skill.id}`"
78+
class="delete-icon"
79+
@click="confirmDelete = true"
80+
/>
81+
</div>
82+
</h4>
6183
<div class="level-editor">
6284
<label
6385
class="level"
@@ -98,7 +120,7 @@ function onUpdateMentorship(mentorship) {
98120
/>
99121
</ToolTip>
100122
</div>
101-
<div class="edit-action">
123+
<div class="edit-action desktop">
102124
<LpiButton
103125
v-if="skill.can_mentor || skill.needs_mentor"
104126
secondary
@@ -109,7 +131,7 @@ function onUpdateMentorship(mentorship) {
109131
/>
110132
<span v-else>&nbsp;</span>
111133
</div>
112-
<div class="delete-action">
134+
<div class="delete-action desktop">
113135
<IconImage
114136
name="TrashCanOutline"
115137
:data-test="`delete-${type}-${skill.id}`"
@@ -145,6 +167,11 @@ function onUpdateMentorship(mentorship) {
145167
border-bottom: $border-width-s solid $lighter-gray;
146168
padding: $space-l 0;
147169
170+
@media screen and (max-width: $min-tablet) {
171+
flex-flow: column nowrap;
172+
align-items: flex-start;
173+
}
174+
148175
&:last-child {
149176
border-bottom: $border-width-s solid $lighter-gray;
150177
}
@@ -253,6 +280,22 @@ function onUpdateMentorship(mentorship) {
253280
vertical-align: middle;
254281
cursor: pointer;
255282
}
283+
284+
&.mobile {
285+
display: none;
286+
287+
@media screen and (max-width: $min-tablet) {
288+
display: block;
289+
}
290+
}
291+
292+
&.desktop {
293+
display: block;
294+
295+
@media screen and (max-width: $min-tablet) {
296+
display: none;
297+
}
298+
}
256299
}
257300
}
258301
@@ -261,8 +304,18 @@ function onUpdateMentorship(mentorship) {
261304
flex-wrap: wrap;
262305
263306
.skill-name {
307+
align-self: stretch;
308+
width: 100%;
264309
flex-basis: 100%;
265310
flex-shrink: 0;
311+
display: flex;
312+
justify-content: stretch;
313+
align-items: center;
314+
gap: $space-unit;
315+
316+
span {
317+
flex-grow: 1;
318+
}
266319
}
267320
}
268321
}

‎src/components/people/skill/SkillItemFull.vue‎

Lines changed: 67 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,15 @@
22
<div class="skill" :class="{ 'is-open': isOpen, 'no-description': !description?.length }">
33
<div class="skill-content">
44
<div class="skill-name" @click="isOpen = !isOpen">
5-
<IconImage class="chevron" :name="isOpen ? 'Minus' : 'Plus'" />
6-
<span class="skill-title">{{ $filters.capitalize(label) }}</span>
5+
<div class="skill-title">
6+
<IconImage class="chevron" :name="isOpen ? 'Minus' : 'Plus'" />
7+
<span class="skill-title">{{ $filters.capitalize(label) }}</span>
8+
</div>
9+
<transition name="open">
10+
<div v-show="isOpen" class="description mobile">
11+
<p>{{ description }}</p>
12+
</div>
13+
</transition>
714
</div>
815
<div class="skill-level">
916
<SkillSteps show-label :active-step="level" :steps="steps" class="steps" />
@@ -40,7 +47,7 @@
4047
</div>
4148

4249
<transition name="open">
43-
<div v-show="isOpen" class="description">
50+
<div v-show="isOpen" class="description desktop">
4451
<p>{{ description }}</p>
4552
</div>
4653
</transition>
@@ -113,14 +120,34 @@ export default {
113120
border-bottom: $border-width-s solid $lighter-gray;
114121
padding: $space-l 0;
115122
123+
.skill-content {
124+
display: flex;
125+
flex-flow: row nowrap;
126+
justify-content: stretch;
127+
gap: $space-unit;
128+
align-items: center;
129+
130+
@media screen and (max-width: $min-tablet) {
131+
flex-flow: column nowrap;
132+
align-items: flex-start;
133+
}
134+
}
135+
116136
&.no-description {
117137
pointer-events: none;
118138
}
119139
120140
.skill-name {
121-
font-weight: 400;
122141
flex-basis: 30%;
123142
display: flex;
143+
flex-flow: column nowrap;
144+
justify-content: flex-start;
145+
align-items: flex-start;
146+
}
147+
148+
.skill-title {
149+
font-weight: 400;
150+
display: flex;
124151
justify-content: flex-start;
125152
align-items: flex-start;
126153
cursor: pointer;
@@ -132,6 +159,12 @@ export default {
132159
justify-content: flex-start;
133160
align-items: center;
134161
gap: $space-m;
162+
163+
@media screen and (max-width: $min-tablet) {
164+
.container {
165+
padding-left: 0 !important;
166+
}
167+
}
135168
}
136169
137170
.mentorship {
@@ -147,6 +180,14 @@ export default {
147180
display: flex;
148181
justify-content: flex-end;
149182
}
183+
184+
.skill-level,
185+
.mentorship,
186+
.actions {
187+
@media screen and (max-width: $min-tablet) {
188+
padding-left: 1rem;
189+
}
190+
}
150191
}
151192
152193
.skill-name:hover {
@@ -159,14 +200,6 @@ export default {
159200
}
160201
}
161202
162-
.skill-content {
163-
display: flex;
164-
flex-flow: row nowrap;
165-
justify-content: stretch;
166-
gap: $space-unit;
167-
align-items: center;
168-
}
169-
170203
.chevron {
171204
flex-shrink: 0;
172205
width: 1rem;
@@ -213,9 +246,31 @@ export default {
213246
214247
.description {
215248
font-size: $font-size-s;
249+
padding-top: $space-m;
216250
padding-left: 1rem;
217251
border-left: 1px solid $light-gray;
218252
align-self: flex-start;
253+
254+
@media screen and (min-width: $max-tablet) {
255+
padding-right: calc(60%);
256+
margin-right: #{4 * $space-m};
257+
}
258+
259+
&.mobile {
260+
display: none;
261+
262+
@media screen and (max-width: $min-tablet) {
263+
display: block;
264+
}
265+
}
266+
267+
&.desktop {
268+
display: block;
269+
270+
@media screen and (max-width: $min-tablet) {
271+
display: none;
272+
}
273+
}
219274
}
220275
221276
.open-enter-active {

‎src/components/people/skill/UserSkillsFull.vue‎

Lines changed: 61 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
<template>
22
<div>
3-
<div v-if="title" class="title-wrapper">
4-
<h3 class="title">{{ title }}</h3>
5-
<SkillLevelTip>
6-
<LinkButton
7-
:label="$t(`me.levels-help-link`)"
8-
btn-icon="HelpCircle"
9-
data-test="skill-levels-help-button"
10-
/>
11-
</SkillLevelTip>
3+
<div class="skill-columns-header" :key="`${key}-header`">
4+
<div class="skill-name">
5+
<span class="column-label" v-if="title">{{ title }}</span>
6+
</div>
7+
<div class="skill-level">
8+
<span class="column-label">{{ $t(`profile.edit.skills.skills.levels-help`) }}</span>
9+
<SkillLevelTip>
10+
<LinkButton
11+
label=""
12+
btn-icon="HelpCircle"
13+
data-test="skill-levels-help-button"
14+
secondary
15+
icon-only
16+
/>
17+
</SkillLevelTip>
18+
</div>
19+
<div class="mentorship">
20+
<span class="column-label">{{
21+
$t(`profile.edit.skills.mentorship.mentorship`)
22+
}}</span>
23+
</div>
1224
</div>
1325
<div class="columns-wrapper">
1426
<SkillItemFull v-for="skill in skills" :key="skill.id" :skill="skill" />
@@ -41,23 +53,48 @@ export default {
4153
</script>
4254

4355
<style lang="scss" scoped>
44-
$column-spacing: pxToRem(32px);
45-
46-
.title-wrapper {
47-
padding-left: $column-spacing;
48-
margin-top: 1rem;
56+
.skill-columns-header {
4957
display: flex;
50-
justify-content: space-between;
51-
gap: 1rem;
52-
}
58+
justify-content: stretch;
59+
gap: $space-unit;
60+
align-items: center;
61+
padding: $space-l 0;
62+
border-bottom: $border-width-s solid $primary;
5363
54-
.title {
55-
color: $primary-dark;
56-
font-size: $font-size-l;
57-
text-transform: uppercase;
58-
}
64+
.column-label {
65+
font-weight: 700;
66+
text-transform: uppercase;
67+
color: $primary-dark;
68+
}
69+
70+
.skill-name {
71+
flex-basis: 30%;
72+
73+
@media screen and (max-width: $min-tablet) {
74+
flex-basis: 100%;
75+
text-align: center;
76+
}
77+
}
78+
79+
.skill-level {
80+
flex-basis: 45%;
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
85+
@media screen and (max-width: $min-tablet) {
86+
display: none;
87+
}
88+
}
89+
90+
.mentorship {
91+
display: flex;
92+
justify-content: center;
93+
flex-basis: 25%;
5994
60-
.s-button {
61-
margin: $space-l auto 0;
95+
@media screen and (max-width: $min-tablet) {
96+
display: none;
97+
}
98+
}
6299
}
63100
</style>

‎src/locales/en.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1326,7 +1326,7 @@
13261326
"add-item": "Add a skill",
13271327
"edit-levels": "Edit levels",
13281328
"already-added": "Skill already added",
1329-
"levels-help": "Skill levels",
1329+
"levels-help": "Level",
13301330
"drawer": {
13311331
"title": "Add professional skills",
13321332
"notice": "Type the label of your skill, and select the right one for you among suggestions.",
@@ -1344,7 +1344,7 @@
13441344
"add-item": "Add a hobby",
13451345
"already-added": "Hobby already added",
13461346
"edit-levels": "Edit levels",
1347-
"levels-help": "Hobbies levels",
1347+
"levels-help": "Level",
13481348
"drawer": {
13491349
"title": "Add a personal hobby",
13501350
"notice": "Type the label of your hobby, and select the right one for you among suggestions.",

‎src/locales/fr.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1320,7 +1320,7 @@
13201320
"add": "Ajouter des compétences professionnelles",
13211321
"add-item": "Ajouter une compétence",
13221322
"edit-levels": "Éditer les niveaux",
1323-
"levels-help": "Niveau de compétence",
1323+
"levels-help": "Niveau",
13241324
"already-added": "Compétence déjà ajoutée",
13251325
"drawer": {
13261326
"title": "Ajouter des compétences professionnelles",

0 commit comments

Comments
 (0)