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

Commit03f4a4a

Browse files
author
Sami Kolari
committed
footer + mobile view
1 parent841285a commit03f4a4a

File tree

14 files changed

+739
-475
lines changed

14 files changed

+739
-475
lines changed

‎.eslintrc.js‎

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

Lines changed: 5 additions & 5 deletions
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: transform0.15s, opacity0.15s;
11+
transition: transform0.25s, opacity0.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‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,27 @@
22
<divv-if="activeCompany">
33
<divclass="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-
<divclass="col-sm-3">
12+
class="col-sm-8 col-md-10 row middle"
13+
:style="!$store.state.isMobile ? 'height: 10rem;' : ''">
14+
<divclass="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-smallpl-medium"
20+
class="col-sm-12 col-md-9 type-italic type-smalldescription"
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-icondirection="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+
@mediascreenand (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‎

Lines changed: 56 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<transitionname="fade-left-in-out">
2+
<transitionname="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
<divv-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-
<divclass="logo-container flex middle pr-xsmall">
64-
<div>
63+
<divclass="flex middle pr-xsmall">
64+
<divclass="font-title mr-2xsmall">
65+
ROBOT FRAMEWORK
66+
</div>
67+
<divclass="logo-container">
6568
<img:src="`${publicPath}img/RF-white.svg`" />
6669
</div>
6770
</div>
6871
</div>
72+
<transitionname="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+
consteaseInOutQuad= (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+
constto=document.getElementById(el.toLowerCase().replaceAll('','-')).offsetTop-80
103+
constelement=document.scrollingElement||document.documentElement
104+
conststart=element.scrollTop
105+
106+
constchange= to- start
107+
conststartDate=+newDate()
108+
109+
constanimateScroll= ()=> {
110+
constcurrentDate=+newDate()
111+
constcurrentTime= 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‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<divclass="row bg-black color-white p-small pt-large pb-large">
3+
<divclass="container">
4+
<divclass="row">
5+
<divclass="col-sm-6 col-md-3">
6+
<h3>
7+
<ahref="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+
<ahref="mailto:robotframework-foundation@googlegroups.com">
22+
Contact
23+
</a>
24+
</div>
25+
<divclass="col-sm-6 col-md-3">
26+
<h3>
27+
Community
28+
</h3>
29+
<div>
30+
<ahref="https://github.com/robotframework/robotframework">
31+
GitHub
32+
</a>
33+
</div>
34+
<div>
35+
<ahref="https://forum.robotframework.org/">
36+
Forum
37+
</a>
38+
</div>
39+
<div>
40+
<ahref="https://www.facebook.com/robotframeworkofficial">
41+
Facebook
42+
</a>
43+
</div>
44+
<div>
45+
<ahref="http://twitter.com/robotframework">
46+
Twitter
47+
</a>
48+
</div>
49+
<div>
50+
<ahref="https://www.linkedin.com/groups/3710899/">
51+
LinkedIn
52+
</a>
53+
</div>
54+
</div>
55+
<divv-if="$store.state.isMobile"class="col-sm-12 mb-large" />
56+
<divclass="col-sm-6 col-md-3">
57+
<h3>
58+
Instructions
59+
</h3>
60+
<div>
61+
<ahref="https://github.com/robotframework/robotframework/blob/master/INSTALL.rst">
62+
Installation
63+
</a>
64+
</div>
65+
<div>
66+
<ahref="https://github.com/robotframework/QuickStartGuide/blob/master/QuickStart.rst">
67+
Quick start
68+
</a>
69+
</div>
70+
<div>
71+
<ahref="http://robotframework.org/robotframework/#user-guide">
72+
User guide
73+
</a>
74+
</div>
75+
<div>
76+
<ahref="http://robotframework.org/robotframework/#user-guide">
77+
Web demo
78+
</a>
79+
</div>
80+
<div>
81+
<ahref="https://robocon.io/">
82+
Robocon talks
83+
</a>
84+
</div>
85+
</div>
86+
<divclass="col-sm-6 col-md-3 flex flex-col between">
87+
<div>
88+
<divclass="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+
<transitionname="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+
<ahref="https://www.facebook.com/robotframeworkofficial">
124+
Privacy Policy
125+
</a>
126+
</div>
127+
<div>
128+
<ahref="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+
importGlobeIconfrom'./icons/GlobeIcon.vue'
141+
142+
exportdefault {
143+
name:'PageFooter',
144+
components: {
145+
GlobeIcon
146+
},
147+
data: ()=> ({
148+
langDropdownOpen:false
149+
}),
150+
computed: {
151+
langNames() {
152+
returnObject.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+
@mediascreenand (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‎

Lines changed: 1 addition & 0 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp