Update right column styles

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

Author: obulat

src/App.vue

@@ -2,10 +2,19 @@
     <div id="app">
         <Header :title="$t('app-title')"/>
         <div class="container" id="site-container">
+            <div class="page-head columns">
+                <div class="column">
+                    <h2 class="vocab h2a ha">{{$t('select-license.heading')}}</h2>
+                    <p class="stepper-instructions vocab-body body-bigger">{{$t('select-license.instructions')}}</p>
+                </div>
+                <div class="column">
+                    <LocaleChooser />
+                </div>
+            </div>
             <div class="columns">
             <Stepper v-model="currentStepId" />
             <div class="column" >
-                <LocaleChooser />
+                <div class="fixed-right-column">
                 <SelectedLicenseCard
                     v-if="showLicense"
                 />
@@ -89,8 +98,12 @@ export default {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         color: #2c3e50;
+        counter-reset: step-counter;
+    }
+    .fixed-right-column {
+        position: sticky;
+        top: 10px;
     }
-
     #site-container {
         padding-top: 2rem;
         padding-bottom: 2%;

src/components/LicenseIcons.vue

@@ -26,15 +26,10 @@ export default LicenseIcons
         display: inline-block;
         white-space: nowrap;
         vertical-align: text-bottom;
-        opacity: .7;
         margin-right:3px;
-        height: 22px !important;
-    &:hover {
-        opacity: 1;
     }
-  }
-  .photo-license-icon {
+    .photo-license-icon {
       height: inherit;
       margin-left: 3px;
-  }
+    }
 </style>

src/components/LicenseUseCard.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="license-use-card">
-    <h4 class="vocab-h4">Use Your License</h4>
+    <h4 class="vocab h4b hb">Use Your License</h4>
     <p class="license-use-instructions">{{$t('use-license.instructions')}}</p>
     <b-tabs>
         <b-tab-item label="Website">

src/components/SelectedLicenseCard.vue

@@ -18,12 +18,11 @@
         <ul class="license-list">
             <transition-group name="highlight">
                 <li v-for="item in iconsList"
+                    :class="['license-list-item', item]"
                     :key="item">
-                    <LicenseIconography
-                        :icon-list="[item]"/>
                     <span class="readable-string">
-                            {{ $t(`selected-license.description.${item}`)}}
-                        </span>
+                        <b>{{item.toUpperCase()}}:</b> {{$t(`selected-license.description.${item}`)}}
+                    </span>
                 </li>
             </transition-group>
         </ul>
@@ -33,14 +32,12 @@
 
 <script>
 import LicenseIcons from './LicenseIcons'
-import LicenseIconography from './LicenseIconography'
 import { mapGetters } from 'vuex'
 
 export default {
     name: 'SelectedLicenseCard',
     components: {
-        LicenseIcons,
-        LicenseIconography
+        LicenseIcons
     },
     computed: {
         ...mapGetters(['shortName', 'fullName', 'iconsList', 'licenseUrl']),
@@ -55,6 +52,60 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+    .license-name {
+        vertical-align: middle;
+        display: inline-block;
+        margin-top: 8px;
+    }
+    .license-name .photo-license-icons {
+        height: 35px;
+        vertical-align: middle;
+    }
+    .license-name .photo-license-icon {
+        height: 35px;
+        opacity: 1;
+    }
+    .license-visual-info {
+        margin-top: 16px;
+    }
+    .license-list-item {
+        position: relative;
+        padding-bottom: 8px;
+    }
+    .license-list-item span {
+        vertical-align: middle;
+        display:inline-block;
+    }
+    .license-list-item span b {
+        display: inline-block;
+        width: 24px;
+    }
+    .license-list-item::before{
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: inline-block;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        content: "";
+        background-size: 35px 35px;
+    }
+    .license-list-item.by::before {
+        background-image: url("../assets/license-icons/cc-by_icon.svg");
+    }
+    .license-list-item.nc::before {
+        background-image: url("../assets/license-icons/cc-nc_icon.svg");
+    }
+    .license-list-item.nd::before {
+        background-image: url("../assets/license-icons/cc-nd_icon.svg");
+    }
+    .license-list-item.sa::before {
+        background-image: url("../assets/license-icons/cc-sa_icon.svg");
+    }
+    .readable-string {
+        padding-left:51px;
+        line-height:35px;
+    }
 </style>

src/components/SelectedLicenseCode.vue

@@ -198,15 +198,6 @@ export default {
     }
     .license-code {
         margin-top: 0.4rem;
-        h2.vocab-h2{
-            font-family: Roboto Condensed;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 28px;
-            line-height: 36px;
-            letter-spacing: 0.02em;
-            text-transform: uppercase;
-        }
         div.attribution-tab {
             margin-bottom: 1rem;
             nav.tabs {

src/locales/en.json

@@ -85,7 +85,7 @@
         "instructions": "Use the most open license with attribution requirement, or select other options to restrict it."
     },
     "selected-license": {
-        "heading": "Your license",
+        "heading": "RECOMMENDED LICENSE",
         "instructions": "If you already know which license you need, just select it in the dropdown below.",
         "description": {
             "common": "allows others to share, distribute, remix, adapt, and build upon your work",
@@ -112,7 +112,7 @@
         "this-work": "This work",
         "license-text": "{workTitle} {byLine} is licensed under "
     },
-    "license-dropdown-label": "You can select the license you need in the dropdown below:",
+    "license-dropdown-placeholder": "You can select the license you need in the dropdown below:",
     "cc0": {
         "copyright-waive-statement": "I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.",
         "confirm": "I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.",
@@ -200,5 +200,16 @@
     "yes": "Yes. ",
     "no": "No. ",
     "disabled-tooltip.SA": "This step is disabled because you chose ND",
-    "locale-chooser.label": "Languages available"
+    "locale-chooser.label": "Languages available",
+    "footer": {
+        "donation": {
+            "header": "OUR WORK RELIES ON YOU!",
+            "call": "Help us keep Internet free and open."
+        },
+        "licensing": {
+            "text": "Except where otherwise {noted}, content on this site is licensed under a {CCBY}. Icons by Noun Project.",
+            "noted": "noted",
+            "CCBY": "Creative Commons Attribution 4.0 International license"
+        }
+    }
 }