Card styling and SelectedLicenseCode methods to computed properties

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

src/components/Chooser.vue

@@ -45,9 +45,7 @@ export default {
 }
 </script>
 <style lang="scss">
-    .column {
-        padding:0!important;
-    }
+
     header.card-header {
         justify-content: center;
         padding-top:1rem;

src/components/LicenseCard.vue

@@ -48,6 +48,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+    .column {
+        padding:0!important;
+    }
     div.card {
         height: 580px;
         border-top: 10px solid #04A635;

src/components/SelectedLicenseCode.vue

@@ -67,30 +67,6 @@ export default {
         }
     },
     methods: {
-        authorElement() {
-            return workAuthor({
-                creatorName: this.$props.value.attributionDetails.creatorName,
-                creatorProfileUrl: this.$props.value.attributionDetails.creatorProfileUrl
-            })
-        },
-        titleElement() {
-            const workUrl = this.$props.value.attributionDetails.workUrl
-            const workTitle = this.$props.value.attributionDetails.workTitle
-            if (!workTitle && !workUrl) {
-                return this.$t('this-work')
-            } else {
-                const titleSpan = workTitle ? `<span  rel="dc:title">${workTitle}</span>` : this.$t('this-work')
-                if (workUrl) {
-                    return `<a rel="cc:attributionURL" href="${workUrl}">${titleSpan}</a>`
-                } else {
-                    return titleSpan
-                }
-            }
-        },
-        workLicenseElement() {
-            return workLicense(this.licenseURL,
-                this.$props.value.shortName)
-        },
         onCopySuccess(e) {
             this.success = true
             this.$emit('copied', { content: e.text })
@@ -111,13 +87,38 @@ export default {
         licenseURL() {
             return this.$licenseUrl(this.$props.value.shortName)
         },
+        workLicenseElement() {
+            return workLicense(this.licenseURL,
+                this.$props.value.shortName)
+        },
+        authorElement() {
+            return workAuthor({
+                creatorName: this.$props.value.attributionDetails.creatorName,
+                creatorProfileUrl: this.$props.value.attributionDetails.creatorProfileUrl
+            })
+        },
+        titleElement() {
+            const workUrl = this.$props.value.attributionDetails.workUrl
+            const workTitle = this.$props.value.attributionDetails.workTitle
+            if (!workTitle && !workUrl) {
+                return this.$t('this-work')
+            } else {
+                const titleSpan = workTitle ? `<span rel="dc:title">${workTitle}</span>` : this.$t('this-work')
+                if (workUrl) {
+                    return `<a rel="cc:attributionURL" href="${workUrl}">${titleSpan}</a>`
+                } else {
+                    return titleSpan
+                }
+            }
+        },
         htmlElement() {
             const licenseText = this.$t('license-text', {
-                workTitle: this.titleElement(),
-                byLine: this.authorElement()
+                workTitle: this.titleElement,
+                byLine: this.authorElement
             })
-            const licenseIcons = `<span class="license-icons">${this.workLicenseElement()}</span>`
-            return `<p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">${licenseText}${licenseIcons}</p>`
+            const paragraphBeginning = '<p id="license-code" xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">'
+            const fullLicenseCode = `${paragraphBeginning}${licenseText}${this.workLicenseElement}</p>`
+            return fullLicenseCode
         },
         activeTab: {
             get() { return this.currentTab },

src/components/Stepper.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class='column is-three-fifths-tablet is-half-desktop'>
-        <div id="stepper" class="card">
+    <div class='column is-three-fifths-tablet is-half-desktop' id="stepper" >
+        <div class="card">
             <header class="card-header">
                 <h2 :class="'vocab-h2'">{{ $t('select-license-heading') }}</h2>
             </header>
@@ -182,6 +182,9 @@ export default {
     .card {
         height: 580px;
     }
+    #stepper.column {
+        padding:0!important;
+    }
     #stepper .card-header {
         border-top: 10px solid #05B5DA;
         background-color: #05B5DA;