package update, dark mode, mobile fixes, 404-page

Author: Sami Kolari

package-lock.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "dev": "vue-cli-service serve"
   },
   "dependencies": {
     "@highlightjs/vue-plugin": "2.1.0",
@@ -18,12 +18,12 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "4.5.14",
+    "@vue/cli-plugin-eslint": "4.5.14",
+    "@vue/cli-plugin-pwa": "4.5.14",
+    "@vue/cli-plugin-router": "4.5.14",
+    "@vue/cli-plugin-vuex": "4.5.14",
+    "@vue/cli-service": "4.5.14",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",

package.json

@@ -7,8 +7,12 @@
 export default {
   created() {
     document.documentElement.lang = this.$i18n.locale
-    this.$store.commit('SET_IS_MOBILE', window.innerWidth < 769)
-    window.addEventListener('resize', () => this.$store.commit('SET_IS_MOBILE', window.innerWidth < 769))
+    this.$store.commit('SET_IS_MOBILE', window.innerWidth < 700)
+    this.$store.commit('SET_IS_DESKTOP', window.innerWidth > 1399)
+    window.addEventListener('resize', () => {
+      this.$store.commit('SET_IS_MOBILE', window.innerWidth < 700)
+      this.$store.commit('SET_IS_DESKTOP', window.innerWidth > 1399)
+    })
     window.addEventListener('click', () => document.body.classList.remove('accessible'))
     window.addEventListener('keydown', ({ key }) => {
       if (key === 'Tab') document.body.classList.add('accessible')

src/App.vue

@@ -75,3 +75,15 @@
 .hover-bright:hover {
     filter: brightness(1.1);
 }
+
+@media (prefers-color-scheme: dark) {
+    .bg-white-darkmode {
+        background-color: var(--color-white);
+    }
+    .bg-grey-dark-darkmode {
+        background-color: var(--color-grey-dark);
+    }
+    .color-white-darkmode {
+        color: var(--color-white);
+    }
+}

src/assets/css/colors.css

@@ -51,3 +51,13 @@ select {
 body:not(.accessible) * {
     outline: none;
 }
+
+@media (prefers-color-scheme: dark) {
+    html, body {
+        background-color: var(--color-background-darkmode);
+    }
+    
+    #app {
+        color: var(--color-grey-light);
+    }
+}

src/assets/css/index.css

@@ -45,6 +45,12 @@ h1 {
     line-height: var(--line-height-h1);
 }
 
+@media (prefers-color-scheme: dark) {
+    h1 {
+        color: var(--color-black);
+    }
+}
+
 h2 {
     font-size: var(--type-xlarge);
     color: var(--color-theme);

src/assets/css/text.css

@@ -2,6 +2,7 @@
     --color-theme: #00c0b5; /* for theme color */
     --color-theme-dark: #09504d; /* for theme color dark */
     --color-background: #f0f0f0;
+    --color-background-darkmode: #222222;
 
     --color-white: #f5f5f5;
     --color-grey-light: #e7e7e7;
@@ -11,7 +12,7 @@
     --color-link: #00c0b5;
     --color-link-visited: #578a88;
 
-    --bp-md: 768px; /* tablet breakpoint */
+    --bp-md: 700px; /* tablet breakpoint */
     --bp-lg: 1400px; /* desktop breakpoint */
 
     --layout-container-max-width: 1400px;

src/assets/css/variables.css

@@ -1,8 +1,5 @@
 <template>
   <div class="row bg-theme center p-medium">
-    <!-- <div class="logo">
-      <img :src="`${publicPath}img/RF.svg`" />
-    </div> -->
     <div>
       <h1 class="title">
         ROBOT<br>
@@ -15,10 +12,7 @@
 
 <script>
 export default {
-  name: 'Banner',
-  data: () => ({
-    publicPath: process.env.BASE_URL
-  })
+  name: 'Banner'
 }
 </script>
 

src/components/Banner.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white row card"
+    class="bg-white bg-grey-dark-darkmode row card"
     :class="$store.state.isMobile ? 'pt-medium pb-medium' : 'p-large'">
     <div class="row col-md-5 pr-medium">
       <div
@@ -43,7 +43,7 @@
     <div
       class="col-md-2 pl-medium"
       :style="$store.state.isMobile ? 'padding-left: 4.7rem; margin-top: 1rem;' : ''">
-      <h3 class="color-grey-dark mb-2xsmall">
+      <h3 class="color-grey-dark color-white-darkmode mb-2xsmall">
         Other
       </h3>
       <div

src/components/CommunityItems.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="activeCompany">
-    <div class="row carousel-container pt-small pb-small bg-white card">
+    <div class="row carousel-container pt-small pb-small bg-white bg-grey-dark-darkmode card">
       <button
         class="col-sm-2 col-md-1 flex center middle"
         aria-label="previous testimonial"
         @click="setActiveCompany(-1)">
-        <chevron-icon :size="48" />
+        <chevron-icon :size="48" :color="isDarkMode ? 'white' : 'black'" />
       </button>
       <transition :name="direction === 1 ? 'fade-left' : 'fade-right'" mode="out-in">
         <div
@@ -28,10 +28,35 @@
         class="col-sm-2 col-md-1 type-right flex center middle"
         aria-label="next testimonial"
         @click="setActiveCompany(1)">
-        <chevron-icon direction="right" :size="48" />
+        <chevron-icon
+          direction="right"
+          :color="isDarkMode ? 'white' : 'black'"
+          :size="48" />
       </button>
     </div>
-    <div class="row">
+    <div v-if="$store.state.isMobile">
+      <div class="row between">
+        <button
+          v-for="(company, i) in companiesShuffled.slice(0, 5)"
+          :key="company.name"
+          :aria-label="`${company.name} testimonial`"
+          :style="`background-image: url(${publicPath}img/carousel-company-icons/${company.imgName})`"
+          class="img-container-small bg-white card mt-small"
+          :class="activeCompanyIndex === i ? 'logo-active border-black border-thin' : ''"
+          @click="activeCompanyIndex = i" />
+      </div>
+      <div class="row between">
+        <button
+          v-for="(company, i) in companiesShuffled.slice(5, 10)"
+          :key="company.name"
+          :aria-label="`${company.name} testimonial`"
+          :style="`background-image: url(${publicPath}img/carousel-company-icons/${company.imgName})`"
+          class="img-container-small bg-white card mt-small"
+          :class="activeCompanyIndex === i + 5 ? 'logo-active border-black border-thin' : ''"
+          @click="activeCompanyIndex = i + 5" />
+      </div>
+    </div>
+    <div v-else class="row">
       <button
         v-for="(company, i) in companiesShuffled"
         :key="company.name"
@@ -62,7 +87,8 @@ export default {
     publicPath: process.env.BASE_URL,
     direction: 0,
     companiesShuffled: [],
-    eventSent: false
+    eventSent: false,
+    isDarkMode: false
   }),
   computed: {
     activeCompany() {
@@ -99,6 +125,7 @@ export default {
       [companies[i], companies[j]] = [companies[j], companies[i]]
     }
     this.companiesShuffled = companies
+    this.isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
   }
 }
 </script>
@@ -126,7 +153,7 @@ export default {
   .description {
     padding-left: var(--size-medium);
   }
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 699px) {
     .carousel-container {
       margin-left: -1rem;
       margin-right: -1rem;
@@ -136,5 +163,17 @@ export default {
       height: 10rem;
       overflow-y: scroll;
     }
+    .img-container-small {
+      width: calc((100vw - 2rem) / 7);
+      height: calc((100vw - 2rem) / 7);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .img-container {
+      background-color: var(--color-white);
+      background-origin: content-box;
+      padding: 0.5rem;
+      border-radius: var(--border-radius-rounded);
+    }
   }
 </style>

src/components/CompanyCarousel.vue

@@ -1,5 +1,5 @@
 <template>
   <div
-    class="container color-black type-center"
+    class="container type-center pl-small pr-small"
     v-html="$t('newsBanner')" />
 </template>

src/components/NewsBanner.vue

@@ -16,7 +16,7 @@
       <slot />
     </div>
     <div
-      v-if="!$store.state.isMobile"
+      v-if="$store.state.isDesktop"
       class="twitter col-sm-12 col-lg-3 p-none mt-small card"
       :style="`height: ${twitterHeight}px;`">
       <accessibility-link label="Skip twitter timeline" go-to="getting-started" />

src/components/PageSectionTwitter.vue

@@ -96,6 +96,12 @@ export default () => ({
         description: 'Finnair is using Robot Framework to support Finnair digital platform development.',
         imgName: 'Finnair.svg'
       },
+      {
+        title: 'Finnish Tax Administration',
+        description: `Finnish Tax Administration is using Robot Framework in multiple projects.
+        Robot Framework is one of the core tools in their development to make Quality Assurance and Automation.`,
+        imgName: 'Vero.svg'
+      },
       {
         name: 'Juniper Networks',
         description: 'Juniper Networks has built an extensive automation framework on top of Robot Framework for end-to-end qualification of Juniper products. It is used extensively in multiple groups including engineering and support.',

src/content/english.js

@@ -3,6 +3,7 @@ import Home from '../views/Home.vue'
 import PrivacyPolicy from '../views/PrivacyPolicy.vue'
 import CoC from '../views/CoC.vue'
 import Users from '../views/Users.vue'
+import NotFound from '../views/NotFound.vue'
 
 const routes = [
   {
@@ -24,6 +25,11 @@ const routes = [
     path: '/users',
     name: 'Users',
     component: Users
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: NotFound
   }
 ]
 

src/router/index.js

@@ -2,11 +2,15 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    isMobile: null
+    isMobile: null,
+    isDesktop: null
   },
   mutations: {
     SET_IS_MOBILE(state, truthiness) {
       state.isMobile = truthiness
+    },
+    SET_IS_DESKTOP(state, truthiness) {
+      state.isDesktop = truthiness
     }
   },
   actions: {

src/store/index.js

@@ -24,7 +24,7 @@
       :title="$t('gettingStarted.title')"
       :body="$t('gettingStarted.body')">
       <tab-box
-        class="col-sm-12 col-md-9 col-md-offset-3"
+        class="col-sm-12 col-lg-9 col-lg-offset-3"
         :tabs="$tm('gettingStarted.tabs')">
         <!-- list of learning resouces on 3rd tab -->
         <template v-slot:tab-3>
@@ -42,7 +42,7 @@
       title-id="community"
       :title="$t('community.title')"
       :body="$t('community.body')">
-      <div class="col-sm-12 col-md-9 col-md-offset-3 row">
+      <div class="col-sm-12 col-lg-9 col-lg-offset-3 row">
         <community-items />
         <button class="theme mt-medium" :class="$store.state.isMobile ? 'ml-xsmall' : ''">
           <router-link :to="{ name: 'CoC' }" class="type-no-underline">
@@ -56,7 +56,7 @@
       title-id="resources"
       :title="$t('resources.title')"
       :body="$t('resources.body')">
-      <resource-box class="col-sm-12 col-md-9 col-md-offset-3" />
+      <resource-box class="col-sm-12 col-lg-9 col-lg-offset-3" />
     </page-section>
   </div>
   <page-footer />

src/views/Home.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    <div class="row center type-center" style="margin-top: calc(100vh / 2 - 7rem)">
+      <div class="col-sm-12">
+        <h3>404 - Not found</h3>
+      </div>
+      <img :src="`${publicPath}img/RF-white.svg`" />
+      <div class="col-sm-12 mt-medium">
+        <router-link :to="{ name: 'Home' }">
+          Back to home
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound',
+  data: () => ({
+    publicPath: process.env.BASE_URL
+  })
+}
+</script>

src/views/NotFound.vue

@@ -26,11 +26,10 @@
             :key="user.name">
             <transition appear name="opacity-slow">
               <div
-                class="card p-small mb-large"
-                style="background-color: #fff;"
+                class="card p-small mb-large bg-white user-card"
                 :style="`transition-delay: ${(j / 10 + i / columns.length / 10) * columns.length + 0.1}s;`">
                 <div
-                  class="img-container"
+                  class="img-container mb-small"
                   :style="`background-image: url(${publicPath}img/users/${user.imgName})`" />
                 <h3>
                   <a :href="user.href" target="_blank">
@@ -108,10 +107,25 @@ export default {
 <style scoped>
   .img-container {
     width: 60%;
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     height: 5rem;
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
   }
+  .user-card {
+    background-color: #fff;
+  }
+  @media (prefers-color-scheme: dark) {
+    .user-card {
+      background-color: var(--color-grey-dark);
+    }
+    .img-container {
+      background-color: #fff;
+      background-origin: content-box;
+      padding: 0.5rem;
+      border-radius: var(--border-radius-rounded);
+    }
+  }
 </style>