Skip to content

Commit 46e2e39

Browse files
author
Sami Kolari
committed
more languages, carousel company logos, fixed resources filtering
1 parent bde7575 commit 46e2e39

14 files changed

+142
-61
lines changed

‎src/components/CompanyCarousel.vue

+47-23
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
<template>
2-
<div class="row carousel-container bg-grey-light rounded">
3-
<button
4-
class="col-sm-1 flex center middle"
5-
@click="setActiveCompany(-1)">
6-
<chevron-icon :size="48" />
7-
</button>
8-
<transition :name="direction === 1 ? 'fade-left' : 'fade-right'" mode="out-in">
9-
<div
10-
:key="activeCompanyIndex"
11-
class="col-sm-10 row middle">
12-
<div class="col-sm-3">
2+
<div>
3+
<div class="row carousel-container bg-grey-light rounded">
4+
<button
5+
class="col-sm-1 flex center middle"
6+
@click="setActiveCompany(-1)">
7+
<chevron-icon :size="48" />
8+
</button>
9+
<transition :name="direction === 1 ? 'fade-left' : 'fade-right'" mode="out-in">
10+
<div
11+
:key="activeCompanyIndex"
12+
class="col-sm-10 row middle">
13+
<div class="col-sm-3">
14+
<div
15+
class="img-container"
16+
:style="`background-image: url(${publicPath}img/companies/${activeCompany.imgName})`" />
17+
</div>
1318
<div
14-
class="img-container"
15-
:style="`background-image: url(${publicPath}img/companies/${activeCompany.imgName})`" />
19+
class="col-sm-9 type-italic type-small pl-medium"
20+
v-html="activeCompany.description" />
1621
</div>
17-
<div
18-
class="col-sm-9 type-italic type-small pl-medium"
19-
v-html="activeCompany.description" />
20-
</div>
21-
</transition>
22-
<button
23-
class="col-sm-1 type-right flex center middle"
24-
@click="setActiveCompany(1)">
25-
<chevron-icon direction="right" :size="48" />
26-
</button>
22+
</transition>
23+
<button
24+
class="col-sm-1 type-right flex center middle"
25+
@click="setActiveCompany(1)">
26+
<chevron-icon direction="right" :size="48" />
27+
</button>
28+
</div>
29+
<div class="row">
30+
<button
31+
v-for="(company, i) in $tm('introduction.companies')"
32+
:key="company.name"
33+
:style="`background-image: url(${publicPath}img/companies/${company.imgName})`"
34+
class="img-container-small mr-small mr-small"
35+
:class="activeCompanyIndex === i ? 'logo-active' : ''"
36+
@click="activeCompanyIndex = i" />
37+
</div>
2738
</div>
2839
</template>
2940

@@ -73,4 +84,17 @@ export default {
7384
background-size: contain;
7485
background-position: center;
7586
}
87+
.img-container-small {
88+
width: 2rem;
89+
height: 2rem;
90+
background-repeat: no-repeat;
91+
background-size: contain;
92+
background-position: center;
93+
filter: saturate(0);
94+
opacity: 0.7;
95+
}
96+
.logo-active {
97+
filter: saturate(1);
98+
opacity: 1;
99+
}
76100
</style>

‎src/components/Navbar.vue

+26-16
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
ref="nav"
44
class="navbar row center bg-black color-white p-2xsmall pt-small pb-small">
55
<!-- section navigation -->
6-
<a
7-
v-for="link in $tm('navbar.items')"
8-
:key="link"
9-
:href="`#${link}`"
10-
class="pl-small pr-small color-white font-title type-uppercase type-no-underline border-right-white">
11-
{{ link }}
12-
</a>
6+
<button
7+
v-for="item in $tm('navbar.items')"
8+
:key="item"
9+
:name="`go-to-${item}`"
10+
class="pl-small pr-small color-white font-title type-uppercase type-no-underline border-right-white"
11+
@click="scrollTo(item)">
12+
{{ item }}
13+
</button>
1314
<!-- external links -->
1415
<div class="relative">
1516
<button
@@ -49,21 +50,21 @@
4950
class="pl-3xsmall type-body"
5051
:class="langDropdownOpen ? 'color-theme' : 'color-white'"
5152
style="transform: translateY(-2px);">
52-
{{ $i18n.locale }}
53+
{{ langNames.find(({ lang }) => lang === $i18n.locale).name }}
5354
</div>
5455
</div>
5556
<transition name="fade">
5657
<div
5758
v-if="langDropdownOpen"
58-
class="dropdown-container bg-black color-white p-small type-right">
59+
class="dropdown-container bg-black color-white p-small">
5960
<div
60-
v-for="(lang, i) in $i18n.availableLocales"
61+
v-for="({ lang, name }, i) in langNames"
6162
:key="lang">
6263
<button
6364
class="type-uppercase"
64-
:class="[lang === $i18n.locale ? 'color-theme' : 'color-white', {['mb-2xsmall'] : i !== $i18n.availableLocales.length - 1}]"
65+
:class="[lang === $i18n.locale ? 'color-theme' : 'color-white', {['mb-2xsmall'] : i !== langNames.length - 1}]"
6566
@click="$i18n.locale = lang">
66-
{{ lang }}
67+
{{ name }}
6768
</button>
6869
</div>
6970
</div>
@@ -94,12 +95,25 @@ export default {
9495
navSticky: false,
9596
publicPath: process.env.BASE_URL
9697
}),
98+
computed: {
99+
langNames() {
100+
return Object.keys(this.$i18n.messages)
101+
.map((lang) => ({ lang, name: this.$i18n.messages[lang].langName }))
102+
}
103+
},
97104
mounted() {
98105
const observer = new IntersectionObserver((e) => {
99106
this.navSticky = !e[0].isIntersecting
100107
}, { threshold: 1 })
101108
observer.observe(this.$refs.nav)
102109
},
110+
methods: {
111+
scrollTo(item) {
112+
document.getElementById(item.toLowerCase().replaceAll(' ', '-')).scrollIntoView({
113+
behavior: 'smooth'
114+
})
115+
}
116+
},
103117
watch: {
104118
linkDropdownOpen() {
105119
if (this.linkDropdownOpen) this.langDropdownOpen = false
@@ -112,10 +126,6 @@ export default {
112126
</script>
113127

114128
<style scoped>
115-
.navbar {
116-
position: sticky;
117-
top: -1px;
118-
}
119129
.tiny-logo-container {
120130
position: absolute;
121131
top: 0;

‎src/components/PageSection.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<div class="border-top-theme mt-medium">
2+
<div
3+
class="border-top-theme mt-medium"
4+
:id="title.toLowerCase().replaceAll(' ', '-')">
35
<div class="row p-small">
46
<div class="col-sm-12 col-lg-3 pt-small">
57
<h2>

‎src/components/PageSectionTwitter.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<div class="border-top-theme">
2+
<div
3+
class="border-top-theme"
4+
:id="title.toLowerCase().replaceAll(' ', '-')">
35
<div class="row p-small">
46
<div class="col-sm-12 col-lg-3 pt-small">
57
<h2>

‎src/components/ResourceBox.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
<div class="bg-grey-dark color-white">
33
<div class="row p-medium">
44
<button
5-
v-for="{ name, contentKey } in $tm('resources.tabs')"
5+
v-for="{ name, key } in $tm('resources.tabs')"
66
:key="name"
77
class="type-uppercase mr-medium theme-button"
8-
:class="activeTab === contentKey ? 'active' : ''"
9-
@click="activeTab = contentKey">
8+
:class="activeTab === key ? 'active' : ''"
9+
@click="activeTab = key">
1010
{{ name }}
1111
</button>
1212
</div>
1313
<transition name="opacity" mode="out-in">
1414
<div :key="activeTab">
1515
<div class="row mb-medium">
1616
<div class="col-sm-9 pl-medium">
17-
{{ selectedTab.description }}
17+
{{ $tm('resources.tabs').find(({ key }) => key === activeTab).description }}
1818
</div>
1919
<div class="col-sm-3 pr-medium flex bottom end">
2020
<div class="relative">
@@ -138,11 +138,11 @@ export default {
138138
'Tags'
139139
]
140140
},
141-
selectedTab() {
141+
selectedList() {
142142
return this.$tm(`resourcesList.${this.activeTab}`)
143143
},
144144
visibleItems() {
145-
const filtered = this.selectedTab
145+
const filtered = this.selectedList
146146
.filter((item) => !this.tagFilterExactMatch || (item.tags && item.tags.some((tag) => tag.toLowerCase() === this.filterInput.toLowerCase())))
147147
if (this.sortBy === 'default') {
148148
return [
@@ -161,14 +161,14 @@ export default {
161161
return this.tabTags.some((tag) => tag.toLowerCase() === this.filterInput.toLowerCase())
162162
},
163163
tabTags() {
164-
return [...new Set(this.selectedTab.items
164+
return [...new Set(this.selectedList
165165
.flatMap((item) => item.tags)
166166
.filter((tag) => tag)
167167
.sort((a, b) => a > b ? 1 : -1))]
168168
}
169169
},
170170
created() {
171-
this.activeTab = this.$tm('resources.tabs')[0].contentKey
171+
this.activeTab = this.$tm('resources.tabs')[0].key
172172
},
173173
watch: {
174174
activeTab() {
@@ -222,11 +222,11 @@ table {
222222
}
223223
.table-container-gradient::before {
224224
top: 0;
225-
background: linear-gradient(var(--color-grey-dark), rgba(255, 255, 255, 0.001));
225+
background: linear-gradient(var(--color-grey-dark), rgba(41, 47, 51, 0));
226226
}
227227
.table-container-gradient::after {
228228
bottom: 0;
229-
background: linear-gradient(rgba(255, 255, 255, 0.001), var(--color-grey-dark));
229+
background: linear-gradient(rgba(41, 47, 51, 0), var(--color-grey-dark));
230230
}
231231
.table-container {
232232
height: 50vh;

‎src/content/chinese.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default () => ({
2+
langName: '中国人'
3+
})

‎src/content/en.js renamed to ‎src/content/english.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default () => ({
2+
langName: 'English',
23
newsBanner: '🎉 RF 4.0 is out! <a href="www.google.com">Click here</a> for release notes',
34
navbar: {
45
items: [
@@ -101,21 +102,21 @@ export default () => ({
101102
tabs: [
102103
{
103104
name: 'Libraries',
104-
contentKey: 'libraries',
105+
key: 'libraries',
105106
description: `Libraries provide the actual automation and testing capabilities to
106107
Robot Framework by providing keywords. Several standard libraries are bundled with
107108
the framework, and there are separately developed external libraries galore that
108109
can be installed based on your needs. Creating your own libraries is a breeze.`
109110
},
110111
{
111112
name: 'Tools',
112-
contentKey: 'tools',
113+
key: 'tools',
113114
description: `Supporting tools ease automation: editing, running, building and so on.
114115
Most of these tools are developed as separate projects, but some are built into the framework itself.`
115116
},
116117
{
117118
name: 'Learning',
118-
contentKey: 'learning',
119+
key: 'learning',
119120
description: `Want to get started? Looking for a way to do things? Here are the most
120121
important documentation resources needed to work with Robot Framework. Notice that
121122
individual libraries and tools in the ecosystem have their own documentation that

‎src/content/french.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default () => ({
2+
langName: 'Français'
3+
})

‎src/content/de.js renamed to ‎src/content/german.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default () => ({
2+
langName: 'Deutsch',
23
newsBanner: 'RF 4.0 is out! <a href="www.google.com">Click here</a> for release notes',
34
navbar: {
45
items: [

‎src/content/index.js

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
1-
import en from './en.js'
2-
import de from './de.js'
1+
import english from './english.js'
2+
import german from './german.js'
3+
import portugese from './portugese.js'
4+
import french from './french.js'
5+
import russian from './russian.js'
6+
import spanish from './spanish.js'
7+
import chinese from './chinese.js'
38

49
import libraries from './libraries.js'
510
import tools from './tools.js'
611
import learning from './learning.js'
712

813
export {
9-
en,
10-
de,
14+
english,
15+
german,
16+
portugese,
17+
french,
18+
russian,
19+
spanish,
20+
chinese,
1121

1222
libraries,
1323
tools,

‎src/content/portugese.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default () => ({
2+
langName: 'Português'
3+
})

‎src/content/russian.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default () => ({
2+
langName: 'русский'
3+
})

‎src/content/spanish.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default () => ({
2+
langName: 'Español'
3+
})

‎src/main.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,18 @@ import router from './router'
55
import store from './store'
66
import 'Css/index.css'
77
import { createI18n } from 'vue-i18n/index'
8-
import { en, de, libraries, tools, learning } from './content/index'
8+
import {
9+
english,
10+
german,
11+
portugese,
12+
spanish,
13+
russian,
14+
chinese,
15+
french,
16+
libraries,
17+
tools,
18+
learning
19+
} from './content'
920

1021
const resourcesList = {
1122
libraries: libraries(),
@@ -16,8 +27,13 @@ const resourcesList = {
1627
const i18n = createI18n({
1728
locale: 'en',
1829
messages: {
19-
en: { ...en(), resourcesList },
20-
de: { ...de(), resourcesList }
30+
en: { ...english(), resourcesList },
31+
de: { ...german(), resourcesList },
32+
pt: { ...portugese(), resourcesList },
33+
sp: { ...spanish(), resourcesList },
34+
ru: { ...russian(), resourcesList },
35+
cn: { ...chinese(), resourcesList },
36+
fr: { ...french(), resourcesList }
2137
},
2238
warnHtmlInMessage: 'off'
2339
})

0 commit comments

Comments
 (0)