Skip to content

Commit 24d6511

Browse files
samipesamipe
committed
ui fixes
1 parent c9529e2 commit 24d6511

File tree

14 files changed

+115
-65
lines changed

14 files changed

+115
-65
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<title>Robot Framework</title>
88
<meta name=description content="Generic open source automation framework for acceptance testing, acceptance test driven development (ATDD), and robotic process automation (RPA).">
9-
<meta name="theme-color" content="#00c0b5">
9+
<meta name="theme-color" content="#000000">
1010
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
1111
<script defer data-domain="robotframework.org" src="https://plausible.io/js/plausible.outbound-links.js"></script>
1212
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

‎src/assets/css/elements.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,4 +148,5 @@ button.bling {
148148
hr.theme {
149149
border: solid 2px var(--color-theme);
150150
border-radius: 4px;
151+
margin: 0;
151152
}

‎src/assets/css/margins.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,10 @@
227227
margin-left: var(--size-medium);
228228
margin-right: var(--size-medium);
229229
}
230+
.mx-negative-medium {
231+
margin-left: calc(var(--size-medium) * -1);
232+
margin-right: calc(var(--size-medium) * -1);
233+
}
230234

231235
.mx-large {
232236
margin-left: var(--size-large);

‎src/assets/css/text.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ h2 {
5555
font-size: var(--type-xlarge);
5656
color: var(--color-theme);
5757
font-weight: var(--weight-bold);
58-
margin-bottom: var(--size-medium);
58+
margin-bottom: var(--size-small);
5959
line-height: var(--line-height-h2);
6060
text-transform: uppercase;
6161
}

‎src/components/Banner.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div>FRAME</div>
66
<div class="flex">
77
WORK
8-
<robot-icon size="4.6rem" color="black" style="transform: translate(0.5rem, 1rem);" />
8+
<robot-icon class="icon" color="black" style="transform: translate(0.5rem, 1rem);" />
99
</div>
1010
</h1>
1111
</div>
@@ -40,6 +40,15 @@ export default {
4040
flex-wrap: wrap;
4141
font-size: 20vw;
4242
padding: 14.25vw;
43+
transform: translateX(-1.75vw);
44+
}
45+
}
46+
.icon {
47+
width: 4.6rem;
48+
height: 4.6rem;
49+
@media screen and (max-width: 769px) {
50+
width: 16.5vw;
51+
height: 16.5vw;
4352
}
4453
}
4554
</style>

‎src/components/Calendar.vue‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
class="inner-calendar-container card bg-secondary"
44
:class="expanded ? 'expanded' : 'minified'"
55
ref="container">
6-
<div class="flex between px-medium py-xsmall">
7-
<h2 class="type-xlarge color-text mb-none">
6+
<div class="flex between p-medium">
7+
<h2 class="type-large color-text mb-none">
88
Events
99
</h2>
1010
<button class="flex middle" @click="filtersOpen = !filtersOpen">
@@ -88,7 +88,7 @@
8888
</details>
8989
</article>
9090
</template>
91-
<button v-if="!expanded" class="expand color-text" @click="expand()">
91+
<button v-if="!expanded" class="expand color-text" @click="expand($event.target.parentElement)">
9292
Expand
9393
</button>
9494
</div>
@@ -176,10 +176,11 @@ export default {
176176
return scrollHeight > clientHeight || scrollWidth > clientWidth
177177
})
178178
},
179-
expand() {
179+
expand(target) {
180180
if (!this.expanded) {
181181
setTimeout(() => {
182-
this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
182+
const bottomVisible = (window.innerHeight - target.getBoundingClientRect().bottom) > 30
183+
if (!bottomVisible) this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'end' })
183184
}, 1)
184185
}
185186
this.expanded = true
@@ -218,6 +219,16 @@ export default {
218219
height: 80vh;
219220
}
220221
}
222+
.inner-calendar-container:not(.expanded)::after {
223+
position: absolute;
224+
width: 100%;
225+
height: 100%;
226+
top: 0;
227+
left: 0;
228+
content: '';
229+
pointer-events: none;
230+
background: linear-gradient(transparent 80%, #1a1a1a 100%);
231+
}
221232
222233
.title {
223234
display: block;
@@ -267,6 +278,13 @@ export default {
267278
background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
268279
font-size: 1.25rem;
269280
backdrop-filter: blur(2px);
281+
z-index: 2;
282+
}
283+
details > summary {
284+
list-style: none;
285+
}
286+
details > summary::-webkit-details-marker {
287+
display: none;
270288
}
271289
summary {
272290
display: block;

‎src/components/NavMobile.vue‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,55 @@
11
<template>
2+
<div
3+
class="navbar row between bg-black color-white px-medium py-xsmall"
4+
:class="isOpen ? 'open' : ''">
5+
<div class="flex middle">
6+
<robot-icon size="2rem" @click="scrollTo(null, 400)" />
7+
<div class="font-title ml-xsmall">
8+
ROBOT FRAMEWORK
9+
</div>
10+
</div>
11+
<button
12+
class="hamburger"
13+
:class="isOpen ? 'open' : ''"
14+
@click="isOpen = !isOpen; docsOpen = false;">
15+
<span></span>
16+
<span></span>
17+
<span></span>
18+
<span></span>
19+
</button>
20+
</div>
221
<transition name="fade">
322
<div
423
v-if="isOpen"
5-
class="menu bg-black pt-xlarge pb-large pr-small" style="padding-left: 3.75rem">
24+
class="menu bg-black pt-xlarge pb-large pr-small" style="padding-left: 4.25rem">
625
<transition :name="docsOpen ? 'fade-left' : 'fade-right'" mode="out-in">
726
<div v-if="!docsOpen" key="1" class="mt-small">
827
<div
928
v-for="item in $tm('navbar.items')"
1029
:key="item.name">
1130
<button
1231
:name="`go-to-${item.name}`"
13-
class="mb-small mt-xsmall color-white font-title type-uppercase"
32+
class="mb-xsmall mt-xsmall color-white font-title type-uppercase"
1433
@click="scrollTo(item.id, 400); isOpen = false">
1534
{{ item.name }}
1635
</button>
1736
</div>
1837
<div>
1938
<button
20-
class="flex middle mt-medium color-white font-title type-uppercase"
39+
class="flex middle mt-large mb-small color-theme font-title type-uppercase type-large"
2140
style="margin-left: -0.5rem"
2241
@click="docsOpen = true">
23-
<chevron-icon direction="right" color="white" size="2rem" />
42+
<chevron-icon direction="right" color="theme" size="1.5rem" />
2443
<div>
25-
{{ $t('navbar.dropdownDocs.name') }}
44+
DOCS
2645
</div>
2746
</button>
2847
</div>
2948
</div>
3049
<div v-else key="3" class="mt-medium">
31-
<button class="type-uppercase font-title flex middle mb-medium" style="margin-left: -0.5rem" @click="docsOpen = false">
32-
<chevron-icon direction="left" color="white" size="2rem" />
33-
{{ $t('navbar.dropdownDocs.name') }}
50+
<button class="type-uppercase font-title color-theme type-large flex middle mb-medium" style="margin-left: -0.5rem" @click="docsOpen = false">
51+
<chevron-icon direction="left" color="theme" size="1.5rem" />
52+
DOCS
3453
</button>
3554
<div
3655
v-for="({ name, url, description }, i) in $tm('navbar.dropdownDocs.items')"
@@ -48,25 +67,6 @@
4867
</transition>
4968
</div>
5069
</transition>
51-
<div
52-
class="navbar row between bg-black color-white"
53-
:class="isOpen ? 'open' : ''">
54-
<div class="flex middle">
55-
<robot-icon size="2rem" class="ml-small" @click="scrollTo(null, 400)" />
56-
<div class="font-title ml-xsmall">
57-
ROBOT FRAMEWORK
58-
</div>
59-
</div>
60-
<button
61-
class="hamburger"
62-
:class="isOpen ? 'open' : ''"
63-
@click="isOpen = !isOpen; docsOpen = false;">
64-
<span></span>
65-
<span></span>
66-
<span></span>
67-
<span></span>
68-
</button>
69-
</div>
7070
<transition name="opacity">
7171
<div
7272
v-if="isOpen"
@@ -150,7 +150,7 @@ export default {
150150
}
151151
152152
.hamburger {
153-
margin: 1rem;
153+
margin: 0.5rem;
154154
width: 2rem;
155155
height: 1.5rem;
156156
position: relative;

‎src/components/Navbar.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,13 @@
4444
<transition name="fade">
4545
<div
4646
v-if="docsDropdownOpen"
47-
class="dropdown-container bg-black color-white p-large card">
47+
class="dropdown-container bg-black color-white p-large pt-xsmall card">
4848
<div
49-
v-for="({ name, url, description, large }, i) in $tm('navbar.dropdownDocs.items')"
49+
v-for="({ name, url, description }, i) in $tm('navbar.dropdownDocs.items')"
5050
:key="name"
51-
:class="large ? 'border-bottom-white border-thin pb-small mb-small' : 'mt-medium'">
51+
class="mt-medium">
5252
<a :href="url"
5353
class="type-no-underline"
54-
:class="large ? 'type-xlarge' : ''"
5554
@click="linkClick(name)">
5655
{{ name }}
5756
</a>

‎src/components/News.vue‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
:class="expanded ? 'expanded' : ''"
55
:style="{opacity: news.length === 0 ? 0.5 : 1}"
66
ref="container">
7-
<div class="flex between px-medium py-xsmall">
8-
<h2 class="type-xlarge color-text mb-none">
7+
<div class="flex between p-medium">
8+
<h2 class="type-large color-text mb-none">
99
News
1010
</h2>
1111
<a href="https://seu2.cleverreach.com/f/362604-365504/" class="newsletter">
@@ -33,7 +33,7 @@
3333
</div>
3434
</article>
3535
</template>
36-
<button v-if="!expanded" class="expand color-text" @click="expand()">
36+
<button v-if="!expanded" class="expand color-text" @click="expand($event.target.parentElement)">
3737
Expand
3838
</button>
3939
</div>
@@ -68,10 +68,11 @@ export default {
6868
}
6969
})
7070
},
71-
expand() {
71+
expand(target) {
7272
this.expanded = true
7373
setTimeout(() => {
74-
this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'center' })
74+
const bottomVisible = (window.innerHeight - target?.getBoundingClientRect()?.bottom) > 30
75+
if (!bottomVisible) this.$refs.container.scrollIntoView({ behavior: 'smooth', block: 'end' })
7576
}, 1)
7677
}
7778
}
@@ -90,6 +91,16 @@ export default {
9091
height: 80vh;
9192
}
9293
}
94+
.inner-news-container:not(.expanded)::after {
95+
position: absolute;
96+
width: 100%;
97+
height: 100%;
98+
top: 0;
99+
left: 0;
100+
content: '';
101+
pointer-events: none;
102+
background: linear-gradient(transparent 80%, #1a1a1a 100%);
103+
}
93104
img.main {
94105
width: 100%;
95106
border-radius: 0.25rem;
@@ -100,8 +111,8 @@ export default {
100111
width: 100%;
101112
text-align: center;
102113
padding-block: 0.75rem;
103-
background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
104114
font-size: 1.25rem;
105115
backdrop-filter: blur(2px);
116+
z-index: 2;
106117
}
107118
</style>

‎src/components/PageSection.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,26 @@ export default {
4545
visibility: hidden;
4646
pointer-events: none;
4747
}
48-
.body {
49-
margin-bottom: 2rem;
50-
}
5148
@media screen and (max-width: 1024px) {
49+
.section-container {
50+
margin-top: 2rem;
51+
margin-bottom: 4rem;
52+
}
5253
h2::before {
5354
margin-top: -30px;
5455
height: 30px;
5556
}
56-
.section-container {
57-
padding: 1rem;
57+
h2 {
58+
padding-inline: 1.5rem;
5859
}
5960
}
6061
@media screen and (min-width: 1025px) {
62+
.section-container {
63+
margin-top: 1rem;
64+
margin-bottom: 4rem;
65+
}
6166
.title {
62-
padding-left: 0.5rem;
67+
padding-left: 1rem;
6368
}
6469
.body {
6570
padding-right: 1rem;

0 commit comments

Comments
 (0)