ui fixes

Author: Sami Kolari

src/App.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script>
+
 export default {
   created() {
     document.documentElement.lang = this.$i18n.locale

src/components/NavMobile.vue

@@ -34,12 +34,16 @@
           </button>
           <div
             v-for="{ name, url, description } in $tm('navbar.dropdown')"
-            :key="name"
-            class="">
-            <a
-              :href="url">
-              {{ name }}
-            </a>
+            :key="name">
+            <div class="flex middle">
+              <a
+                :href="url"
+                target="_blank"
+                rel="noopener noreferrer">
+                {{ name }}
+              </a>
+              <new-tab-icon color="theme" class="ml-2xsmall" />
+            </div>
             <p class="type-small color-white mt-none">
               {{ description }}
             </p>
@@ -79,11 +83,13 @@
 
 <script>
 import ChevronIcon from './icons/ChevronIcon.vue'
+import NewTabIcon from './icons/NewTabIcon.vue'
 
 export default {
   name: 'NavMobile',
   components: {
-    ChevronIcon
+    ChevronIcon,
+    NewTabIcon
   },
   data: () => ({
     isOpen: false,

src/components/Navbar.vue

@@ -23,15 +23,20 @@
       <transition name="fade">
         <div
           v-if="linkDropdownOpen"
-          class="dropdown-container bg-black color-white p-small type-right card">
+          class="dropdown-container bg-black color-white p-small card">
           <div
             v-for="{ name, url, description } in $tm('navbar.dropdown')"
             :key="name">
-            <a
-              :href="url">
-              {{ name }}
-            </a>
-            <p class="type-small mt-none">
+            <div class="flex end">
+              <a
+                :href="url"
+                target="_blank"
+                rel="noopener noreferrer">
+                {{ name }}
+              </a>
+              <new-tab-icon color="theme" class="ml-2xsmall" />
+            </div>
+            <p class="type-small mt-none type-right">
               {{ description }}
             </p>
           </div>
@@ -82,12 +87,12 @@
 </template>
 
 <script>
-// import GlobeIcon from './icons/GlobeIcon.vue'
+import NewTabIcon from './icons/NewTabIcon.vue'
 
 export default {
   name: 'Navbar',
   components: {
-    // GlobeIcon
+    NewTabIcon
   },
   data: () => ({
     navSticky: false,

src/components/ResourceBox.vue

@@ -107,7 +107,8 @@
                   v-for="(tag, i) in item.tags"
                   :key="tag"
                   :style="`color: ${getTagColor(tag)}`"
-                  class="type-nowrap type-uppercase type-small">
+                  class="type-nowrap type-uppercase type-small cursor-pointer"
+                  @click="filterInput = tag.toUpperCase()">
                   {{ `${tag}${i !== item.tags.length - 1 ? ', ' : ''}` }}
                 </span>
               </td>
@@ -322,7 +323,7 @@ tr:nth-child(even) {
 .input-suggestions {
   position: absolute;
   z-index: 2;
-  max-height: 20rem;
+  max-height: 13.5rem;
   overflow-y: scroll;
 }
 </style>

src/components/icons/NewTabIcon.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="16px"
+    viewBox="0 0 24 24"
+    width="16px"
+    :class="{
+      ['fill-white']: color === 'white',
+      ['fill-theme']: color === 'theme'
+    }">
+    <path
+      d="M0 0h24v24H0V0z"
+      fill="none" />
+    <path
+      d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'NewTabIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'white'
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .fill-white {
+    fill: var(--color-white);
+  }
+  .fill-theme {
+    fill: var(--color-theme);
+  }
+</style>

src/components/index.js

@@ -14,6 +14,7 @@ import RobotCode from './RobotCode.vue'
 
 import GlobeIcon from './icons/GlobeIcon.vue'
 import ChevronIcon from './icons/ChevronIcon.vue'
+import NewTabIcon from './icons/NewTabIcon.vue'
 
 export {
   NewsBanner,
@@ -31,5 +32,6 @@ export {
   RobotCode,
 
   GlobeIcon,
-  ChevronIcon
+  ChevronIcon,
+  NewTabIcon
 }

src/content/english.js

@@ -1,6 +1,6 @@
 export default () => ({
   langName: 'English',
-  newsBanner: '🎉 New website has been released!',
+  newsBanner: '🎉 New website has been released! If you have feedback, feel free to post it in <a href="https://github.com/robotframework/robotframework.github.com">GitHub</a>.',
   navbar: {
     items: [
       {

src/content/resources/stars.js

@@ -25,6 +25,8 @@ const getRepoName = (url) => {
   return `${parts[0]}/${parts[1]}`
 }
 
+const functionize = (list) => `/* eslint-disable */ export default () => (${list})`
+
 export const getStars = () => {
   const repos = [...libraries(), ...tools()]
     .filter((item) => item.href.includes('github.com'))
@@ -38,9 +40,9 @@ export const getStars = () => {
           stars: repo.stargazers_count
         }))
       const a = document.createElement('a')
-      const file = new Blob([JSON.stringify(list)], { type: 'text/plain' })
+      const file = new Blob([functionize(JSON.stringify(list))], { type: 'text/plain' })
       a.href = URL.createObjectURL(file)
-      a.download = 'stars.json'
+      a.download = 'stars.js'
       a.click()
     })
 }