Skip to content

Commit d54f5aa

Browse files
obulatobulat
committed
Make license description clearer
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent 89130b5 commit d54f5aa

File tree

4 files changed

+60
-102
lines changed

4 files changed

+60
-102
lines changed

‎src/components/LicenseDescription.vue

-31
This file was deleted.

‎src/components/SelectedLicenseDropdown.vue

+3-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="license-dropdown">
3-
<b-field label="You can select the license you need in the dropdown below:">
3+
<b-field :label="this.$t('license-dropdown-label')">
44
<b-select placeholder="Creative Commons License"
55
v-model="currentLicense">
66
<option
@@ -64,30 +64,11 @@ export default {
6464
margin-top: 1rem;
6565
label.label{
6666
font-weight: normal;
67-
opacity: 90%;
67+
opacity: 80%;
68+
font-size: 1em;
6869
}
6970
span.select, select {
7071
width: 100%;
7172
}
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-
/*}*/
9273
}
9374
</style>

‎src/components/SelectedLicenseInfo.vue

+47-42
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,59 @@
33
<h4>
44
<a :href="this.$licenseUrl(value.shortName)">{{ value.fullName }}</a>
55
</h4>
6-
<section class="license-visual-info">
7-
<ul class="license-list">
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>
19-
<a href="https://creativecommons.org/freeworks">
20-
<div v-if="this.freeWorkStatus" class="license-freeworks-status">
21-
<img src="../assets/license-icons/fc_approved_small.png" alt="">
22-
<p>Free Culture License</p>
23-
</div>
24-
<div v-else class="license-freeworks-status">
25-
<img v-if="!this.freeWorkStatus" src="../assets/license-icons/fc_dubious.png" alt="">
26-
<p>Not a Free Culture License</p>
27-
</div>
28-
</a>
29-
</section>
30-
<LicenseDescription
31-
:selectedLicense="value.shortName"/>
6+
<p id='chooser-selected-description'>
7+
<b>{{this.value.shortName.slice(0, this.value.shortName.length-3)}}</b> {{
8+
this.$t("license-description.common") }} <span
9+
v-if="!value.fullName.includes('CC0')">{{this.$t("license-description.non-cc0")
10+
}}</span>
11+
</p>
12+
<section class="license-visual-info">
13+
<ul class="license-list">
14+
<transition-group name="highlight">
15+
<li v-for="item in iconsList"
16+
:key="item">
17+
<LicenseIconography
18+
:icon-list="[item]"/>
19+
<span class="readable-string">
20+
{{ $t(`license-description.${item}`)}}
21+
</span>
22+
</li>
23+
</transition-group>
24+
</ul>
25+
<a href="https://creativecommons.org/freeworks">
26+
<div v-if="this.freeWorkStatus" class="license-freeworks-status">
27+
<img src="../assets/license-icons/fc_approved_small.png" alt="">
28+
<p>Free Culture License</p>
29+
</div>
30+
<div v-else class="license-freeworks-status">
31+
<img v-if="!this.freeWorkStatus" src="../assets/license-icons/fc_dubious.png" alt="">
32+
<p>Not a Free Culture License</p>
33+
</div>
34+
</a>
35+
</section>
36+
3237
</div>
3338
</template>
3439
<script>
35-
import LicenseDescription from './LicenseDescription'
3640
import LicenseIconography from './LicenseIconography'
3741
3842
export default {
3943
name: 'SelectedLicenseInfo',
4044
props: ['value'],
4145
components: {
42-
LicenseDescription,
4346
LicenseIconography
4447
},
45-
methods: {
46-
readableString(shortString) {
47-
const readableStrings = {
48-
cc0: 'Public Domain',
49-
by: 'The creator must be credited',
50-
nc: 'Commercial use not permitted',
51-
nd: 'No derivatives or modification permitted',
52-
sa: 'Share allowed only on the same conditions'
53-
}
54-
return readableStrings[shortString] ? readableStrings[shortString] : 'Public Domain'
55-
}
56-
},
5748
computed: {
5849
iconsList() {
5950
return this.$licenseIconsArr(this.$props.value.shortName)
6051
},
6152
freeWorkStatus() {
6253
const short = this.$props.value.shortName.toLowerCase()
6354
return !(short.includes('nc') || short.includes('nd'))
55+
},
56+
licenseDescription() {
57+
const descriptionString = `${this.$licenseSlug(this.selectedLicense)}-description`
58+
return this.$t(descriptionString)
6459
}
6560
}
6661
}
@@ -87,9 +82,8 @@ export default {
8782
grid-template-columns: 3fr 1fr;
8883
ul.license-list {
8984
height: 87px;
90-
margin-top:0.5rem;
85+
margin-top:0.3rem;
9186
li {
92-
margin-left:0.7rem;
9387
span.license-icons {
9488
svg {
9589
width: 25px !important;
@@ -121,4 +115,15 @@ export default {
121115
background-color:white;
122116
}
123117
}
118+
#chooser-selected-description {
119+
margin-top: 2rem;
120+
}
121+
@media only screen and (max-width: 670px) {
122+
p {
123+
font-size: 14px;
124+
}
125+
126+
.mobile-hide { display: none; }
127+
.mobile-show { display: block; }
128+
}
124129
</style>

‎src/locales/en.json

+10-7
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,16 @@
4141
"selected-license-heading": "Your license",
4242
"selected-license-instructions": "If you already know which license you need, just select it in the dropdown below.",
4343
"use-license-heading": "Use your license",
44-
"cc0-description": "By using CC0, you waive all copyright and related rights\ntogether with all associated claims and causes of action with\nrespect to this work to the extent possible under the law.\nYou let others copy, modify, distribute, and perform the work,\neven for commercial purposes, all without asking permission.",
45-
"cc-by-description": "The CC BY license allows others to distribute, remix, adapt, and build upon your work, even commercially, as long as they credit you.",
46-
"cc-by-nc-description": "CC BY-NC allows others non-commercial use, distribution, adaptation of your work, as long as they credit you.",
47-
"cc-by-nd-description": "CC BY-ND means that people using your work may not share any adaptations of your work, but they are free to distribute your work, even commercially, and must credit you",
48-
"cc-by-sa-description": "Similar to the CC BY license, BY-SA allows others to distribute, remix, adapt, and build upon your work, even commercially, as long as they credit you for the original creation, and share the derivative work under the same license.",
49-
"cc-by-nc-sa-description": "CC BY-NC-SA means that others are free to distribute, remix, adapt, and build upon your work, as long as they credit you, and adaptations are shared under the same license, and as long as the work is not used for commercial purposes.",
50-
"cc-by-nc-nd-description": "CC BY-NC-ND means that others are free to distribute your work, but not for commercial purposes, and that others may not remix, adapt, or build upon your work. Others must credit you when using your work.",
44+
"license-description": {
45+
"common": "allows others to share, distribute, remix, adapt, and build upon your work",
46+
"non-cc0": ", provided that:",
47+
"zero": "without restrictions (Public Domain dedication)",
48+
"by": "the creator is credited",
49+
"nc": "the use is non-commercial",
50+
"nd": "only the original work is shared",
51+
"sa": "the work is shared on the same conditions"
52+
},
53+
"license-dropdown-label": "You can select the license you need in the dropdown below:",
5154
"rich-text-label": "Rich Text",
5255
"html-label": "HTML",
5356
"copy-label": "Copy",

0 commit comments

Comments
 (0)