Tweak styling and Stepper

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

Author: obulat

src/components/SelectedLicenseInfo.vue

@@ -22,16 +22,16 @@
                     </li>
                 </transition-group>
             </ul>
-            <a href="https://creativecommons.org/freeworks">
-                <div v-if="this.freeWorkStatus" class="license-freeworks-status">
-                    <img src="../assets/license-icons/fc_approved_small.png" alt="">
-                    <p>Free Culture License</p>
-                </div>
-                <div v-else class="license-freeworks-status">
-                    <img v-if="!this.freeWorkStatus" src="../assets/license-icons/fc_dubious.png" alt="">
-                    <p>Not a Free Culture License</p>
-                </div>
-            </a>
+            <div class="freeworks-status__div">
+                <a href="https://creativecommons.org/freeworks">
+                    <img v-if="this.freeWorkStatus" src="../assets/license-icons/fc_approved_small.png" alt="" />
+                    <img v-else src="../assets/license-icons/fc_dubious.png" />
+                </a>
+            </div>
+            <p class="freeworks-status__p">
+                <a href="https://creativecommons.org/freeworks">
+                {{this.freeWorkStatusText}}</a>
+            </p>
         </section>
 
     </div>
@@ -53,6 +53,9 @@ export default {
             const short = this.$props.value.shortName.toLowerCase()
             return !(short.includes('nc') || short.includes('nd'))
         },
+        freeWorkStatusText() {
+            return this.freeWorkStatus ? this.$t('free-culture-work.yes') : this.$t('free-culture-work.no')
+        },
         licenseDescription() {
             const descriptionString = `${this.$licenseSlug(this.selectedLicense)}-description`
             return this.$t(descriptionString)
@@ -99,16 +102,21 @@ export default {
                 }
 
             }
-            div.license-freeworks-status{
+            .freeworks-status__div{
                 justify-content: center;
                 text-align:center;
                 img {
                     width: 76px;
                     height: 76px;
                 }
-                p {
-                    font-size: 13px;
-                    line-height: 19px;                }
+            }
+            .freeworks-status__p {
+                text-align:right;
+                grid-row:2;
+                grid-column: 1 / span 2;
+                a {
+                    text-decoration: underline;
+                }
             }
         }
         div {

src/components/SelectionStep.vue

@@ -67,6 +67,10 @@ export default {
         line-height: 26px;
         color: #333333;
     }
+    .field {
+        padding: 1rem;
+        margin-bottom: 0;
+    }
     .field.not-selected {
         opacity: 70%;
     }
@@ -75,8 +79,16 @@ export default {
         -webkit-transform: scale(0.98);
         -ms-transform: scale(.98);
         transform: scale(.98);
+        border: 1px solid rgba(237,89,47, 0.5);
+        border-radius: 5px;
     }
     .field:active {
         color:  #ED592F;
     }
+    .step-content {
+        height: 285px;
+    }
+    .step-navigation {
+        text-align: center;
+    }
 </style>

src/components/Stepper.vue

@@ -113,7 +113,7 @@ export default {
             } else if (attrName === 'wv') {
                 return 'exclamation-circle'
             } else if (attrName === 'ad') {
-                return 'check'
+                return 'user-circle'
             } else {
                 return `creative-commons-${attrName.toLowerCase()}`
             }
@@ -155,7 +155,7 @@ export default {
             if (this.$props.value.shortName.includes('CC0')) {
                 return 'is-step-selected'
             }
-            if (attrName === 'wv' || attrName === 'ad' || !this.$props.value.shortName.includes(attrName)) {
+            if (!this.$props.value.shortName.includes(attrName)) {
                 return 'is-step-not_selected'
             } else { return 'is-step-selected' }
         },
@@ -182,16 +182,15 @@ export default {
     .card {
         height: 580px;
     }
-    div#stepper .card-header {
+    #stepper .card-header {
         border-top: 10px solid #05B5DA;
         background-color: #05B5DA;
         padding-bottom: 1rem;
         box-shadow: none;
         color:white;
     }
     .steps {
-        margin-top: 2.5rem;
-        margin-bottom: 1rem;
+        margin: 1.5rem -2rem 1rem;
     }
     #stepper .b-steps .steps.is-small .step-items .step-item .step-details {
         padding-top: 0.4em;
@@ -204,6 +203,7 @@ export default {
     }
     nav.step-navigation {
         margin-top: 0;
+        text-align:center;
     }
     .steps.is-small .icon svg {
         font-size: 2rem!important;
@@ -254,9 +254,48 @@ export default {
         border-color: #04a635;
         color: #04a635;
     }
-    .is-active .icon svg {
-        width: 2rem;
-        height: 2rem;
+    .is-step-selected .icon svg {
+        font-size:2rem!important;
+        width: 2rem!important;
+        height: 2rem!important;
+    }
+    .is-step-selected .step-marker{
+        width: 2.5rem!important;
+        height:2.5rem!important;
+        left: 50%!important;
+        top: -17%;
+        margin-left: -1.25rem!important;
+    }
+    .pagination-next {
+        width: 200px;
+        background-color: #04A635;
+        color:white;
+    }
+    .pagination-next span {
+        margin-left: auto;
+    }
+    .pagination-next:after {
+        content:"Go to the next step";
+        color: white;
+        position: absolute;
+        top: 3.5px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+    .pagination-previous {
+        width: 200px;
+    }
+    .pagination-previous span {
+        margin-right: auto;
+    }
+    .pagination-previous:after {
+        content: "Change previous step";
+        position: absolute;
+        top: 3.5px;
+        left: 0;
+        right: 0;
+        bottom: 0;
     }
     @media only screen and (max-width: 670px) {
         div.card {
@@ -265,5 +304,12 @@ export default {
         section.step-content {
             height: auto;
         }
+
+    }
+    @media only screen and (max-width: 900px) {
+        .step-title {
+            white-space: normal;
+            line-height: 1;
+        }
     }
 </style>

src/locales/en.json

@@ -40,8 +40,9 @@
     "selected-license-instructions": "If you already know which license you need, just select it in the dropdown below.",
     "use-license-heading": "Use your license",
     "license-description": {
-        "common": "allows others to share, distribute, remix, adapt, and build upon your work, provided that: ",
-        "cc0": "Public Domain",
+        "common": "allows others to share, distribute, remix, adapt, and build upon your work",
+        "non-cc0": ", provided that:",
+        "zero": "without restrictions (Public Domain)",
         "by": "the creator is credited",
         "nc": "the use is non-commercial",
         "nd": "only the original work is shared",
@@ -59,5 +60,13 @@
     },
     "this-work": "This work",
     "license-text": "{workTitle} {byLine} is licensed under ",
-    "this-work": "This work"
+    "step-navigation" : {
+        "previous": "Change earlier step" ,
+        "next": ""
+    },
+    "use-license-hint": "Learn more about how to use your license",
+    "free-culture-work": {
+        "yes": "Free Culture License",
+        "no": "Not a Free Culture License"
+    }
 }

src/main.js

@@ -6,14 +6,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 // internal icons
 import {
     faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
-    faArrowUp, faAngleRight, faAngleLeft, faAngleDown,
+    faArrowUp, faAngleRight, faAngleLeft, faAngleDown, faUserCircle, faQuestionCircle,
     faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faCopy
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import LicenseUtilities from './utils/license-utilities'
 
 library.add(faCheck, faCheckCircle, faInfoCircle, faExclamationTriangle, faExclamationCircle,
-    faArrowUp, faAngleRight, faAngleLeft, faAngleDown,
+    faArrowUp, faAngleRight, faAngleLeft, faAngleDown, faUserCircle, faQuestionCircle,
     faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faCopy)
 Vue.component('vue-fontawesome', FontAwesomeIcon)
 Vue.config.productionTip = false