enable landuage selector, fix missing localisations

Author: Sami Kolari

Diff for: src/components/CommunityItems.vue

@@ -44,7 +44,7 @@
       class="col-md-2 pl-medium"
       :style="$store.state.isMobile ? 'padding-left: 4.7rem; margin-top: 1rem;' : ''">
       <h3 class="color-grey-dark color-white-darkmode mb-2xsmall">
-        Other
+        {{ $t('common.other') }}
       </h3>
       <div
         v-for="link in items.slice(3)"
@@ -93,7 +93,7 @@ export default {
           title: 'Facebook'
         }, {
           href: 'http://groups.google.com/group/robotframework-users',
-          title: 'Mailing list'
+          title: this.$t('community.links.mailingList')
         }
       ]
     }

Diff for: src/components/CompanyCarousel.vue

@@ -71,7 +71,7 @@
     </div>
     <button class="theme mt-small">
       <router-link :to="{ name: 'Users' }" class="type-no-underline">
-        More users
+        {{ $t('introduction.moreUsers') }}
       </router-link>
     </button>
   </div>

Diff for: src/components/NavMobile.vue

@@ -211,7 +211,7 @@ export default {
   left: 50%;
 }
 
-@media screen and (min-width: 769px) {
+@media screen and (min-width: 951px) {
   .navbar, .menu {
     display: none;
   }

Diff for: src/components/Navbar.vue

@@ -7,15 +7,16 @@
       v-for="item in $tm('navbar.items')"
       :key="item.name"
       :name="`go-to-${item.name}`"
-      class="pl-small pr-small color-white font-title type-uppercase type-no-underline border-right-white"
+      class="pl-small pr-small color-white font-title type-uppercase type-no-underline border-right-white type-small"
       @click="itemClick(item.id)">
       {{ item.name }}
     </button>
     <!-- external links -->
     <div class="relative" ref="dropdown">
       <button
-        class="pl-small pr-small font-title type-uppercase line-height-body"
+        class="pl-small pr-small font-title type-uppercase type-small"
         :class="linkDropdownOpen ? 'color-theme' : 'color-white'"
+        style="transform: translateY(2px);"
         @click="linkDropdownOpen = !linkDropdownOpen">
         {{ $t('navbar.dropdownName') }}
       </button>
@@ -42,17 +43,17 @@
         </div>
       </transition>
     </div>
-    <!-- lang - disabled for now
     <button
       class="border-left-white font-title type-uppercase pl-small relative line-height-body"
       @click="langDropdownOpen = !langDropdownOpen">
       <div
-        class="flex middle">
+        class="flex middle"
+        style="transform: translateY(2px);">
         <globe-icon
           :color="langDropdownOpen ? 'theme' : 'white'"
           style="transform: translateY(-1px);" />
         <div
-          class="pl-3xsmall type-body"
+          class="pl-3xsmall type-small"
           :class="langDropdownOpen ? 'color-theme' : 'color-white'"
           style="transform: translateY(-2px);">
           {{ langNames.find(({ lang }) => lang === $i18n.locale).name }}
@@ -74,7 +75,7 @@
           </div>
         </div>
       </transition>
-    </button> -->
+    </button>
     <transition name="opacity">
       <div
         v-if="navSticky"
@@ -87,11 +88,13 @@
 
 <script>
 import NewTabIcon from './icons/NewTabIcon.vue'
+import GlobeIcon from './icons/GlobeIcon.vue'
 
 export default {
   name: 'Navbar',
   components: {
-    NewTabIcon
+    NewTabIcon,
+    GlobeIcon
   },
   data: () => ({
     navSticky: false,

Diff for: src/components/PageFooter.vue

@@ -19,14 +19,14 @@
             Finland
           </div>
           <a href="mailto:[email protected]">
-            Contact
+            {{ $t('footer.contact') }}
           </a>
         </div>
         <div
           class="col-sm-6 col-md-3"
           :class="$store.state.isMobile ? 'type-right' : ''">
           <h3 class="mb-small">
-            Community
+            {{ $t('footer.community') }}
           </h3>
           <div>
             <a href="https://github.com/robotframework/robotframework">
@@ -57,37 +57,18 @@
         <div v-if="$store.state.isMobile" class="col-sm-12 mb-large" />
         <div class="col-sm-6 col-md-3">
           <h3 class="mb-small">
-            Instructions
+            {{ $t('footer.instructions.title') }}
           </h3>
-          <div>
-            <a href="https://github.com/robotframework/robotframework/blob/master/INSTALL.rst">
-              Installation
-            </a>
-          </div>
-          <div>
-            <a href="https://github.com/robotframework/QuickStartGuide/blob/master/QuickStart.rst">
-              Quick start
-            </a>
-          </div>
-          <div>
-            <a href="https://robotframework.org/robotframework/#user-guide">
-              User guide
-            </a>
-          </div>
-          <div>
-            <a href="https://github.com/robotframework/WebDemo">
-              Web demo
-            </a>
-          </div>
-          <div>
-            <a href="https://robocon.io/">
-              Robocon talks
+          <div
+            v-for="item in $tm('footer.instructions.items')"
+            :key="item.title">
+            <a :href="item.href" target="_blank">
+              {{ item.title }}
             </a>
           </div>
         </div>
         <div class="col-sm-6 col-md-3 flex flex-col between">
-          <div />
-          <!-- <div class="relative">
+          <div class="relative">
             <button
               class="flex middle border-thin p-2xsmall pl-xsmall pr-xsmall"
               :class="langDropdownOpen ? 'border-theme' : 'border-white'"
@@ -98,7 +79,7 @@
               <div
                 class="relative ml-2xsmall"
                 :class="langDropdownOpen ? 'color-theme' : 'color-white'">
-                Language
+                {{ langNames.find(({ lang }) => lang === $i18n.locale).name }}
               </div>
             </button>
             <transition name="fade-down">
@@ -118,16 +99,16 @@
                 </div>
               </div>
             </transition>
-          </div> -->
+          </div>
           <div :class="$store.state.isMobile ? 'type-right' : ''">
             <div>
               <router-link :to="{ name: 'PrivacyPolicy' }">
-                Privacy Policy
+                {{ $t('footer.privacyPolicy') }}
               </router-link>
             </div>
             <div>
               <router-link :to="{ name: 'CoC' }">
-                Code of Conduct
+                {{ $t('footer.coc') }}
               </router-link>
             </div>
           </div>
@@ -138,12 +119,12 @@
 </template>
 
 <script>
-// import GlobeIcon from './icons/GlobeIcon.vue'
+import GlobeIcon from './icons/GlobeIcon.vue'
 
 export default {
   name: 'PageFooter',
   components: {
-    // GlobeIcon
+    GlobeIcon
   },
   data: () => ({
     langDropdownOpen: false

Diff for: src/components/ResourceBox.vue

@@ -151,7 +151,7 @@
               v-if="!showAll && itemsFilteredByTag.length > 7"
               class="stroke type-uppercase mt-small type-small mb-xsmall"
               @click="showAll = true">
-              Show more
+              {{ $t('resources.showMore') }}
             </button>
           </div>
         </div>

Diff for: src/content/english.js

@@ -126,7 +126,8 @@ export default () => ({
         description: 'Wärtsilä Digital Technologies uses Robot to automate various types of testing. API testing, component testing, functional and system tests are used to ensure the highest quality of a wide variety of software.',
         imgName: 'Wartsila.svg'
       }
-    ]
+    ],
+    moreUsers: 'More Users'
   },
   gettingStarted: {
     title: 'Getting Started',
@@ -240,8 +241,10 @@ Welcome Page Should Be Open
       openSpace: {
         title: 'Open space',
         description: 'Meet the Robot Framework developers and foundation members. Join topics created by others or bring your own. Also in Slack #open-space. <a href="./robot-framework-open-space.ics">ICS file</a>'
-      }
-    }
+      },
+      mailingList: 'Mailing List'
+    },
+    coc: 'Code of Conduct'
   },
   resources: {
     title: 'Resources',
@@ -275,10 +278,7 @@ Welcome Page Should Be Open
         Most of these tools are developed as separate projects, but some are built into the framework itself.`
       }
     ],
-    mobileTitles: [
-      'Standard',
-      'External'
-    ]
+    showMore: 'Show More'
   },
   development: {
     title: 'Development',
@@ -298,5 +298,36 @@ Welcome Page Should Be Open
       <a href="https://github.com/robotframework/robotframework.github.com/pulls">pull request</a> or an
       <a href="https://github.com/robotframework/robotframework.github.com/issues">issue</a>.`
     // list of users is found in ./resources/users.js
+  },
+  footer: {
+    contact: 'Contact',
+    community: 'Community',
+    instructions: {
+      title: 'Instructions',
+      items: [
+        {
+          title: 'Installation',
+          href: 'https://github.com/robotframework/robotframework/blob/master/INSTALL.rst'
+        }, {
+          title: 'Quick start',
+          href: 'https://github.com/robotframework/QuickStartGuide/blob/master/QuickStart.rst'
+        }, {
+          title: 'User quide',
+          href: 'https://robotframework.org/robotframework/#user-guide'
+        }, {
+          title: 'Web Demo',
+          href: 'https://github.com/robotframework/WebDemo'
+        }, {
+          title: 'Robocon talks',
+          href: 'https://robocon.io/'
+        }
+      ]
+    },
+    privacyPolicy: 'Privacy Policy',
+    coc: 'Code of Conduct'
+  },
+  common: {
+    back: 'Back',
+    other: 'Other'
   }
 })

Diff for: src/views/CoC.vue

@@ -2,10 +2,10 @@
   <div class="container narrow mb-xlarge pl-small pr-small">
     <div class="row mb-large mt-large">
       <button v-if="cameFromHome" @click="$router.go(-1)" class="color-theme type-underline">
-        Back
+        {{ $t('common.back') }}
       </button>
       <router-link v-else :to="{ name: 'Home' }">
-        Back
+        {{ $t('common.back') }}
       </router-link>
     </div>
     <h2>

Diff for: src/views/Home.vue

@@ -46,7 +46,7 @@
         <community-items />
         <button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
           <router-link :to="{ name: 'CoC' }" class="type-no-underline">
-            Code of Conduct
+            {{ $t('community.coc') }}
           </router-link>
         </button>
       </div>
@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style scoped>
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 950px) {
   .nav-desktop {
     display: none;
   }

Diff for: src/views/Users.vue

@@ -2,10 +2,10 @@
   <div class="container mb-xlarge p-small">
     <div class="row mb-large mt-large">
       <button v-if="cameFromHome" @click="$router.go(-1)" class="color-theme type-underline">
-        Back
+        {{ $t('common.back') }}
       </button>
       <router-link v-else :to="{ name: 'Home' }">
-        Back
+        {{ $t('common.back') }}
       </router-link>
     </div>
     <h2>