Skip to content

Commit aa7f0d0

Browse files
samipesamipe
committed
navbar updates + docs links
1 parent 1053777 commit aa7f0d0

File tree

7 files changed

+59
-53
lines changed

7 files changed

+59
-53
lines changed

‎src/assets/css/elements.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@
5151
border-top: solid 0.2rem var(--color-white);
5252
}
5353

54+
.border-light {
55+
border-width: 0.1rem;
56+
}
5457
.border-thin {
5558
border-width: 0.05rem;
5659
}

‎src/components/NavMobile.vue‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<transition name="fade">
33
<div
44
v-if="isOpen"
5-
class="menu bg-black pt-xlarge pb-large pl-small pr-small">
5+
class="menu bg-black pt-xlarge pb-large pr-small" style="padding-left: 3.75rem">
66
<transition :name="docsOpen ? 'fade-left' : 'fade-right'" mode="out-in">
7-
<div v-if="!docsOpen" key="1" class="mt-medium">
7+
<div v-if="!docsOpen" key="1" class="mt-small">
88
<div
99
v-for="item in $tm('navbar.items')"
1010
:key="item.name">
@@ -17,8 +17,8 @@
1717
</div>
1818
<div>
1919
<button
20-
class="flex middle mt-medium mb-small color-white font-title type-uppercase"
21-
style="margin-left: -0.5rem;"
20+
class="flex middle mt-medium color-white font-title type-uppercase"
21+
style="margin-left: -0.5rem"
2222
@click="docsOpen = true">
2323
<chevron-icon direction="right" color="white" size="2rem" />
2424
<div>
@@ -28,11 +28,15 @@
2828
</div>
2929
</div>
3030
<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') }}
34+
</button>
3135
<div
3236
v-for="({ name, url, description }, i) in $tm('navbar.dropdownDocs.items')"
3337
:key="name">
3438
<div class="flex middle">
35-
<a :href="url">
39+
<a :href="url" class="line-height-1">
3640
{{ name }}
3741
</a>
3842
</div>
@@ -47,28 +51,12 @@
4751
<div
4852
class="navbar row between bg-black color-white"
4953
:class="isOpen ? 'open' : ''">
50-
<transition :name="docsOpen ? 'fade-left' : 'fade-right'" mode="out-in">
51-
<button
52-
v-if="docsOpen"
53-
class="color-white font-title type-uppercase ml-2xsmall"
54-
@click="docsOpen = false">
55-
<div class="flex middle">
56-
<chevron-icon direction="left" color="white" size="2rem" />
57-
<div>
58-
{{ $t('navbar.dropdownDocs.name') }}
59-
</div>
60-
</div>
61-
</button>
62-
<div
63-
v-else
64-
class="flex middle">
65-
<robot-icon size="2rem" class="ml-small" @click="scrollTo(null, 400)" />
66-
<div
67-
class="font-title ml-xsmall">
68-
ROBOT FRAMEWORK
69-
</div>
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
7058
</div>
71-
</transition>
59+
</div>
7260
<button
7361
class="hamburger"
7462
:class="isOpen ? 'open' : ''"

‎src/components/Navbar.vue‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,27 @@
1010
@click="logoClick" />
1111
</div>
1212
</transition>
13-
<div class="container row center middle">
14-
<div class="flex">
13+
<div class="container row middle pr-small">
14+
<div class="col-sm-3 flex">
1515
<transition name="opacity">
16-
<robot-icon
17-
v-if="iconInContainer"
18-
size="1.75rem"
19-
class="rf-icon-rotation cursor-pointer"
20-
@click="logoClick" />
16+
<robot-icon
17+
v-if="navSticky && iconInContainer"
18+
size="1.75rem"
19+
class="rf-icon-rotation cursor-pointer"
20+
@click="logoClick" />
2121
</transition>
22-
<!-- section navigation -->
22+
</div>
23+
<div class="flex">
24+
<!-- internal page navigation -->
2325
<button
24-
v-for="(item) in $tm('navbar.items')"
26+
v-for="(item, i) in $tm('navbar.items')"
2527
:key="item.name"
2628
:name="`go-to-${item.name}`"
27-
class="px-small color-white font-title type-no-underline type-uppercase line-height-body border-right-white"
29+
class="color-white font-title type-no-underline type-uppercase line-height-body border-right-white border-light"
30+
:class="i === 0 ? 'pl-xsmall pr-small' : 'px-small'"
2831
@click="itemClick(item.id)">
2932
{{ item.name }}
3033
</button>
31-
<!-- docs -->
3234
<div class="relative" ref="dropdownDocs">
3335
<button
3436
class="flex middle px-small font-title type-uppercase line-height-body dropdown-button"
@@ -180,12 +182,24 @@ export default {
180182
</script>
181183

182184
<style scoped>
183-
button {
185+
button, a {
184186
transition: color 0.2s;
185187
}
186-
button:hover {
188+
svg {
189+
transition: fill 0.2s;
190+
}
191+
button:hover, a:hover {
187192
color: var(--color-theme) !important;
188193
}
194+
a {
195+
text-underline-offset: 0.25rem;
196+
}
197+
a:hover {
198+
text-decoration: underline;
199+
}
200+
a:hover > svg {
201+
fill: var(--color-theme) !important;
202+
}
189203
.navbar {
190204
position: sticky;
191205
top: -1px;

‎src/components/PageSectionTwitter.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="border-top-theme row p-small pb-none">
2+
<div class="row p-small pb-none">
33
<div
44
class="col-sm-12 col-lg-3"
55
:class="$store.state.isMobile ? '' : 'pt-3xsmall'">
@@ -71,6 +71,7 @@ export default {
7171
<style scoped>
7272
.twitter {
7373
overflow: scroll;
74+
border-radius: 0.75rem;
7475
}
7576
h2::before {
7677
display: block;

‎src/content/english/main.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ export default () => ({
3030
dropdownDocs: {
3131
name: 'Docs',
3232
items: [
33+
{
34+
name: 'Guides (new)',
35+
url: 'https://docs.robotframework.org/docs',
36+
description: 'How to start'
37+
},
3338
{
3439
name: 'User Guide',
3540
url: 'https://robotframework.org/robotframework/latest/RobotFrameworkUserGuide.html',
@@ -131,7 +136,7 @@ export default () => ({
131136
<p>Below you'll find a live Robot Framework editor with embedded <a href="https://pyodide.org/en/stable/" target="_blank">WASM Python</a> environment to run it online.
132137
Feel free to experiment with it! <b>NOTE: This is the editor's first release.</b> If you find bugs,
133138
please report them in <a href="https://github.com/robotframework/robotframework.github.com/issues" target="_blank">Github issues.</a></p>
134-
<p>To start using Robot Framework in a project of your own, please also check tabs "Install" and "Learn".</p>`,
139+
<p>To start using Robot Framework in a project of your own, please check tabs "Install" and "Learn". Also be sure to visit the new <a href="https://docs.robotframework.org/">Robot Framework Docs</a>!</p>`,
135140
tabs: [
136141
{
137142
name: 'Editor'

‎src/content/resources/learning.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
export default () => ([
22
{
3-
name: 'Installation Instructions',
4-
description: 'Complete installation instructions.',
5-
href: 'https://github.com/robotframework/robotframework/blob/master/INSTALL.rst'
3+
name: 'Robot Framework Docs',
4+
description: 'Learn with guides and examples that cover Robot Framework all the way from installation to advanced usage.',
5+
href: 'https://docs.robotframework.org/'
66
},
77
{
88
name: 'User Guide',
99
description: 'Reference manual explaining all Robot Framework features in detail.',
1010
href: 'https://robotframework.org/robotframework/latest/RobotFrameworkUserGuide.html'
1111
},
1212
{
13-
name: 'Quick Start Guide',
14-
description: 'Introduces the most important features of Robot Framework and acts as an executable demo.',
15-
href: 'https://github.com/robotframework/QuickStartGuide/blob/master/QuickStart.rst'
13+
name: 'Public API',
14+
description: 'Public API for writing your own tools against Robot Framework.',
15+
href: 'https://robot-framework.readthedocs.org/en/latest/'
1616
},
1717
{
1818
name: 'How to write good test cases',
@@ -24,11 +24,6 @@ export default () => ([
2424
description: 'Slide set loosely based on \'How to write good test cases\' guidelines.',
2525
href: 'https://www.slideshare.net/pekkaklarck/robot-framework-dos-and-donts'
2626
},
27-
{
28-
name: 'Public API',
29-
description: 'Public API for writing your own tools against Robot Framework.',
30-
href: 'https://robot-framework.readthedocs.org/en/latest/'
31-
},
3227
{
3328
name: 'Introduction Slides',
3429
description: 'Generic Robot Framework introduction slides.',

‎src/views/Home.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
class="mb-small mt-small" />
88
<div
99
v-else
10-
class="mb-medium" />
10+
class="" />
1111
<div class="container mb-xlarge">
1212
<!-- introduction -->
1313
<page-section-twitter

0 commit comments

Comments
 (0)