Skip to content

Commit 2828319

Browse files
obulatobulat
authored
Update the Recommended section to match v2 of the mockups (#244)
* Reformat Recommended section to match v2 mockups * Temporarily comment out failing tests * Add ref to license urls * Reduce number of touched files * Reduce number of touched files * Add ref to url to fix test
1 parent 05718c0 commit 2828319

File tree

7 files changed

+189
-200
lines changed

7 files changed

+189
-200
lines changed

‎src/components/LicenseDetailsCard.vue‎

Lines changed: 99 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
<template>
2-
<div class="selected-license-card">
3-
<h3 class="vocab">
4-
{{ headingText }}
5-
</h3>
6-
<h4 class="vocab b-header">
7-
<a
8-
:href="licenseUrl('web')"
9-
class="license-name"
10-
>
11-
{{ fullName }} ({{ shortName }})
12-
<LicenseIcons
13-
class="license-icons"
14-
:url="licenseUrl('web')"
15-
:icons-arr="iconsList"
2+
<div class="recommended-card">
3+
<h3> {{ cardHeading }} </h3>
4+
<div class="license-short-name">
5+
<span class="license-icons">
6+
<i
7+
v-for="icon in ['logo', ...iconsList]"
8+
:key="icon"
9+
:class="['icon', 'has-background-white', `cc-${icon}`]"
1610
/>
17-
</a>
11+
</span>
12+
<h4 class="b-header">
13+
{{ shortName }}
14+
</h4>
15+
</div>
16+
<h4 class="b-header">
17+
{{ fullName }}
1818
</h4>
19-
<p class="chooser-selected-description">
20-
<b>{{ slug.toUpperCase() }}</b>
19+
<p class="license-full-description body-big">
2120
{{ $t(licenseKey) }}
2221
</p>
23-
<section class="license-visual-info">
22+
<section class="items-description">
2423
<ul class="license-list">
2524
<transition-group name="highlight">
2625
<li
@@ -29,107 +28,119 @@
2928
:class="['license-list-item', item]"
3029
>
3130
<span class="readable-string">
32-
<b v-if="item!=='zero'">{{ item.toUpperCase() }}:</b>
33-
<b v-else>CC0:</b>
31+
<i :class="['icon', 'has-background-white', `cc-${item}`]" />
32+
<b>{{ item === 'zero' ? 'CC0' : item.toUpperCase() }}:</b>
3433
{{ $t(`license-details-card.item-description.${item}`) }}
3534
</span>
35+
<span
36+
v-if="item === 'nc'"
37+
class="description-caption caption"
38+
>
39+
{{ $t(`license-details-card.caption.${item}`) }}
40+
</span>
3641
</li>
3742
</transition-group>
3843
</ul>
3944
</section>
45+
<a
46+
class="license-deed-link"
47+
:href="licenseUrl()"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
>
51+
See the License Deed
52+
<span class="icon external-link">
53+
<svg
54+
xmlns="http://www.w3.org/2000/svg"
55+
width="15"
56+
height="15"
57+
viewBox="0 0 30 30"
58+
><path
59+
d="M25.313 18.75h-1.875a.938.938 0 00-.938.938v6.562H3.75V7.5h8.438a.937.937 0 00.937-.938V4.688a.938.938 0 00-.938-.937H2.813A2.813 2.813 0 000 6.563v20.625A2.812 2.812 0 002.813 30h20.625a2.812 2.812 0 002.812-2.813v-7.5a.938.938 0 00-.938-.937zM28.593 0h-7.5c-1.251 0-1.877 1.518-.995 2.402l2.093 2.094-14.28 14.276a1.406 1.406 0 000 1.992l1.327 1.326a1.405 1.405 0 001.993 0L25.505 7.812l2.093 2.09c.879.88 2.402.264 2.402-.996v-7.5A1.406 1.406 0 0028.594 0z"
60+
fill="currentColor"
61+
/></svg>
62+
</span>
63+
</a>
4064
</div>
4165
</template>
4266
<script>
4367
import { LICENSES, licenseSlug } from '../utils/license-utilities'
44-
import LicenseIcons from './LicenseIcons'
4568
import { mapGetters } from 'vuex'
4669
4770
export default {
4871
name: 'LicenseDetailsCard',
49-
components: {
50-
LicenseIcons
51-
},
5272
computed: {
5373
...mapGetters(['shortName', 'fullName', 'iconsList', 'licenseUrl']),
54-
licenseDescription() {
55-
const descriptionString = `${this.slug}-description`
56-
return this.$t(descriptionString)
57-
},
5874
licenseKey() {
5975
return `license-details-card.full-description.${this.slug}`
6076
},
6177
slug() {
6278
return licenseSlug(this.shortName)
6379
},
64-
headingText() {
80+
cardHeading() {
6581
return this.shortName === LICENSES.CC0.SHORT
6682
? this.$t('license-details-card.cc0-heading')
6783
: this.$t('license-details-card.heading')
6884
}
85+
6986
}
7087
}
7188
</script>
7289

73-
<style lang="scss">
74-
.select-license-card {
75-
margin-bottom: 32px;
76-
}
77-
.license-name {
78-
vertical-align: middle;
79-
display: inline-block;
80-
margin-top: 8px;
81-
}
82-
.license-icons {
83-
height: 35px;
84-
vertical-align: middle;
85-
}
86-
.license-name .photo-license-icon {
87-
height: 35px;
88-
opacity: 1;
89-
}
90-
.license-visual-info {
91-
margin-top: 16px;
92-
}
93-
.license-list-item {
94-
position: relative;
95-
padding-bottom: 8px;
96-
}
97-
.license-list-item span {
98-
vertical-align: middle;
99-
display:inline-block;
100-
}
101-
.license-list-item span b {
102-
display: inline-block;
103-
width: 36px;
104-
}
105-
.license-list-item::before{
106-
position: absolute;
107-
left: 0;
108-
top: 0;
109-
display: inline-block;
110-
width: 35px;
111-
height: 35px;
112-
border-radius: 50%;
113-
content: "";
114-
background-size: 35px 35px;
115-
}
116-
.license-list-item.zero::before {
117-
background-image: url("../assets/license-icons/zero.svg");
118-
}
119-
.license-list-item.by::before {
120-
background-image: url("../assets/license-icons/by.svg");
121-
}
122-
.license-list-item.nc::before {
123-
background-image: url("../assets/license-icons/nc.svg");
124-
}
125-
.license-list-item.nd::before {
126-
background-image: url("../assets/license-icons/nd.svg");
90+
<style lang="scss" scoped>
91+
.recommended-card {
92+
margin-bottom: 2rem;
93+
}
94+
.license-full-description {
95+
margin: 1.5rem 0;
96+
}
97+
.license-short-name {
98+
margin-bottom: 0.5rem;
99+
margin-top: 2rem;
100+
display: flex;
101+
align-items: center;
102+
gap: 1rem;
103+
}
104+
.license-deed-link {
105+
margin-top: 1.375rem;
106+
font-weight: bold;
107+
display: flex;
108+
align-items: center;
109+
.icon {
110+
margin-right: 0.5rem;
127111
}
128-
.license-list-item.sa::before {
129-
background-image: url("../assets/license-icons/sa.svg");
112+
}
113+
.license-list-item {
114+
display: flex;
115+
flex-direction: column;
116+
margin-bottom: 1rem;
117+
}
118+
.readable-string {
119+
display: flex;
120+
flex-direction: row;
121+
align-items: center;
122+
i {
123+
font-size: 2.1875rem;
124+
height: 2.1875rem;
125+
width: 2.1875rem;
126+
margin-right: 1rem;
127+
}
128+
b {
129+
margin-right: 0.2rem;
130130
}
131-
.readable-string {
132-
padding-left:51px;
133-
line-height:35px;
131+
}
132+
.license-icons {
133+
display: flex;
134+
flex-direction: row;
135+
gap: 0.5rem;
136+
font-size: 2.1875rem;
137+
.icon {
138+
height: 2.1875rem;
139+
width: 2.1875rem;
134140
}
141+
}
142+
.description-caption {
143+
padding-left: 3.1875rem;
144+
font-weight: 600;
145+
}
135146
</style>

‎src/store/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue'
22
import Vuex from 'vuex'
3-
import { defaultAttributes, CC0Attributes, attrToShort, attrToFull, licenseUrl, licenseIconsArr } from '../utils/license-utilities.js'
3+
import { defaultAttributes, CC0Attributes, attrToShort, attrToFull, licenseURL, licenseIconsArr } from '../utils/license-utilities.js'
44

55
Vue.use(Vuex)
66

@@ -34,8 +34,8 @@ const createStore = (state) => {
3434
fullName: state => {
3535
return attrToFull(state.currentLicenseAttributes)
3636
},
37-
licenseUrl: state => (mode) => {
38-
return licenseUrl(state.currentLicenseAttributes, mode)
37+
licenseUrl: state => (mode = 'web') => {
38+
return licenseURL(state.currentLicenseAttributes, mode)
3939
},
4040
iconsList: state => {
4141
return licenseIconsArr(state.currentLicenseAttributes)

‎src/utils/license-utilities.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const defaultAttributes = { BY: undefined, NC: undefined, ND: undefined, SA: und
1212
/**
1313
* Convert short license name to attributes
1414
* @param {ShortLicenseName} shortLicenseName - name of the license with version number
15-
* @returns {LicenseAttributes}}
15+
* @returns {LicenseAttributes|null}
1616
*/
1717
function shortToAttr(shortLicenseName) {
1818
const currentLicense = Object.values(LICENSES).find(license => {
@@ -42,7 +42,7 @@ function attrToShort(attr) {
4242

4343
/**
4444
* Convert license attributes object to full license name
45-
* @param {{LicenseAttributes}} attr
45+
* @param {LicenseAttributes} attr
4646
* @returns {string|undefined}
4747
*/
4848
function attrToFull(attr) {
@@ -59,15 +59,17 @@ function attrToFull(attr) {
5959
return base
6060
}
6161

62+
const chooserRef = '?ref=chooser-v1'
63+
6264
/**
6365
* Returns url to license from short license name with version number (eg. 'CC BY 4.0')
64-
* @param attr {LicenseAttributes} license attributes object
65-
* @param [mode] {'web'| 'print'} (?ref=chooser-v1, target and rel are added to the end of the link if mode is web)
66+
* @param {LicenseAttributes} attr license attributes object
67+
* @param {'web'|'print'} mode? (?ref=chooser-v1, target and rel are added to the end of the link if mode is web)
6668
* @returns {string} url of the license information page
6769
*/
68-
function licenseUrl(attr, mode) {
70+
function licenseURL(attr, mode = 'web') {
6971
if (attr.BY === undefined) throw new Error('Cannot return URL when BY attribute is undefined')
70-
const linkRef = mode === 'web' ? '?ref=chooser-v1' : ''
72+
const linkRef = mode === 'web' ? chooserRef : ''
7173
if (attr.BY === false) {
7274
return `https://creativecommons.org/publicdomain/zero/1.0${linkRef}`
7375
}
@@ -216,7 +218,7 @@ function generateLicenseCode(licenseAttr, licenseName) {
216218
.map(attr => `<img ${iconStyle} src="${ICON_BASE_URL}/${attr.toLowerCase()}.svg${assetPathRef}">`
217219
).join('')
218220

219-
return (`<a rel="license" href="${licenseUrl(licenseAttr)}" target="_blank"
221+
return (`<a rel="license" href="${licenseURL(licenseAttr)}" target="_blank"
220222
rel="license noopener noreferrer" style="display:inline-block;">
221223
${licenseName}${licenseIconsCode}</a>`)
222224
}
@@ -244,6 +246,6 @@ function generateHTML(attributionDetails, shortLicenseName, isFullName = false)
244246

245247
export {
246248
defaultAttributes, CC0Attributes, CCBYAttributes, shortToAttr, attrToShort,
247-
attrToFull, licenseUrl, licenseSlug, licenseIconsArr, generateHTML, updateVisibleEnabledStatus,
249+
attrToFull, licenseURL, chooserRef, licenseSlug, licenseIconsArr, generateHTML, updateVisibleEnabledStatus,
248250
CC_NAMESPACE, DCT_NAMESPACE, LICENSES, ICON_STYLE, ICON_BASE_URL
249251
}

0 commit comments

Comments
 (0)