Skip to content

Commit b94efe6

Browse files
obulatobulat
committed
Clean up Stepper, Step and App components
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent d86da79 commit b94efe6

File tree

8 files changed

+165
-179
lines changed

8 files changed

+165
-179
lines changed

‎src/App.vue‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,6 @@ export default {
106106
color: #2c3e50;
107107
counter-reset: step-counter;
108108
}
109-
.fixed-right-column {
110-
position: sticky;
111-
top: 10px;
112-
}
113109
#site-container {
114110
padding-top: 2rem;
115111
padding-bottom: 2%;
@@ -118,35 +114,32 @@ export default {
118114
display: grid;
119115
grid-template-columns: repeat(2, 1fr);
120116
grid-gap: 1.5rem;
117+
.select-license-column {
118+
grid-column: 1;
119+
}
120+
.locale-chooser {
121+
grid-column: 2;
122+
}
121123
}
122-
.select-license-column {
123-
grid-column: 1;
124-
}
125-
.locale-chooser {
126-
grid-column: 2;
127-
}
128-
.desktop-hide {
129-
display: none;
124+
.stepper-instructions {
125+
margin-bottom: 14px;
130126
}
131-
.desktop-show {
132-
display: block;
127+
.fixed-right-column {
128+
position: sticky;
129+
top: 10px;
133130
}
134131
.selected-license-card {
132+
// Margin is added to make the left column long enough for the right column to stay sticky when scrolling
135133
margin-bottom: 32px;
136134
}
137-
.help-section {
138-
}
139-
140135
@media only screen and (max-width: 1025px) {
141136
#site-container {
142137
margin-left: 2%;
143138
margin-right: 2%;
144139
}
145-
146140
.mobile-hide {
147141
display: none;
148142
}
149-
150143
.mobile-show {
151144
display: block;
152145
}
@@ -175,7 +168,4 @@ export default {
175168
margin-right: 3%;
176169
}
177170
}
178-
.panel {
179-
margin-top: 1rem;
180-
}
181171
</style>

‎src/components/AttributionDetailsStep.vue‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
11
<template>
2-
<div
3-
v-if="status==='current'"
4-
class="step-actions"
5-
>
6-
<p class="attribution-details-instructions">
7-
{{ $t('stepper.AD.instructions') }}
8-
</p>
9-
<form class="attribution-details-form">
10-
<b-field :label="this.$t('stepper.AD.form.creator-name.label')">
11-
<b-input
12-
v-model="creatorName"
13-
:placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
14-
/>
15-
</b-field>
16-
<b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
17-
<b-input
18-
v-model="creatorProfileUrl"
19-
:placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
20-
/>
21-
</b-field>
22-
<b-field :label="this.$t('stepper.AD.form.work-title.label')">
23-
<b-input
24-
v-model="workTitle"
25-
:placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
26-
/>
27-
</b-field>
28-
<b-field :label="this.$t('stepper.AD.form.work-url.label')">
29-
<b-input
30-
v-model="workUrl"
31-
:placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
32-
/>
33-
</b-field>
34-
</form>
2+
<div class="step-content">
3+
<div
4+
v-if="status==='current'"
5+
class="step-actions"
6+
>
7+
<p class="attribution-details-instructions">
8+
{{ $t('stepper.AD.instructions') }}
9+
</p>
10+
<form class="attribution-details-form">
11+
<b-field :label="this.$t('stepper.AD.form.creator-name.label')">
12+
<b-input
13+
v-model="creatorName"
14+
:placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
15+
/>
16+
</b-field>
17+
<b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
18+
<b-input
19+
v-model="creatorProfileUrl"
20+
:placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
21+
/>
22+
</b-field>
23+
<b-field :label="this.$t('stepper.AD.form.work-title.label')">
24+
<b-input
25+
v-model="workTitle"
26+
:placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
27+
/>
28+
</b-field>
29+
<b-field :label="this.$t('stepper.AD.form.work-url.label')">
30+
<b-input
31+
v-model="workUrl"
32+
:placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
33+
/>
34+
</b-field>
35+
</form>
36+
</div>
3537
</div>
3638
</template>
3739

@@ -86,15 +88,16 @@ export default {
8688
.attribution-details-form {
8789
margin-top: 1rem;
8890
}
89-
.attribution-details-form label {
91+
.attribution-details-form .label {
9092
font-style: normal;
9193
font-weight: normal;
9294
font-size: 16px;
9395
line-height: 24px;
9496
color: #333333;
9597
}
96-
.field .control .input {
97-
font-weight: 500;
98+
.attribution-details-form .input {
99+
font-weight: 600;
98100
font-size: 16px;
101+
color: #333333;
99102
}
100103
</style>

‎src/components/CopyrightWaiverStep.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="step-content">
33
<div
44
v-if="status==='previous'"
55
class="step-description vocab-body body-normal"
@@ -78,15 +78,18 @@ export default {
7878
</script>
7979

8080
<style lang="scss">
81-
label.label {
82-
font-size: 0.845rem;
83-
}
8481
.waiver-textarea {
8582
width: 100%;
8683
min-height: 100px;
8784
margin: 1rem 0;
8885
}
89-
.b-checkbox {
90-
align-items: flex-start;
86+
.step-actions .b-checkbox.checkbox {
87+
align-items: normal;
88+
}
89+
.step-actions .control-label {
90+
color: #333333;
91+
}
92+
.step-actions .b-checkbox.checkbox input[type=checkbox] + .check {
93+
border: 2px solid #D8D8D8;
9194
}
9295
</style>

‎src/components/DropdownStep.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="step-content">
33
<div
44
v-if="status==='previous'"
55
class="step-description"

‎src/components/FirstStep.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="step-content">
33
<p
44
v-if="status==='previous'"
55
class="step-description vocab-body body-normal"
@@ -20,8 +20,8 @@
2020
>
2121
<span
2222
class="vocab-body body-normal"
23-
v-html="$t(yesText)"
24-
/>
23+
>
24+
{{ $t('stepper.yes') }}{{ $t(yesText) }}</span>
2525
</b-radio>
2626
</div>
2727
<div
@@ -34,8 +34,7 @@
3434
>
3535
<span
3636
class="vocab-body body-normal"
37-
v-html="$t(noText)"
38-
/>
37+
>{{ $t('stepper.no') }}{{ $t(noText) }}</span>
3938
</b-radio>
4039
</div>
4140
</div>

‎src/components/Step.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="step-content">
33
<div
44
v-if="status==='previous'||showDisabledDue"
55
class="step-description vocab-body body-normal"

0 commit comments

Comments
 (0)