ui fixes + news banner

Author: Sami Kolari

public/img/RF-white.svg

@@ -7,56 +7,10 @@
     transform: translateY(-10px) !important;
 }
 
-.fade-down-enter-active, .fade-down-leave-active {
-    transition: all 0.25s;
-    transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
-}
-.fade-down-enter-from, .fade-down-leave-to {
-    opacity: 0;
-    transform: translateY(10px) !important;
-}
-
-.fade-slow-enter-active, .fade-slow-leave-active {
-    transition: all 1.25s;
-    transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
-    transition-delay: 0.3s;
-    animation-fill-mode: forwards;
-}
-.fade-slow-enter-from, .fade-slow-leave-to {
-    opacity: 0;
-    transform: translateY(-10px) !important;
-}
-
 .opacity-enter-active, .opacity-leave-active {
     transition: opacity 0.25s;
     transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
 }
 .opacity-enter-from, .opacity-leave-to {
     opacity: 0;
 }
-.opacity-slide-enter-active, .opacity-slide-leave-active {
-    transition: opacity 0.25s, margin-bottom 0.1s;
-    transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
-}
-.opacity-slide-enter-from, .opacity-slide-leave-to {
-    opacity: 0;
-    margin-bottom: -4.35rem;
-}
-
-.list-enter-active, .list-leave-active {
-    transition: opacity 0.25s, transform 0.25s;
-    transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
-}
-
-.list-enter-from, .list-leave-to {
-    opacity: 0;
-    transform: translateX(10px) !important;
-}
-
-.list-move {
-    transition: transform 0.2s cubic-bezier(0.14, 0.7, 0.56, 0.92);
-}
-
-.list-leave-active {
-    position: absolute;
-}

src/assets/css/transitions.css

@@ -6,7 +6,7 @@
       v-for="link in $tm('navbar.items')"
       :key="link"
       :href="`#${link}`"
-      class="pl-small pr-small color-white font-title type-uppercase type-small border-right-white">
+      class="pl-small pr-small color-white font-title type-uppercase type-no-underline type-small border-right-white">
       {{ link }}
     </a>
     <div class="relative">
@@ -16,33 +16,37 @@
         @click="dropdownOpen = !dropdownOpen">
         {{ $t('navbar.dropdownName') }}
       </button>
-      <div
-        v-if="dropdownOpen"
-        class="dropdown-container bg-black color-white p-small type-right">
+      <transition name="fade">
         <div
-          v-for="item in $tm('navbar.dropdown')"
-          :key="item.name">
+          v-if="dropdownOpen"
+          class="dropdown-container bg-black color-white p-small type-right">
+          <div
+            v-for="item in $tm('navbar.dropdown')"
+            :key="item.name">
+            <a
+              :href="item.url">
+              {{ item.name }}
+            </a>
+            <p class="type-small">
+              {{ item.description }}
+            </p>
+          </div>
           <a
+            v-for="item in dropdown"
+            :key="item.name"
             :href="item.url">
             {{ item.name }}
           </a>
-          <p class="type-small">
-            {{ item.description }}
-          </p>
         </div>
-        <a
-          v-for="item in dropdown"
-          :key="item.name"
-          :href="item.url">
-          {{ item.name }}
-        </a>
-      </div>
-    </div>
-    <div
-      v-if="navSticky"
-      class="tiny-logo-container">
-      <img :src="`${publicPath}img/RF-white.svg`" />
+      </transition>
     </div>
+    <transition name="opacity">
+      <div
+        v-if="navSticky"
+        class="tiny-logo-container">
+        <img :src="`${publicPath}img/RF-white.svg`" />
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -70,12 +74,12 @@ export default {
   }
   .tiny-logo-container {
     position: absolute;
-    top: 0.4rem;
-    left: 0.4rem;
+    top: 0;
+    left: 0;
   }
   .tiny-logo-container > img {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 3rem;
+    height: 3rem;
   }
   .dropdown-container {
     position: absolute;

src/components/Navbar.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-black">
+    <div
+      class="container color-white type-center"
+      v-html="$t('newsBanner')" />
+  </div>
+</template>

src/components/NewsBanner.vue

@@ -1,10 +1,12 @@
+import NewsBanner from './NewsBanner.vue'
 import Banner from './Banner.vue'
 import Navbar from './Navbar.vue'
 import PageSection from './PageSection.vue'
 import CompanyBlock from './CompanyBlock.vue'
 import CompanyCarousel from './CompanyCarousel.vue'
 
 export {
+  NewsBanner,
   Banner,
   Navbar,
   PageSection,

src/components/index.js

@@ -4,28 +4,28 @@ import { register } from 'register-service-worker'
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
+    ready() {
       console.log(
         'App is being served from cache by a service worker.\n' +
         'For more details, visit https://goo.gl/AFskqB'
       )
     },
-    registered () {
+    registered() {
       console.log('Service worker has been registered.')
     },
-    cached () {
+    cached() {
       console.log('Content has been cached for offline use.')
     },
-    updatefound () {
+    updatefound() {
       console.log('New content is downloading.')
     },
-    updated () {
+    updated() {
       console.log('New content is available; please refresh.')
     },
-    offline () {
+    offline() {
       console.log('No internet connection found. App is running in offline mode.')
     },
-    error (error) {
+    error(error) {
       console.error('Error during service worker registration:', error)
     }
   })

src/registerServiceWorker.js

@@ -1,4 +1,5 @@
 export default () => ({
+  newsBanner: 'RF 4.0 is out! <a href="www.google.com">Click here</a> for release notes',
   navbar: {
     items: [
       'Introduction',
@@ -8,16 +9,6 @@ export default () => ({
     ],
     dropdownName: 'Links',
     dropdown: [
-      {
-        name: 'Foundation',
-        url: 'https://robotframework.org/foundation/',
-        description: 'Support the development'
-      },
-      {
-        name: 'Robocon',
-        url: 'https://robocon.io/',
-        description: 'Annual conference'
-      },
       {
         name: 'Github',
         url: 'https://github.com/robotframework/robotframework',
@@ -28,6 +19,16 @@ export default () => ({
         url: 'http://forum.robotframework.org/',
         description: 'Discuss Robot Framework'
       },
+      {
+        name: 'Foundation',
+        url: 'https://robotframework.org/foundation/',
+        description: 'Support the development'
+      },
+      {
+        name: 'Robocon',
+        url: 'https://robocon.io/',
+        description: 'Annual conference'
+      },
       {
         name: 'Shop',
         url: 'https://reddyshop.co/robotframework/',

src/text-content/en.js

@@ -1,4 +1,5 @@
 <template>
+  <news-banner v-if="$te('newsBanner')" />
   <banner />
   <navbar class="mb-medium" />
   <div class="container">
@@ -20,11 +21,12 @@
 </template>
 
 <script>
-import { Banner, Navbar, PageSection, CompanyCarousel } from 'Components'
+import { NewsBanner, Banner, Navbar, PageSection, CompanyCarousel } from 'Components'
 
 export default {
   name: 'App',
   components: {
+    NewsBanner,
     Banner,
     Navbar,
     PageSection,