Skip to content

Commit 841285a

Browse files
author
Sami Kolari
committed
mobile view
1 parent 2477b61 commit 841285a

16 files changed

+382
-184
lines changed

‎public/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<script type="text/javascript">
8+
<!-- <script type="text/javascript">
99
var _jipt = [];
1010
_jipt.push(['project', 'ddd00e482856bb264959ae8e3d51e4b6']);
1111
_jipt.push(['domain', 'robotframework']);
1212
</script>
13-
<script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js"></script>
13+
<script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js"></script> -->
1414
<title><%= htmlWebpackPlugin.options.title %></title>
1515
</head>
1616
<body>

‎src/App.vue

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
export default {
99
created() {
1010
document.documentElement.lang = this.$i18n.locale
11+
this.$store.commit('SET_IS_MOBILE', window.innerWidth < 769)
12+
window.addEventListener('resize', () => this.$store.commit('SET_IS_MOBILE', window.innerWidth < 769))
1113
},
1214
watch: {
1315
'$i18n.locale'() {

‎src/assets/css/elements.css

+12
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,15 @@
2121
.border-black {
2222
border: solid 0.15rem var(--color-black);
2323
}
24+
.border-white {
25+
border: solid 0.15rem var(--color-white);
26+
}
2427
.border-theme {
2528
border: solid 0.2rem var(--color-theme);
2629
}
30+
.border-thin {
31+
border-width: 0.05rem;
32+
}
2733

2834
.border-right-theme {
2935
border-right: solid 0.2rem var(--color-theme);
@@ -63,6 +69,12 @@
6369
color: var(--color-white);
6470
}
6571

72+
@media screen and (max-width: 768px) {
73+
.theme-button {
74+
padding: var(--size-3xsmall) var(--size-xsmall);
75+
}
76+
}
77+
6678
.disabled {
6779
opacity: 0.4;
6880
pointer-events: none;

‎src/assets/css/grid.css

-6
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,6 @@
167167
.col-sm-offset-10,
168168
.col-sm-offset-11,
169169
.col-sm-offset-12 {
170-
padding-left: 0.25rem;
171-
padding-right: 0.25rem;
172170
box-sizing: border-box;
173171
-webkit-box-flex: 0;
174172
-ms-flex: 0 0 auto;
@@ -331,8 +329,6 @@
331329
.col-md-offset-10,
332330
.col-md-offset-11,
333331
.col-md-offset-12 {
334-
padding-left: 0.25rem;
335-
padding-right: 0.25rem;
336332
box-sizing: border-box;
337333
-webkit-box-flex: 0;
338334
-ms-flex: 0 0 auto;
@@ -496,8 +492,6 @@
496492
.col-lg-offset-10,
497493
.col-lg-offset-11,
498494
.col-lg-offset-12 {
499-
padding-left: 0.25rem;
500-
padding-right: 0.25rem;
501495
box-sizing: border-box;
502496
-webkit-box-flex: 0;
503497
-ms-flex: 0 0 auto;

‎src/assets/css/text.css

-26
Original file line numberDiff line numberDiff line change
@@ -227,29 +227,3 @@ strong,
227227
.type-italic {
228228
font-style: italic;
229229
}
230-
231-
@media screen and (max-width: 1024px) {
232-
html {
233-
font-size: var(--size-base-md);
234-
}
235-
h1 {
236-
font-size: var(--type-2xlarge);
237-
}
238-
h2 {
239-
font-size: var(--type-xlarge);
240-
}
241-
}
242-
@media screen and (max-width: 560px) {
243-
html {
244-
font-size: var(--size-base-sm);
245-
}
246-
h1 {
247-
font-size: var(--type-xlarge);
248-
}
249-
h2 {
250-
font-size: var(--type-large);
251-
}
252-
h3 {
253-
font-size: var(--type-body);
254-
}
255-
}

‎src/assets/css/transitions.css

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
.fade-enter-active, .fade-leave-active {
2-
transition: all 0.15s;
1+
.fade-enter-active,
2+
.fade-leave-active,
3+
.fade-left-enter-active,
4+
.fade-left-leave-active,
5+
.fade-right-enter-active,
6+
.fade-right-leave-active,
7+
.fade-left-in-out-enter-active,
8+
.fade-left-in-out-leave-active,
9+
.opacity-enter-active,
10+
.opacity-leave-active {
11+
transition: transform 0.15s, opacity 0.15s;
312
transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
413
}
14+
515
.fade-enter-from, .fade-leave-to {
616
opacity: 0;
717
transform: translateY(-10px) !important;
818
}
9-
.fade-left-enter-active, .fade-left-leave-active {
10-
transition: all 0.15s;
11-
transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
12-
}
1319
.fade-left-enter-from, .fade-right-leave-to {
1420
opacity: 0;
1521
transform: translateX(10px) !important;
1622
}
17-
.fade-right-enter-active, .fade-right-leave-active {
18-
transition: all 0.15s;
19-
transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
20-
}
2123
.fade-right-enter-from, .fade-left-leave-to {
2224
opacity: 0;
2325
transform: translateX(-10px) !important;
2426
}
25-
26-
.opacity-enter-active, .opacity-leave-active {
27-
transition: opacity 0.2s;
28-
transition-timing-function: cubic-bezier(0.14, 0.7, 0.56, 0.92);
27+
.fade-left-in-out-enter-from, .fade-left-in-out-leave-to {
28+
opacity: 0;
29+
transform: translateX(-10px) !important;
2930
}
3031
.opacity-enter-from, .opacity-leave-to {
3132
opacity: 0;

‎src/assets/css/variables.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
--type-body: 1rem; /* p and h3 */
3434
--type-large: 1.15rem; /* h2 */
3535
--type-xlarge: 1.6rem; /* h2 */
36-
--type-2xlarge: 5rem; /* h1 */
36+
--type-2xlarge: 4rem; /* h1 */
3737

3838
/* font weights */
3939
--weight-light: 300;

‎src/components/CompanyCarousel.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div v-if="activeCompany">
3-
<div class="row carousel-container bg-grey-light rounded">
3+
<div class="row carousel-container pt-small pb-small bg-grey-light rounded">
44
<button
55
class="col-sm-1 flex center middle"
66
@click="setActiveCompany(-1)">
@@ -76,7 +76,7 @@ export default {
7676

7777
<style scoped>
7878
.carousel-container {
79-
height: 10rem;
79+
min-height: 10rem;
8080
}
8181
.img-container {
8282
height: 4rem;

‎src/components/NavMobile.vue

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<template>
2+
<transition name="fade-left-in-out">
3+
<div
4+
v-if="isOpen"
5+
class="menu bg-black pt-2xlarge pl-small pr-small">
6+
<transition :name="linksOpen ? 'fade-left' : 'fade-right'" mode="out-in">
7+
<div v-if="!linksOpen" key="1" class="pl-2xsmall">
8+
<div
9+
v-for="item in $tm('navbar.items')"
10+
:key="item">
11+
<button
12+
:name="`go-to-${item}`"
13+
class="mb-small mt-xsmall color-white font-title type-uppercase"
14+
@click="scrollTo(item)">
15+
{{ item }}
16+
</button>
17+
</div>
18+
<button
19+
class="mt-xsmall color-white font-title type-uppercase"
20+
@click="linksOpen = true">
21+
{{ $t('navbar.dropdownName') }}
22+
</button>
23+
</div>
24+
<div v-else key="2" class="pl-2xsmall">
25+
<button
26+
class="color-white font-title type-uppercase"
27+
@click="linksOpen = false">
28+
<div class="flex middle mb-small" style="margin-left: -0.5rem;">
29+
<chevron-icon direction="left" color="white" :size="32" />
30+
<div>
31+
{{ $t('navbar.dropdownName') }}
32+
</div>
33+
</div>
34+
</button>
35+
<div
36+
v-for="{ name, url, description } in $tm('navbar.dropdown')"
37+
:key="name"
38+
class="">
39+
<a
40+
:href="url">
41+
{{ name }}
42+
</a>
43+
<p class="type-small color-white">
44+
{{ description }}
45+
</p>
46+
</div>
47+
</div>
48+
</transition>
49+
</div>
50+
</transition>
51+
<div
52+
class="navbar row between bg-black color-white"
53+
:class="isOpen ? 'open' : ''">
54+
<button
55+
class="hamburger"
56+
:class="isOpen ? 'open' : ''"
57+
@click="isOpen = !isOpen; linksOpen = false">
58+
<span></span>
59+
<span></span>
60+
<span></span>
61+
<span></span>
62+
</button>
63+
<div class="logo-container flex middle pr-xsmall">
64+
<div>
65+
<img :src="`${publicPath}img/RF-white.svg`" />
66+
</div>
67+
</div>
68+
</div>
69+
</template>
70+
71+
<script>
72+
import ChevronIcon from './icons/ChevronIcon.vue'
73+
74+
export default {
75+
name: 'NavMobile',
76+
components: {
77+
ChevronIcon
78+
},
79+
data: () => ({
80+
isOpen: false,
81+
linksOpen: false,
82+
publicPath: process.env.BASE_URL
83+
})
84+
}
85+
</script>
86+
87+
<style scoped>
88+
89+
.menu {
90+
position: fixed;
91+
z-index: 8;
92+
top: 0;
93+
width: 16rem;
94+
height: 100%;
95+
left: 0;
96+
}
97+
98+
.navbar {
99+
width: 100%;
100+
position: sticky;
101+
top: 0;
102+
left: 0;
103+
z-index: 9;
104+
}
105+
106+
.logo-container > div {
107+
display: contents;
108+
}
109+
.logo-container > div > img {
110+
width: 48px;
111+
height: 48px;
112+
}
113+
114+
.hamburger {
115+
margin: 16px;
116+
margin-left: 20px;
117+
width: 32px;
118+
height: 24px;
119+
position: relative;
120+
transform: rotate(0deg);
121+
transition: .2s ease-in-out;
122+
cursor: pointer;
123+
}
124+
.hamburger span {
125+
display: block;
126+
position: absolute;
127+
height: 4px;
128+
width: 100%;
129+
background: var(--color-white);
130+
border-radius: 1px;
131+
opacity: 1;
132+
left: 0;
133+
transform: rotate(0deg);
134+
transition: .25s ease-in-out;
135+
}
136+
.hamburger span:nth-child(1) {
137+
top: 0;
138+
}
139+
.hamburger span:nth-child(2),.hamburger span:nth-child(3) {
140+
top: 10px;
141+
}
142+
.hamburger span:nth-child(4) {
143+
top: 20px;
144+
}
145+
.hamburger.open span:nth-child(1) {
146+
top: 10px;
147+
width: 0%;
148+
left: 50%;
149+
}
150+
.hamburger.open span:nth-child(2) {
151+
transform: rotate(45deg);
152+
}
153+
.hamburger.open span:nth-child(3) {
154+
transform: rotate(-45deg);
155+
}
156+
.hamburger.open span:nth-child(4) {
157+
top: 10px;
158+
width: 0%;
159+
left: 50%;
160+
}
161+
162+
@media screen and (min-width: 769px) {
163+
.navbar, .menu {
164+
display: none;
165+
}
166+
}
167+
168+
</style>

‎src/components/Navbar.vue

+1-17
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,6 @@
7070
</div>
7171
</transition>
7272
</button>
73-
<!-- rf logo -->
74-
<transition name="opacity">
75-
<div
76-
v-if="navSticky"
77-
class="tiny-logo-container">
78-
<img :src="`${publicPath}img/RF-white.svg`" />
79-
</div>
80-
</transition>
8173
</div>
8274
</template>
8375

@@ -91,22 +83,14 @@ export default {
9183
},
9284
data: () => ({
9385
linkDropdownOpen: false,
94-
langDropdownOpen: false,
95-
navSticky: false,
96-
publicPath: process.env.BASE_URL
86+
langDropdownOpen: false
9787
}),
9888
computed: {
9989
langNames() {
10090
return Object.keys(this.$i18n.messages)
10191
.map((lang) => ({ lang, name: this.$i18n.messages[lang].langName }))
10292
}
10393
},
104-
mounted() {
105-
const observer = new IntersectionObserver((e) => {
106-
this.navSticky = !e[0].isIntersecting
107-
}, { threshold: 1 })
108-
observer.observe(this.$refs.nav)
109-
},
11094
methods: {
11195
scrollTo(item) {
11296
document.getElementById(item.toLowerCase().replaceAll(' ', '-')).scrollIntoView({

0 commit comments

Comments
 (0)