Skip to content

Commit 1760bfb

Browse files
obulatobulat
committed
Add color to cards and change yes/no options
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent 8a1b672 commit 1760bfb

File tree

8 files changed

+177
-121
lines changed

8 files changed

+177
-121
lines changed

‎src/components/Chooser.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,24 @@ export default {
4545
}
4646
</script>
4747
<style lang="scss">
48+
.column {
49+
padding:0!important;
50+
}
4851
header.card-header {
4952
justify-content: center;
53+
padding-top:1rem;
5054
h2.vocab-h2 {
55+
font-family: Roboto Condensed;
5156
font-style: normal;
5257
font-weight: bold;
53-
font-size: 25px;
54-
line-height: 38px;
55-
color: #333333;
56-
margin: 1.5% auto;
58+
font-size: 28px;
59+
line-height: 36px;
60+
/* identical to box height, or 129% */
61+
letter-spacing: 0.02em;
62+
text-transform: uppercase;
5763
}
5864
}
5965
div.card-content {
60-
padding-top: 0.5rem;
66+
padding: 0.5rem 2rem 2rem;
6167
}
6268
</style>

‎src/components/LicenseCard.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export default {
5050
<style lang="scss" scoped>
5151
div.card {
5252
height: 540px;
53+
border-top: 10px solid #04A635;
5354
}
5455
@media only screen and (max-width: 670px) {
5556
div.card {

‎src/components/SelectedLicenseCode.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,10 +126,14 @@ export default {
126126
div.license-code {
127127
margin-top: 1rem;
128128
h2.vocab-h2{
129+
font-family: Roboto Condensed;
130+
font-style: normal;
129131
font-weight: bold;
130-
font-size: 25px;
131-
line-height: 38px;
132-
color: #333333;
132+
font-size: 28px;
133+
line-height: 36px;
134+
/* identical to box height, or 129% */
135+
letter-spacing: 0.02em;
136+
text-transform: uppercase;
133137
}
134138
div.attribution-tab {
135139
margin-bottom: 0;
@@ -152,6 +156,7 @@ export default {
152156
}
153157
&:last-of-type{
154158
margin-left: auto;
159+
margin-bottom: -1px;
155160
a {
156161
padding:0;
157162
}

‎src/components/SelectedLicenseDropdown.vue‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
22
<div class="license-dropdown">
3-
<p
4-
:class="'dropdown-instruction'">
5-
If you already know which license you need, just select it in the dropdown below.</p>
6-
<b-field label="Current selection">
3+
<b-field label="You can select the license you need in the dropdown below:">
74
<b-select placeholder="Creative Commons License"
85
v-model="currentLicense">
96
<option
@@ -64,31 +61,33 @@ export default {
6461
</script>
6562
<style lang="scss">
6663
div.license-dropdown {
67-
p.dropdown-instruction{
68-
padding-bottom: 1.4rem;
69-
text-align: center;
70-
font-size: 0.875em;
64+
margin-top: 1rem;
65+
label.label{
66+
font-weight: normal;
7167
opacity: 90%;
7268
}
73-
div.field {
74-
display: grid;
75-
grid-template-columns: 1fr 2fr;
76-
grid-gap: 5px;
77-
label.label {
78-
font-style: normal;
79-
font-weight: bold;
80-
font-size: 20px;
81-
line-height: 30px;
82-
color: #333333;
83-
}
84-
div.control {
85-
span.select {
86-
width: 100%;
87-
select {
88-
width: 100%;
89-
}
90-
}
91-
}
69+
span.select, select {
70+
width: 100%;
9271
}
72+
/*div.field {*/
73+
/* display: grid;*/
74+
/* grid-template-columns: 1fr 2fr;*/
75+
/* grid-gap: 5px;*/
76+
/* label.label {*/
77+
/* font-style: normal;*/
78+
/* font-weight: bold;*/
79+
/* font-size: 20px;*/
80+
/* line-height: 30px;*/
81+
/* color: #333333;*/
82+
/* }*/
83+
/* div.control {*/
84+
/* span.select {*/
85+
/* width: 100%;*/
86+
/* select {*/
87+
/* width: 100%;*/
88+
/* }*/
89+
/* }*/
90+
/* }*/
91+
/*}*/
9392
}
9493
</style>

‎src/components/SelectedLicenseInfo.vue‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,19 @@
33
<h4>
44
<a :href="this.$licenseUrl(value.shortName)">{{ value.fullName }}</a>
55
</h4>
6-
<hr class="h4-underline"/>
76
<section class="license-visual-info">
87
<ul class="license-list">
9-
<transition-group name="highlight">
10-
<li v-for="item in iconsList"
11-
:key="item">
12-
<LicenseIconography
13-
:icon-list="[item]"/>
14-
<span class="readable-string">
15-
{{ readableString(item)}}
16-
</span>
17-
</li>
18-
</transition-group>
19-
20-
</ul>
8+
<transition-group name="highlight">
9+
<li v-for="item in iconsList"
10+
:key="item">
11+
<LicenseIconography
12+
:icon-list="[item]"/>
13+
<span class="readable-string">
14+
{{ readableString(item)}}
15+
</span>
16+
</li>
17+
</transition-group>
18+
</ul>
2119
<a href="https://creativecommons.org/freeworks">
2220
<div v-if="this.freeWorkStatus" class="license-freeworks-status">
2321
<img src="../assets/license-icons/fc_approved_small.png" alt="">
@@ -78,19 +76,20 @@ export default {
7876
h4 {
7977
line-height: 2;
8078
font-weight: 600;
81-
margin-top: 1rem;
82-
}
83-
hr.h4-underline {
84-
margin: 0 0 0.5rem;
85-
background-color: #ED592F;
79+
/*margin-top: 1rem;*/
80+
margin-left:0.7rem;
81+
a {
82+
text-decoration: underline;
83+
}
8684
}
8785
section.license-visual-info {
8886
display:grid;
8987
grid-template-columns: 3fr 1fr;
9088
ul.license-list {
9189
height: 87px;
92-
90+
margin-top:0.5rem;
9391
li {
92+
margin-left:0.7rem;
9493
span.license-icons {
9594
svg {
9695
width: 25px !important;
@@ -100,7 +99,7 @@ export default {
10099
101100
span.readable-string {
102101
vertical-align: top;
103-
padding-left: 20px;
102+
padding-left: 0.5rem;
104103
font-weight: 500;
105104
}
106105
}

‎src/components/SelectionStep.vue‎

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,42 @@
11
<template>
22
<div class="selection-step">
33
<p class="selection-question">{{ this.$t(question) }}</p>
4-
<div class="selection-buttons">
5-
<div class="selection-button selection-button-no">
6-
<b-button
7-
icon-left=times
8-
:type=this.noButtonType
9-
:outlined=noButtonOutlined
10-
@click="update(false)">
11-
No
12-
</b-button>
13-
</div>
14-
<div class="selection-button selection-button-yes">
15-
<b-button
16-
icon-left=check
17-
:type=this.yesButtonType
18-
:outlined=yesButtonOutlined
19-
@click="update(true)">
20-
Yes
21-
</b-button>
22-
</div>
4+
<div class="selection-choice selection-yes"
5+
:class="yesClass"
6+
@click="update(true)">
7+
<b-button
8+
icon-left=check
9+
type="is-primary"
10+
inverted
11+
outlined
12+
@click="update(true)">
13+
Yes
14+
</b-button>
15+
<p :class="yesClass"
16+
v-html="$t(yesText)"/>
17+
18+
</div>
19+
20+
<div class="selection-choice selection-no"
21+
:class="noClass"
22+
@click="update(false)">
23+
24+
<b-button
25+
icon-left=times
26+
type="is-primary"
27+
inverted
28+
outlined
29+
@click="update(false)">
30+
No
31+
</b-button>
32+
<p :class="noClass"
33+
v-html="$t(noText)"/>
2334
</div>
24-
<p v-html="$t(currentText)"/>
25-
<hr>
2635
</div>
2736
</template>
2837

2938
<script>
39+
3040
export default {
3141
name: 'SelectionStep',
3242
props: ['selected', 'stepId'],
@@ -41,9 +51,11 @@ export default {
4151
question() {
4252
return `stepper-question.${this.stepId.toLowerCase()}`
4353
},
44-
currentText() {
45-
const selectedModifier = this.isSelected ? '' : 'not-'
46-
return `stepper-description.${this.stepId.toLowerCase()}.${selectedModifier}selected`
54+
yesText() {
55+
return `stepper-description.${this.stepId.toLowerCase()}.selected`
56+
},
57+
noText() {
58+
return `stepper-description.${this.stepId.toLowerCase()}.not-selected`
4759
},
4860
isSelected: {
4961
get() { return this.selected },
@@ -62,6 +74,12 @@ export default {
6274
},
6375
noButtonOutlined() {
6476
return this.isSelected
77+
},
78+
yesClass() {
79+
return this.isSelected ? 'selected' : 'not-selected'
80+
},
81+
noClass() {
82+
return this.isSelected ? 'not-selected' : 'selected'
6583
}
6684
},
6785
watch: {
@@ -72,25 +90,31 @@ export default {
7290
}
7391
</script>
7492

75-
<style scoped>
93+
<style lang="scss" scoped>
7694
.selection-question {
77-
text-align: center;
7895
margin-bottom: 1rem;
79-
font-weight: 600;
96+
color:white;
8097
}
81-
.selection-buttons {
82-
display:grid;
83-
grid-template-columns: 1fr 1fr;
84-
grid-gap: 2rem;
85-
margin-bottom:1rem;
98+
.selection-choice {
99+
display: grid;
100+
grid-template-columns: 1fr 5fr;
101+
grid-gap: 1rem;
102+
padding: 1rem 3rem;
103+
margin-left: -3rem;
104+
margin-right: -3rem;
105+
border-top: 1px dotted white;
106+
border-bottom: 1px dotted white;
107+
&:hover {
108+
background-color: #FB7729;
109+
}
86110
}
87-
.selection-button {
88-
align-self: center;
111+
p.selected {
112+
color:white;
89113
}
90-
.selection-button-no {
91-
justify-self: end;
92-
}
93-
.selection-button-yes {
94-
justify-self: start;
114+
div.selection-choice.selected {
115+
background-color: darken(#05B5DA, 10%);
116+
&:hover {
117+
background-color: #FB7729;
118+
}
95119
}
96120
</style>

0 commit comments

Comments
 (0)