Skip to content

Commit 4791603

Browse files
obulatobulat
committed
mockup code
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent a55e713 commit 4791603

File tree

13 files changed

+722
-32
lines changed

13 files changed

+722
-32
lines changed

‎src/App.vue‎

Lines changed: 127 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,25 @@
33
<Header :title="$t('app-title')"/>
44
<Feedback/>
55
<div class="container" id="site-container">
6-
<Chooser />
7-
<hr>
8-
<HelpSection/>
6+
<div class="columns">
7+
<VerticalStepper
8+
:selected="selected"
9+
@openLicenseCard="openLicenseCard"
10+
@toggleLicenseAttr="updateLicense"
11+
@openLicenseUse="openLicenseUse"
12+
/>
13+
<div class="column">
14+
<SelectedLicenseCard
15+
v-if="showLicense"
16+
:selected="selected"
17+
/>
18+
<LicenseUseCard
19+
v-if="showLicenseUse"
20+
v-model="selected"
21+
/>
22+
<HelpSection />
23+
</div>
24+
</div>
925
</div>
1026
<Footer>
1127
<div class="panel">
@@ -32,21 +48,61 @@
3248
import '@creativecommons/vocabulary/css/root.css'
3349
import '@creativecommons/vocabulary/css/index.css'
3450
35-
import Chooser from './components/Chooser'
3651
import HelpSection from './components/HelpSection'
52+
import VerticalStepper from './components/VerticalStepper'
53+
import SelectedLicenseCard from './components/SelectedLicenseCard'
54+
import LicenseUseCard from './components/LicenseUseCard'
3755
import { Header, Footer, Locale } from '@creativecommons/vue-vocabulary'
3856
import Feedback from './components/Feedback'
3957
4058
export default {
4159
name: 'App',
4260
components: {
43-
Chooser,
4461
HelpSection,
62+
VerticalStepper,
63+
SelectedLicenseCard,
64+
LicenseUseCard,
4565
Feedback,
4666
Header,
4767
Footer,
4868
Locale
4969
},
70+
data() {
71+
return {
72+
showLicense: false,
73+
showLicenseUse: false,
74+
currentStep: 0,
75+
selected: {
76+
shortName: 'CC BY 4.0',
77+
fullName: 'Attribution 4.0 International',
78+
attributionDetails: {
79+
creatorName: '',
80+
creatorProfileUrl: '',
81+
workTitle: '',
82+
workUrl: ''
83+
}
84+
}
85+
}
86+
},
87+
methods: {
88+
openLicenseCard() {
89+
this.showLicense = true
90+
},
91+
openLicenseUse() {
92+
this.showLicenseUse = true
93+
},
94+
updateLicense(licenseAttribute) {
95+
const attrUpper = licenseAttribute.toUpperCase()
96+
const attributes = this.$shortToAttributes(this.selected.shortName)
97+
const updatedAttributes = { ...attributes }
98+
updatedAttributes[attrUpper] = !attributes[attrUpper]
99+
this.selected = {
100+
...this.selected,
101+
shortName: this.$attrToShort(updatedAttributes),
102+
fullName: this.$attrToFull(updatedAttributes)
103+
}
104+
}
105+
},
50106
created: function() {
51107
// send home to google analytics
52108
if (process.env.NODE_ENV === 'production') {
@@ -89,6 +145,72 @@ export default {
89145
.desktop-show {
90146
display: block;
91147
}
148+
h2, h3 {
149+
font-family: Roboto Condensed;
150+
color: #333333;
151+
}
152+
.vocab-h2 {
153+
font-style: normal;
154+
font-weight: bold;
155+
font-size: 36px;
156+
line-height: 47px;
157+
letter-spacing: 0.02em;
158+
text-transform: uppercase;
159+
padding-bottom: 8px;
160+
}
161+
.vocab-h3 {
162+
font-style: normal;
163+
font-weight: bold;
164+
font-size: 28px;
165+
line-height: 36px;
166+
letter-spacing: 0.02em;
167+
text-transform: uppercase;
168+
margin-bottom: 12px;
169+
}
170+
.vocab-h4 {
171+
font-style: normal;
172+
font-weight: bold;
173+
font-size: 23px;
174+
line-height: 27px;
175+
margin-bottom: 12px;
176+
}
177+
.vocab-h5 {
178+
font-style: normal;
179+
font-weight: bold;
180+
font-size: 20px;
181+
line-height: 26px;
182+
}
183+
.vocab-tomato {
184+
color: #ED592F!important;
185+
}
186+
.vocab-body-bigger {
187+
font-style: normal;
188+
font-weight: normal;
189+
font-size: 23px;
190+
line-height: 33px;
191+
color: #333333;
192+
margin-bottom: 8px;
193+
padding-bottom: 8px;
194+
}
195+
.vocab-body-big {
196+
font-style: normal;
197+
font-weight: normal;
198+
font-size: 18px;
199+
line-height: 25px;
200+
color: #333333;
201+
margin-bottom: 8px;
202+
padding-bottom: 8px;
203+
}
204+
.normal-gray {
205+
color: #D8D8D8!important;
206+
}
207+
.selected-license-card {
208+
margin-bottom: 32px;
209+
margin-top: 132px;
210+
}
211+
.help-section {
212+
margin-top: 32px;
213+
}
92214
93215
@media only screen and (max-width: 1025px) {
94216
#site-container {

‎src/components/AttributionDetails.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="card-content step-card-content" v-if="!(this.status==='inactive')">
3+
<div class="step-actions" v-if="this.status==='current'">
4+
<p class="attribution-details-instructions">{{$t('stepper.ad.instructions')}}</p>
5+
<form class="attribution-details-form">
6+
<b-field :label="this.$t('stepper.attribution-details.creator-name.label')" label-position="inside">
7+
<b-input
8+
v-model="value.creatorName"
9+
:placeholder="this.$t('stepper.attribution-details.creator-name.placeholder')"
10+
/>
11+
</b-field>
12+
<b-field :label="this.$t('stepper.attribution-details.creator-profile.label')" label-position="inside">
13+
<b-input
14+
v-model="value.creatorProfileUrl"
15+
:placeholder="this.$t('stepper.attribution-details.creator-profile.placeholder')"
16+
/>
17+
</b-field>
18+
<b-field :label="this.$t('stepper.attribution-details.work-title.label')" label-position="inside">
19+
<b-input
20+
v-model="value.workTitle"
21+
:placeholder="this.$t('stepper.attribution-details.work-title.placeholder')"
22+
/>
23+
</b-field>
24+
<b-field :label="this.$t('stepper.attribution-details.work-url.label')" label-position="inside">
25+
<b-input
26+
v-model="value.workUrl"
27+
:placeholder="this.$t('stepper.attribution-details.work-url.placeholder')"
28+
/>
29+
</b-field>
30+
</form>
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script>
36+
export default {
37+
name: 'AttributionDetails',
38+
props: ['value', 'status'],
39+
watch: {
40+
value() { this.$emit('input', this.$props.value) }
41+
}
42+
43+
}
44+
</script>
45+
46+
<style scoped>
47+
48+
</style>

‎src/components/FirstStep.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="card-content step-card-content">
3+
<div class="step-description" v-if="this.status==='previous'">
4+
{{$t(cardText)}}
5+
</div>
6+
<div class="step-actions" v-if="this.status==='current'">
7+
<div class="field" :class="yesSelected">
8+
<b-radio v-model="radio"
9+
native-value="yes">
10+
<span v-html="$t(yesText)" />
11+
</b-radio>
12+
</div>
13+
<div class="field" :class="noSelected">
14+
<b-radio v-model="radio"
15+
native-value="no">
16+
<span v-html="$t(noText)" />
17+
</b-radio>
18+
</div>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
name: 'FirstStep',
26+
props: {
27+
knowLicense: Boolean,
28+
status: String
29+
},
30+
computed: {
31+
cardText() {
32+
return this.$props.knowLicense ? 'stepper.fs.selected' : 'stepper.fs.not-selected'
33+
},
34+
radio: {
35+
get() {
36+
return this.$props.knowLicense ? 'yes' : 'no'
37+
},
38+
set() {
39+
console.log('Changing fs radio')
40+
this.$emit('knowLicenseChanged')
41+
}
42+
},
43+
question() {
44+
return 'stepper.fs.question'
45+
},
46+
yesText() {
47+
return 'stepper.fs.selected'
48+
},
49+
noText() {
50+
return 'stepper.fs.not-selected'
51+
},
52+
yesSelected() {
53+
if (this.$props.knowLicense) {
54+
return 'selected'
55+
} else {
56+
return 'not-selected'
57+
}
58+
},
59+
noSelected() {
60+
if (!this.$props.knowLicense) {
61+
return 'selected'
62+
} else {
63+
return 'not-selected'
64+
}
65+
}
66+
}
67+
}
68+
</script>
69+
70+
<style scoped>
71+
72+
</style>

‎src/components/HelpSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="column top-bottom-paddingless">
2+
<div class="help-section">
33
<h3 class="vocab-h3">{{$t('help.heading')}}</h3>
44
<ul class="help-links">
55
<li class="help-link"

‎src/components/LicenseUseCard.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div class="license-use-card">
3+
<h4 class="vocab-h4">Use Your License</h4>
4+
<p class="license-use-instructions">{{$t('use-license.instructions')}}</p>
5+
<b-tabs>
6+
<b-tab-item label="Website">
7+
{{$t('use-license.web-instructions')}}
8+
<SelectedLicenseCode v-model="value"/>
9+
</b-tab-item>
10+
<b-tab-item label="Print Work">
11+
Lorem ipsum dolor sit amet.
12+
</b-tab-item>
13+
<b-tab-item label="Media">
14+
Lorem ipsum dolor sit amet.
15+
</b-tab-item>
16+
</b-tabs>
17+
</div>
18+
</template>
19+
20+
<script>
21+
import SelectedLicenseCode from './SelectedLicenseCode'
22+
export default {
23+
name: 'LicenseUseCard',
24+
props: ['value'],
25+
components: {
26+
SelectedLicenseCode
27+
}
28+
}
29+
</script>
30+
31+
<style>
32+
.tabs span {
33+
font-weight: bold;
34+
}
35+
</style>

‎src/components/SelectedLicenseCard.vue‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="selected-license-card">
3+
<h3 class="vocab-h3">RECOMMENDED LICENSE</h3>
4+
<h4 class="vocab-h4">
5+
<a :href="this.$licenseUrl(selected.shortName)">{{selected.fullName}} ({{selected.shortName}})
6+
<LicenseIcons
7+
:url="this.$licenseUrl(selected.shortName)"
8+
:iconsArr="this.$licenseIconsArr(selected.shortName)"/>
9+
</a>
10+
</h4>
11+
<div class="license-description">{{selected.shortName}} {{$t('selected-license.description.common')}}</div>
12+
<p id='chooser-selected-description'>
13+
<b>{{selected.shortName.slice(0, selected.shortName.length-3)}}</b>
14+
{{this.$t("selected-license.description.common") }}
15+
<span v-if="!selected.fullName.includes('CC0')">
16+
{{this.$t("selected-license.description.non-cc0")}}</span>
17+
</p>
18+
<section class="license-visual-info">
19+
<ul class="license-list">
20+
<transition-group name="highlight">
21+
<li v-for="item in iconsList"
22+
:key="item">
23+
<LicenseIconography
24+
:icon-list="[item]"/>
25+
<span class="readable-string">
26+
{{ $t(`selected-license.description.${item}`)}}
27+
</span>
28+
</li>
29+
</transition-group>
30+
</ul>
31+
</section>
32+
</div>
33+
</template>
34+
35+
<script>
36+
import LicenseIcons from './LicenseIcons'
37+
import LicenseIconography from './LicenseIconography'
38+
export default {
39+
name: 'SelectedLicenseCard',
40+
components: {
41+
LicenseIcons,
42+
LicenseIconography
43+
},
44+
props: {
45+
selected: Object
46+
},
47+
computed: {
48+
iconsList() {
49+
return this.$licenseIconsArr(this.$props.selected.shortName)
50+
},
51+
licenseDescription() {
52+
const descriptionString = `${this.$licenseSlug(this.$props.selected.shortName)}-description`
53+
return this.$t(descriptionString)
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style scoped>
60+
61+
</style>

0 commit comments

Comments
 (0)