Skip to content

Commit bd397d3

Browse files
author
Ari Madian
authored
Merge pull request #106 from creativecommons/repo-refactor
Refactor and clean up the code
2 parents 28e81d5 + 1b39467 commit bd397d3

20 files changed

+433
-764
lines changed

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<meta name="description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!">
78
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
89
<link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192">
910
<link rel="apple-touch-icon-precomposed" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png">

‎src/App.vue‎

Lines changed: 15 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<Stepper v-model="currentStepId" />
2121
<div class="column">
2222
<div class="fixed-right-column">
23-
<SelectedLicenseCard
23+
<LicenseDetailsCard
2424
v-if="showLicense"
2525
/>
2626
<LicenseUseCard
@@ -42,18 +42,18 @@ import '@creativecommons/vocabulary/css/index.css'
4242
4343
import HelpSection from './components/HelpSection'
4444
import Stepper from './components/Stepper'
45-
import SelectedLicenseCard from './components/LicenseDetailsCard'
4645
import LicenseUseCard from './components/LicenseUseCard'
4746
import Header from './components/Header.vue'
4847
import Footer from './components/Footer'
4948
import LocaleChooser from './components/LocaleChooser'
49+
import LicenseDetailsCard from './components/LicenseDetailsCard'
5050
5151
export default {
5252
name: 'App',
5353
components: {
5454
HelpSection,
5555
Stepper,
56-
SelectedLicenseCard,
56+
LicenseDetailsCard,
5757
LicenseUseCard,
5858
Header,
5959
Footer,
@@ -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,114 +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;
130-
}
131-
132-
.desktop-show {
133-
display: block;
134-
}
135-
.vocab.ha {
136-
font-family: Roboto Condensed,sans-serif;
137-
font-weight: bold;
138-
font-style: normal;
139-
letter-spacing: 0.02em;
140-
padding-bottom: 0.5rem;
141-
}
142-
.vocab.hb {
143-
font-family: Source Sans Pro,sans-serif;
144-
font-weight: bold;
145-
font-style: normal;
146-
padding-bottom: 0.5rem;
147-
}
148-
.vocab.h2a {
149-
color: black;
150-
font-size: 36px;
151-
line-height: 47px;
152-
}
153-
.vocab.h3a {
154-
font-size: 28px;
155-
line-height: 36px;
156-
color: black;
157-
}
158-
.vocab.h3b {
159-
font-size: 28px;
160-
line-height: 33px;
161-
}
162-
.vocab.h4a {
163-
font-size: 23px;
164-
line-height: 30px;
165-
}
166-
.vocab.h4b {
167-
font-size: 23px;
168-
line-height: 27px;
169-
}
170-
.vocab.h5a {
171-
font-size: 20px;
172-
line-height: 30px;
173-
}
174-
.vocab.h5b {
175-
font-size: 20px;
176-
line-height: 26px;
177-
}
178-
.vocab-tomato {
179-
color: #ED592F!important;
180-
}
181-
.vocab-body {
182-
font-style: normal;
183-
font-weight: normal;
184-
color: #333333;
185-
padding-bottom: 8px;
186-
}
187-
.vocab-body.body-bigger {
188-
font-size: 23px;
189-
line-height: 33px;
190-
color: black;
191-
}
192-
.vocab-body.body-big {
193-
font-size: 18px;
194-
line-height: 25px;
195-
}
196-
.vocab-body.body-normal {
197-
font-size: 16px;
198-
line-height: 24px;
199-
}
200-
.vocab-caption {
201-
font-style: normal;
202-
font-weight: 600;
203-
font-size: 13px;
204-
line-height: 19px;
205-
padding-bottom: 8px;
206-
}
207-
.normal-gray {
208-
color: #D8D8D8!important;
124+
.stepper-instructions {
125+
margin-bottom: 14px;
209126
}
210-
.slate-gray {
211-
color: #333333;
127+
.fixed-right-column {
128+
position: sticky;
129+
top: 10px;
212130
}
213131
.selected-license-card {
132+
// Margin is added to make the left column long enough for the right column to stay sticky when scrolling
214133
margin-bottom: 32px;
215134
}
216-
.help-section {
217-
}
218-
219135
@media only screen and (max-width: 1025px) {
220136
#site-container {
221137
margin-left: 2%;
222138
margin-right: 2%;
223139
}
224-
225140
.mobile-hide {
226141
display: none;
227142
}
228-
229143
.mobile-show {
230144
display: block;
231145
}
@@ -248,43 +162,10 @@ export default {
248162
order: 1;
249163
}
250164
}
251-
252165
@media only screen and (max-width: 670px) {
253166
#site-container {
254167
margin-left: 3%;
255168
margin-right: 3%;
256169
}
257170
}
258-
259-
.vocab-container .vocab-grid .panel {
260-
height: 100%;
261-
display: -webkit-box;
262-
display: -ms-flexbox;
263-
display: flex;
264-
-webkit-box-orient: vertical;
265-
-webkit-box-direction: normal;
266-
-ms-flex-direction: column;
267-
flex-direction: column;
268-
-webkit-box-pack: justify;
269-
-ms-flex-pack: justify;
270-
justify-content: space-between;
271-
}
272-
273-
.vocab.select-field.normal-sized {
274-
font-size: 1rem;
275-
}
276-
277-
.vocab.select-field > .field.has-addons {
278-
padding-left: calc(1em + var(--select-field-addons-space));
279-
margin-bottom: 0;
280-
min-width: 10em;
281-
}
282-
283-
.vocab.select-field > .field > option[disabled] {
284-
opacity: 0.6;
285-
}
286-
287-
.panel {
288-
margin-top: 1rem;
289-
}
290171
</style>

‎src/components/AttributionDetailsStep.vue‎

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,35 @@
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 v-if="status==='current'"
4+
class="step-actions">
5+
<p class="attribution-details-instructions">
6+
{{ $t('stepper.AD.instructions') }}
7+
</p>
8+
<form class="attribution-details-form">
9+
<b-field :label="this.$t('stepper.AD.form.creator-name.label')">
10+
<b-input v-model="creatorName"
11+
:placeholder="this.$t('stepper.AD.form.creator-name.placeholder')"
12+
/>
13+
</b-field>
14+
<b-field :label="this.$t('stepper.AD.form.creator-profile.label')">
15+
<b-input v-model="creatorProfileUrl"
16+
:placeholder="this.$t('stepper.AD.form.creator-profile.placeholder')"
17+
/>
18+
</b-field>
19+
<b-field :label="this.$t('stepper.AD.form.work-title.label')">
20+
<b-input v-model="workTitle"
21+
:placeholder="this.$t('stepper.AD.form.work-title.placeholder')"
22+
/>
23+
</b-field>
24+
<b-field :label="this.$t('stepper.AD.form.work-url.label')">
25+
<b-input v-model="workUrl"
26+
:placeholder="this.$t('stepper.AD.form.work-url.placeholder')"
27+
/>
28+
</b-field>
29+
</form>
30+
</div>
3531
</div>
3632
</template>
37-
3833
<script>
3934
import { mapMutations, mapState } from 'vuex'
4035
@@ -81,20 +76,20 @@ export default {
8176
8277
}
8378
</script>
84-
8579
<style>
8680
.attribution-details-form {
8781
margin-top: 1rem;
8882
}
89-
.attribution-details-form label {
83+
.attribution-details-form .label {
9084
font-style: normal;
9185
font-weight: normal;
9286
font-size: 16px;
9387
line-height: 24px;
9488
color: #333333;
9589
}
96-
.field .control .input {
97-
font-weight: 500;
90+
.attribution-details-form .input {
91+
font-weight: 600;
9892
font-size: 16px;
93+
color: #333333;
9994
}
10095
</style>

‎src/components/CopyrightWaiverStep.vue‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
11
<template>
2-
<div>
3-
<div
4-
v-if="status==='previous'"
5-
class="step-description vocab-body body-normal"
6-
>
2+
<div class="step-content">
3+
<div v-if="status==='previous'"
4+
class="step-description vocab-body body-normal">
75
<p class="vocab-body body-normal">
86
{{ $t('stepper.CW.selected') }}
97
</p>
108
</div>
11-
<div
12-
v-else-if="status==='current'"
13-
class="step-actions"
14-
>
9+
<div v-else-if="status==='current'"
10+
class="step-actions">
1511
<b-checkbox v-model="copyrightWaiverAgreed">
1612
{{ $t('stepper.CW.copyright-waive-agreement') }}
1713
</b-checkbox>
18-
<textarea
19-
:value="this.$t('cc0-waiver.text')"
20-
:class="'waiver-textarea'"
21-
/>
14+
<textarea :value="this.$t('cc0-waiver.text')"
15+
:class="'waiver-textarea'"/>
2216
<b-checkbox v-model="copyrightWaiverConfirmed">
2317
{{ $t("stepper.CW.copyright-waive-confirmation") }}
2418
</b-checkbox>
2519
</div>
2620
</div>
2721
</template>
28-
2922
<script>
3023
export default {
3124
name: 'CopyrightWaiverStep',
@@ -76,17 +69,19 @@ export default {
7669
}
7770
}
7871
</script>
79-
8072
<style lang="scss">
81-
label.label {
82-
font-size: 0.845rem;
83-
}
8473
.waiver-textarea {
8574
width: 100%;
8675
min-height: 100px;
8776
margin: 1rem 0;
8877
}
89-
.b-checkbox {
90-
align-items: flex-start;
78+
.step-actions .b-checkbox.checkbox {
79+
align-items: normal;
80+
}
81+
.step-actions .control-label {
82+
color: #333333;
83+
}
84+
.step-actions .b-checkbox.checkbox input[type=checkbox] + .check {
85+
border: 2px solid #D8D8D8;
9186
}
9287
</style>

0 commit comments

Comments
 (0)