Skip to content

Commit 03f4a4a

Browse files
author
Sami Kolari
committed
footer + mobile view
1 parent 841285a commit 03f4a4a

14 files changed

+739
-475
lines changed

‎.eslintrc.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
1616
'vue/no-multiple-template-root': 'off',
1717
'no-unused-vars': 'warn',
18-
'space-before-function-paren': ['warn', 'never']
18+
'space-before-function-paren': ['warn', 'never'],
19+
indent: [2, 2]
1920
}
2021
}

‎src/assets/css/transitions.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
.fade-left-leave-active,
55
.fade-right-enter-active,
66
.fade-right-leave-active,
7-
.fade-left-in-out-enter-active,
8-
.fade-left-in-out-leave-active,
7+
.fade-down-enter-active,
8+
.fade-down-leave-active,
99
.opacity-enter-active,
1010
.opacity-leave-active {
11-
transition: transform 0.15s, opacity 0.15s;
11+
transition: transform 0.25s, opacity 0.25s;
1212
transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
1313
}
1414

@@ -24,9 +24,9 @@
2424
opacity: 0;
2525
transform: translateX(-10px) !important;
2626
}
27-
.fade-left-in-out-enter-from, .fade-left-in-out-leave-to {
27+
.fade-down-enter-from, .fade-down-leave-to {
2828
opacity: 0;
29-
transform: translateX(-10px) !important;
29+
transform: translateY(10px) !important;
3030
}
3131
.opacity-enter-from, .opacity-leave-to {
3232
opacity: 0;

‎src/components/CompanyCarousel.vue

+20-8
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,27 @@
22
<div v-if="activeCompany">
33
<div class="row carousel-container pt-small pb-small bg-grey-light rounded">
44
<button
5-
class="col-sm-1 flex center middle"
5+
class="col-sm-2 col-md-1 flex center middle"
66
@click="setActiveCompany(-1)">
77
<chevron-icon :size="48" />
88
</button>
99
<transition :name="direction === 1 ? 'fade-left' : 'fade-right'" mode="out-in">
1010
<div
1111
:key="activeCompanyIndex"
12-
class="col-sm-10 row middle">
13-
<div class="col-sm-3">
12+
class="col-sm-8 col-md-10 row middle"
13+
:style="!$store.state.isMobile ? 'height: 10rem;' : ''">
14+
<div class="col-sm-10 col-sm-offset-1 col-md-3 col-md-offset-0 mb-small">
1415
<div
1516
class="img-container"
1617
:style="`background-image: url(${publicPath}img/companies/${activeCompany.imgName})`" />
1718
</div>
1819
<div
19-
class="col-sm-9 type-italic type-small pl-medium"
20+
class="col-sm-12 col-md-9 type-italic type-small description"
2021
v-html="activeCompany.description" />
2122
</div>
2223
</transition>
2324
<button
24-
class="col-sm-1 type-right flex center middle"
25+
class="col-sm-2 col-md-1 type-right flex center middle"
2526
@click="setActiveCompany(1)">
2627
<chevron-icon direction="right" :size="48" />
2728
</button>
@@ -75,9 +76,6 @@ export default {
7576
</script>
7677

7778
<style scoped>
78-
.carousel-container {
79-
min-height: 10rem;
80-
}
8179
.img-container {
8280
height: 4rem;
8381
background-repeat: no-repeat;
@@ -97,4 +95,18 @@ export default {
9795
filter: saturate(1);
9896
opacity: 1;
9997
}
98+
.description {
99+
padding-left: var(--size-medium);
100+
}
101+
@media screen and (max-width: 768px) {
102+
.carousel-container {
103+
margin-left: -1rem;
104+
margin-right: -1rem;
105+
}
106+
.description {
107+
padding-left: 0;
108+
height: 10rem;
109+
overflow-y: scroll;
110+
}
111+
}
100112
</style>

‎src/components/NavMobile.vue

+56-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<transition name="fade-left-in-out">
2+
<transition name="fade">
33
<div
44
v-if="isOpen"
5-
class="menu bg-black pt-2xlarge pl-small pr-small">
5+
class="menu bg-black pt-xlarge pb-large pl-small pr-small">
66
<transition :name="linksOpen ? 'fade-left' : 'fade-right'" mode="out-in">
77
<div v-if="!linksOpen" key="1" class="pl-2xsmall">
88
<div
@@ -11,7 +11,7 @@
1111
<button
1212
:name="`go-to-${item}`"
1313
class="mb-small mt-xsmall color-white font-title type-uppercase"
14-
@click="scrollTo(item)">
14+
@click="scrollTo(item, 400); isOpen = false">
1515
{{ item }}
1616
</button>
1717
</div>
@@ -60,12 +60,21 @@
6060
<span></span>
6161
<span></span>
6262
</button>
63-
<div class="logo-container flex middle pr-xsmall">
64-
<div>
63+
<div class="flex middle pr-xsmall">
64+
<div class="font-title mr-2xsmall">
65+
ROBOT FRAMEWORK
66+
</div>
67+
<div class="logo-container">
6568
<img :src="`${publicPath}img/RF-white.svg`" />
6669
</div>
6770
</div>
6871
</div>
72+
<transition name="opacity">
73+
<div
74+
v-if="isOpen"
75+
class="menu-background"
76+
@click="isOpen = false" />
77+
</transition>
6978
</template>
7079

7180
<script>
@@ -80,7 +89,36 @@ export default {
8089
isOpen: false,
8190
linksOpen: false,
8291
publicPath: process.env.BASE_URL
83-
})
92+
}),
93+
methods: {
94+
scrollTo(el, duration) {
95+
// ios doesn't support smooth scrollIntoView()
96+
const easeInOutQuad = (t, b, c, d) => {
97+
let t2 = t / (d / 2)
98+
if (t2 < 1) return (c / 2) * t2 * t2 + b
99+
t2 -= 1
100+
return (-c / 2) * (t2 * (t2 - 2) - 1) + b
101+
}
102+
const to = document.getElementById(el.toLowerCase().replaceAll(' ', '-')).offsetTop - 80
103+
const element = document.scrollingElement || document.documentElement
104+
const start = element.scrollTop
105+
106+
const change = to - start
107+
const startDate = +new Date()
108+
109+
const animateScroll = () => {
110+
const currentDate = +new Date()
111+
const currentTime = currentDate - startDate
112+
element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration), 10)
113+
if (currentTime < duration) {
114+
requestAnimationFrame(animateScroll)
115+
} else {
116+
element.scrollTop = to
117+
}
118+
}
119+
animateScroll()
120+
}
121+
}
84122
}
85123
</script>
86124

@@ -90,9 +128,17 @@ export default {
90128
position: fixed;
91129
z-index: 8;
92130
top: 0;
93-
width: 16rem;
94-
height: 100%;
131+
width: 100%;
132+
left: 0;
133+
}
134+
135+
.menu-background {
136+
position: fixed;
137+
top: 0;
138+
right: 0;
139+
bottom: 0;
95140
left: 0;
141+
background-color: #292f33A0;
96142
}
97143
98144
.navbar {
@@ -103,10 +149,10 @@ export default {
103149
z-index: 9;
104150
}
105151
106-
.logo-container > div {
152+
.logo-container {
107153
display: contents;
108154
}
109-
.logo-container > div > img {
155+
.logo-container > img {
110156
width: 48px;
111157
height: 48px;
112158
}

‎src/components/PageFooter.vue

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<div class="row bg-black color-white p-small pt-large pb-large">
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-sm-6 col-md-3">
6+
<h3>
7+
<a href="https://robotframework.org/foundation/">Foundation</a>
8+
</h3>
9+
<div>
10+
Robot Framework ry
11+
</div>
12+
<div>
13+
Kampinkuja 2
14+
</div>
15+
<div>
16+
00100 Helsinki
17+
</div>
18+
<div>
19+
Finland
20+
</div>
21+
<a href="mailto:robotframework-foundation@googlegroups.com">
22+
Contact
23+
</a>
24+
</div>
25+
<div class="col-sm-6 col-md-3">
26+
<h3>
27+
Community
28+
</h3>
29+
<div>
30+
<a href="https://github.com/robotframework/robotframework">
31+
GitHub
32+
</a>
33+
</div>
34+
<div>
35+
<a href="https://forum.robotframework.org/">
36+
Forum
37+
</a>
38+
</div>
39+
<div>
40+
<a href="https://www.facebook.com/robotframeworkofficial">
41+
Facebook
42+
</a>
43+
</div>
44+
<div>
45+
<a href="http://twitter.com/robotframework">
46+
Twitter
47+
</a>
48+
</div>
49+
<div>
50+
<a href="https://www.linkedin.com/groups/3710899/">
51+
LinkedIn
52+
</a>
53+
</div>
54+
</div>
55+
<div v-if="$store.state.isMobile" class="col-sm-12 mb-large" />
56+
<div class="col-sm-6 col-md-3">
57+
<h3>
58+
Instructions
59+
</h3>
60+
<div>
61+
<a href="https://github.com/robotframework/robotframework/blob/master/INSTALL.rst">
62+
Installation
63+
</a>
64+
</div>
65+
<div>
66+
<a href="https://github.com/robotframework/QuickStartGuide/blob/master/QuickStart.rst">
67+
Quick start
68+
</a>
69+
</div>
70+
<div>
71+
<a href="http://robotframework.org/robotframework/#user-guide">
72+
User guide
73+
</a>
74+
</div>
75+
<div>
76+
<a href="http://robotframework.org/robotframework/#user-guide">
77+
Web demo
78+
</a>
79+
</div>
80+
<div>
81+
<a href="https://robocon.io/">
82+
Robocon talks
83+
</a>
84+
</div>
85+
</div>
86+
<div class="col-sm-6 col-md-3 flex flex-col between">
87+
<div>
88+
<div class="relative">
89+
<button
90+
class="flex middle border-thin p-2xsmall pl-xsmall pr-xsmall"
91+
:class="langDropdownOpen ? 'border-theme' : 'border-white'"
92+
@click="langDropdownOpen = !langDropdownOpen">
93+
<globe-icon
94+
:color="langDropdownOpen ? 'theme' : 'white'"
95+
style="transform: translateY(-1px);" />
96+
<div
97+
class="relative ml-2xsmall"
98+
:class="langDropdownOpen ? 'color-theme' : 'color-white'">
99+
Language
100+
</div>
101+
</button>
102+
<transition name="fade-down">
103+
<div
104+
v-if="langDropdownOpen"
105+
class="absolute bg-black p-small border-white border-thin"
106+
style="bottom: 3rem;">
107+
<div
108+
v-for="({ lang, name }, i) in langNames"
109+
:key="lang">
110+
<button
111+
class="type-uppercase"
112+
:class="[lang === $i18n.locale ? 'color-theme' : 'color-white', {['mb-2xsmall'] : i !== langNames.length - 1}]"
113+
@click="setLang(lang)">
114+
{{ name }}
115+
</button>
116+
</div>
117+
</div>
118+
</transition>
119+
</div>
120+
</div>
121+
<div>
122+
<div>
123+
<a href="https://www.facebook.com/robotframeworkofficial">
124+
Privacy Policy
125+
</a>
126+
</div>
127+
<div>
128+
<a href="https://www.facebook.com/robotframeworkofficial">
129+
Code of Conduct
130+
</a>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</template>
138+
139+
<script>
140+
import GlobeIcon from './icons/GlobeIcon.vue'
141+
142+
export default {
143+
name: 'PageFooter',
144+
components: {
145+
GlobeIcon
146+
},
147+
data: () => ({
148+
langDropdownOpen: false
149+
}),
150+
computed: {
151+
langNames() {
152+
return Object.keys(this.$i18n.messages)
153+
.map((lang) => ({ lang, name: this.$i18n.messages[lang].langName }))
154+
.filter(({ name }) => name !== 'translation')
155+
}
156+
},
157+
methods: {
158+
setLang(lang) {
159+
this.$i18n.locale = lang
160+
window.localStorage.setItem('lang', lang)
161+
}
162+
}
163+
}
164+
</script>
165+
166+
<style scoped>
167+
@media screen and (max-width: 768px) {
168+
div {
169+
font-size: var(--type-small);
170+
}
171+
h3 {
172+
font-size: var(--type-body);
173+
}
174+
}
175+
</style>

‎src/components/PageSectionTwitter.vue

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export default {
5555
setTimeout(() => {
5656
this.twitterHeight = this.$refs.body.offsetHeight - 16
5757
}, 200)
58+
window.addEventListener('resize', () => { this.twitterHeight = this.$refs.body.offsetHeight - 16 })
5859
}
5960
}
6061
</script>

0 commit comments

Comments
 (0)