Edit Footer, LicenseDetailsCard, LicenseDropdown, LicenseIconography and LicenseUseCard components

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

Author: obulat

src/assets/css/vocab.css

@@ -42,6 +42,7 @@
     font-size: 20px;
     line-height: 26px;
 }
+
 /* Vocabulary Text styles */
 .vocab-body {
     font-style: normal;
@@ -69,6 +70,7 @@
     line-height: 19px;
     padding-bottom: 8px;
 }
+
 /* Vocabulary colors */
 .normal-gray {
     color: #D8D8D8!important;
@@ -80,33 +82,7 @@
     color: #ED592F!important;
 }
 /* Vocabulary other styles */
-.vocab-container .vocab-grid .panel {
-    height: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-}
-
-.vocab.select-field.normal-sized {
-    font-size: 1rem;
-}
-
-.vocab.select-field > .field.has-addons {
-    padding-left: calc(1em + var(--select-field-addons-space));
-    margin-bottom: 0;
-    min-width: 10em;
-}
-
-.vocab.select-field > .field > option[disabled] {
-    opacity: 0.6;
-}
 .vocab.license-icons img {
     width: 35px;
+    height: 35px;
 }

src/components/Footer.vue

@@ -70,8 +70,7 @@ export default {
     padding-bottom:0;
 }
 .chooser-footer a,
-.middle-column .footer-licensing-text a
-{
+.middle-column .footer-licensing-text a {
     color:  #05B5DA;
 }
 .chooser-footer a:hover,
@@ -91,4 +90,19 @@ export default {
 .donation-column {
     padding-top: 118px;
 }
+@media only screen and (max-width: 768px) {
+    .chooser-footer .chooser-footer-container {
+        display: grid;
+        grid-template-columns: 100%;
+    }
+    .middle-column {
+        padding-top: 1rem;
+    }
+    .donation-column {
+        padding-top: 1rem;
+    }
+    .footer-cc-logo {
+        max-width: 300px;
+    }
+}
 </style>

src/components/LicenseDetailsCard.vue

@@ -14,8 +14,8 @@
                 />
             </a>
         </h4>
-        <p id="chooser-selected-description">
-            <b>{{ licenseSlug }}</b>
+        <p class="chooser-selected-description">
+            <b>{{ slug.toUpperCase() }}</b>
             {{ $t(licenseKey) }}
         </p>
         <section class="license-visual-info">
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+import { licenseSlug } from '../utils/license-utilities'
 import LicenseIcons from './LicenseIcons'
 import { mapGetters } from 'vuex'
 
@@ -50,20 +51,23 @@ export default {
     computed: {
         ...mapGetters(['shortName', 'fullName', 'iconsList', 'licenseUrl']),
         licenseDescription() {
-            const descriptionString = `${this.$licenseSlug(this.shortName)}-description`
+            const descriptionString = `${this.slug}-description`
             return this.$t(descriptionString)
         },
-        licenseSlug() {
-            return this.shortName.slice(0, this.shortName.length - 4)
-        },
         licenseKey() {
-            return `license-details-card.full-description.${this.licenseSlug.toLowerCase().replace(' ', '-')}`
+            return `license-details-card.full-description.${this.slug}`
+        },
+        slug() {
+            return licenseSlug(this.shortName)
         }
     }
 }
 </script>
 
 <style lang="scss">
+    .select-license-card {
+        margin-bottom: 32px;
+    }
     .license-name {
         vertical-align: middle;
         display: inline-block;

src/components/LicenseDropdown.vue

@@ -1,21 +1,19 @@
 <template>
-    <div class="license-dropdown">
-        <b-field>
-            <b-select
-                :placeholder="this.$t('stepper.DD.placeholder')"
-                :value="shortName"
-                @input="setCurrentLicense"
+    <b-field class="license-dropdown">
+        <b-select
+            :placeholder="this.$t('stepper.DD.placeholder')"
+            :value="shortName"
+            @input="setCurrentLicense"
+        >
+            <option
+                v-for="license in licenseList"
+                :key="license"
+                :value="license"
             >
-                <option
-                    v-for="license in licenseList"
-                    :key="license"
-                    :value="license"
-                >
-                    {{ license }}
-                </option>
-            </b-select>
-        </b-field>
-    </div>
+                {{ license }}
+            </option>
+        </b-select>
+    </b-field>
 </template>
 <script>
 
@@ -56,14 +54,14 @@ export default {
 }
 </script>
 <style lang="scss">
-    div.license-dropdown {
+    .license-dropdown {
         margin-top: 1rem;
-        label.label{
+        .label{
             font-weight: normal;
             opacity: 0.8;
             font-size: 1em;
         }
-        span.select, select {
+        .select, select {
             width: 100%;
         }
     }

src/components/LicenseIconography.vue

@@ -9,8 +9,7 @@
     <FontAwesomeIcon
       v-for="(icon, index) in processedIconList"
       :key="index"
-      :icon="['fab', icon]"
-      style="width: 35px; height: 35px"/>
+      :icon="['fab', icon]"/>
   </span>
 </template>
 

src/components/LicenseUseCard.vue

@@ -9,45 +9,47 @@
         <b-tabs>
             <b-tab-item :label="$t('license-use.web-tab-heading')">
                 {{ $t('license-use.web-instructions') }}
-                <SelectedLicenseCode
-                    v-model="value"
-                    is-web="true"
+                <LicenseCopy
+                    :is-web="true"
                 />
             </b-tab-item>
             <b-tab-item :label="$t('license-use.print-media-tab-heading')">
                 {{ $t('license-use.print-media-instructions') }}
-                <PlaintextLicenseCode
-                    v-model="value"
-                    is-web="false"
+                <LicenseCopy
+                    :is-web="false"
                 />
             </b-tab-item>
         </b-tabs>
     </div>
 </template>
 
 <script>
-import SelectedLicenseCode from './WebLicenseCode'
-import PlaintextLicenseCode from './PrintMediaLicenseCode'
+import LicenseCopy from './LicenseCopy'
 export default {
     name: 'LicenseUseCard',
     components: {
-        SelectedLicenseCode,
-        PlaintextLicenseCode
+        LicenseCopy
     }
 }
 </script>
 
 <style lang="scss">
+.license-use-card {
+    margin-bottom: 24px;
+}
+.license-use-card .h4b {
+    color: black;
+}
 .tabs span {
     font-weight: bold;
 }
-    .license-use-card .tabs .is-active a {
-        margin-bottom: -2px;
-        border-bottom: 3px solid #04a434;
-        span {
-            font-weight: 700;
-            opacity:1;
-            color: black;
-        }
+.license-use-card .tabs .is-active a {
+    margin-bottom: -2px;
+    border-bottom: 3px solid #04a434;
+    span {
+        font-weight: 700;
+        opacity:1;
+        color: black;
     }
+}
 </style>