Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit841285a

Browse files
author
Sami Kolari
committed
mobile view
1 parent2477b61 commit841285a

File tree

16 files changed

+382
-184
lines changed

16 files changed

+382
-184
lines changed

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
66
<metaname="viewport"content="width=device-width,initial-scale=1.0">
77
<linkrel="icon"href="<%= BASE_URL %>favicon.ico">
8-
<scripttype="text/javascript">
8+
<!-- <script type="text/javascript">
99
var _jipt = [];
1010
_jipt.push(['project', 'ddd00e482856bb264959ae8e3d51e4b6']);
1111
_jipt.push(['domain', 'robotframework']);
1212
</script>
13-
<scripttype="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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
exportdefault {
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‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,15 @@
2121
.border-black {
2222
border: solid0.15remvar(--color-black);
2323
}
24+
.border-white {
25+
border: solid0.15remvar(--color-white);
26+
}
2427
.border-theme {
2528
border: solid0.2remvar(--color-theme);
2629
}
30+
.border-thin {
31+
border-width:0.05rem;
32+
}
2733

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

72+
@media screenand (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‎

Lines changed: 0 additions & 6 deletions
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:00 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:00 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:00 auto;

‎src/assets/css/text.css‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -227,29 +227,3 @@ strong,
227227
.type-italic {
228228
font-style: italic;
229229
}
230-
231-
@media screenand (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 screenand (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‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
.fade-enter-active, .fade-leave-active {
2-
transition: all0.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: transform0.15s, opacity0.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: all0.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: all0.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: opacity0.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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<divv-if="activeCompany">
3-
<divclass="row carousel-container bg-grey-light rounded">
3+
<divclass="row carousel-containerpt-small pb-smallbg-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‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<template>
2+
<transitionname="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+
<divv-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+
<divv-elsekey="2"class="pl-2xsmall">
25+
<button
26+
class="color-white font-title type-uppercase"
27+
@click="linksOpen = false">
28+
<divclass="flex middle mb-small"style="margin-left:-0.5rem;">
29+
<chevron-icondirection="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+
<pclass="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+
<divclass="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+
importChevronIconfrom'./icons/ChevronIcon.vue'
73+
74+
exportdefault {
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:.2sease-in-out;
122+
cursor:pointer;
123+
}
124+
.hamburgerspan {
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:.25sease-in-out;
135+
}
136+
.hamburgerspan:nth-child(1) {
137+
top:0;
138+
}
139+
.hamburgerspan:nth-child(2),.hamburgerspan:nth-child(3) {
140+
top:10px;
141+
}
142+
.hamburgerspan:nth-child(4) {
143+
top:20px;
144+
}
145+
.hamburger.openspan:nth-child(1) {
146+
top:10px;
147+
width:0%;
148+
left:50%;
149+
}
150+
.hamburger.openspan:nth-child(2) {
151+
transform:rotate(45deg);
152+
}
153+
.hamburger.openspan:nth-child(3) {
154+
transform:rotate(-45deg);
155+
}
156+
.hamburger.openspan:nth-child(4) {
157+
top:10px;
158+
width:0%;
159+
left:50%;
160+
}
161+
162+
@mediascreenand (min-width:769px) {
163+
.navbar,.menu {
164+
display:none;
165+
}
166+
}
167+
168+
</style>

‎src/components/Navbar.vue‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,6 @@
7070
</div>
7171
</transition>
7272
</button>
73-
<!-- rf logo-->
74-
<transitionname="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
returnObject.keys(this.$i18n.messages)
10191
.map((lang)=> ({ lang, name:this.$i18n.messages[lang].langName }))
10292
}
10393
},
104-
mounted() {
105-
constobserver=newIntersectionObserver((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)
[8]ページ先頭
©2009-2025 Movatter.jp