Skip to content

Commit 604ed53

Browse files
calvellidocalvellido
authored
Docs styles tweaks (#1264)
* Show icons on mobile viewport in the nav menu * Increment code snippets vertical spacing to improve readability * Increase sidebar z-index to avoid clashes wit document elements * Update sidebar menu entries location in the docs docs for the new one * Refactor the sidebar behaviour to improve readility on mobile viewports * Removes Hammer logic, as gestures are no more necessary
1 parent 43e732e commit 604ed53

File tree

13 files changed

+142
-68
lines changed

13 files changed

+142
-68
lines changed

‎modules/docs/arrow-docs/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ We prefer Kdocs only for documenting data types or type classes. Only use tutori
1111

1212
### 1. Add a menu entry to your docs
1313

14-
Go to `modules/docs/arrow-docs/docs/_data/menu.yml` and add a menu entry in the proper section, as in:
14+
Go to `modules/docs/arrow-docs/docs/_data/sidebar.yml` and add a menu entry in the proper section, as in:
1515

1616
```
1717
- title: Applicative

‎modules/docs/arrow-docs/docs/_data/menu.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
nav:
22
- title: Documentation
33
url: /docs
4+
icon: "fa-book"
45

56
- title: Blog
67
url: /blog
8+
icon: "fa-rss"
79

810
- title: Github
911
url: https://github.com/arrow-kt/arrow
12+
icon: "fa-github"
1013

1114
- title: License
1215
url: https://github.com/arrow-kt/arrow#license
16+
icon: "fa-creative-commons"
1317

1418
tab:
1519
- title: All

‎modules/docs/arrow-docs/docs/_includes/_doc-wrapper.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<div id="doc-wrapper">
22
<div class="doc-header">
3+
<button type="button" id="main-toggle" class="sidebar-toggle">
4+
<i class="fa fa-lg fa-bars menu-icon"></i>
5+
</button>
36
<div class="search-wrapper">
47
<input id="docsearch" class="search" placeholder="Search documentation..." type="search">
58
</div>

‎modules/docs/arrow-docs/docs/_includes/_js-bottom-docs.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
<script>
88
hljs.initHighlighting();
99
</script>
10-
<!-- Touch gesture support -->
11-
<script src="{{ '/js/hammer.min.js' | relative_url }}"></script>
1210
<!-- Docsearch -->
1311
<script type="text/javascript" src="{{ '/js/docsearch.min.js' | relative_url }}"></script>
1412
<!-- Custom scripts for this template -->

‎modules/docs/arrow-docs/docs/_includes/_nav.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@
55
<ul class="navigation-menu">
66
{% for item in site.data.menu.nav %}
77
<li class="navigation-menu-item {% if item.url == category.url %}active {% endif %}">
8-
<a href="{{ item.url }}" alt="{{ item.title }}">{{ item.title }}</a>
8+
<a href="{{ item.url }}" title="{{ item.title }}" alt="{{ item.title }}">
9+
{% if item.icon != "" %}
10+
<i class="nav-item-icon fa fa-lg {{ item.icon }}" aria-hidden="true"></i>
11+
<span class="nav-item-text">{{ item.title }}</span>
12+
{% else %}
13+
<span>{{ item.title }}</span>
14+
{% endif %}
15+
</a>
916
</li>
1017
{% endfor %}
1118
</ul>

‎modules/docs/arrow-docs/docs/_includes/_sidebar-wrapper.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<img src="/img/arrow-brand-sidebar.svg" alt="">
55
<span>Λrrow</span>
66
</a>
7-
<a href="javascript:void(0)" id="main-toggle" class="sidebar-toggle">
8-
<i class="fa fa-bars"></i>
9-
</a>
7+
<button type="button" id="main-toggle" class="sidebar-toggle">
8+
<span class="close"></span>
9+
</button>
1010
</div>
1111

1212
<ul class="sidebar-nav">

‎modules/docs/arrow-docs/docs/_sass/components/_code.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ p, ul {
1919
font-size: 0.8rem !important;
2020
@include border-radius (3px);
2121
z-index: 0;
22+
23+
.CodeMirror-lines {
24+
margin: 0;
25+
padding: 12px 0 10px;
26+
}
27+
28+
.CodeMirror-line {
29+
line-height: 1.5;
30+
}
2231
}
2332

2433
.hljs {

‎modules/docs/arrow-docs/docs/_sass/components/_doc-header.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@include justify-content(space-between);
77
@include align-items(center);
88
height: ($base-point-grid * 11);
9-
padding: 0 ($base-point-grid * 4);
9+
padding: 0 ($base-point-grid * 4) 0 ($base-point-grid * 1);
1010
background: $white;
1111

1212
.search-wrapper {

‎modules/docs/arrow-docs/docs/_sass/components/_navigation.scss

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
font-weight: $font-medium;
1717
text-transform: uppercase;
1818
letter-spacing: 4px;
19-
@include bp(medium) {
20-
font-size: 0.875rem;
19+
@include bp(small) {
20+
letter-spacing: 2px;
2121
}
2222
}
2323
.navigation-menu {
@@ -26,19 +26,20 @@
2626
text-transform: uppercase;
2727
font-size: 0.875rem;
2828

29-
margin-right: ($base-point-grid * 4);
30-
3129
@include bp(medium) {
32-
&:last-child {
33-
margin-right: ($base-point-grid * 2);
34-
}
35-
3630
text-transform: none;
3731
}
3832

3933
&.active {
4034
border-bottom: 2px solid $brand-quaternary;
4135
}
36+
37+
& + .navigation-menu-item {
38+
margin-left: ($base-point-grid * 4);
39+
@include bp(small) {
40+
margin-left: ($base-point-grid * 3.2);
41+
}
42+
}
4243
}
4344
}
4445

@@ -50,8 +51,22 @@
5051
}
5152
}
5253

54+
.nav-item-text {
55+
@include bp(small) {
56+
display: none;
57+
}
58+
}
59+
60+
.nav-item-icon {
61+
display: none;
62+
63+
@include bp(small) {
64+
display: inline-block;
65+
}
66+
}
67+
5368
&.navigation-scroll {
5469
background: darken($brand-primary, 4%);
5570
padding: ($base-point-grid * 2) ($base-point-grid * 4);
5671
}
57-
}
72+
}

‎modules/docs/arrow-docs/docs/_sass/components/_sidebar.scss

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@
66
padding: 0 ($base-point-grid * 3);
77
background: rgba($brand-tertiary, 0.4);
88
@include flexbox;
9-
@include justify-content(flex-start);
9+
@include justify-content(space-between);
1010
@include align-items(center);
1111
font-family: $brand-font-family;
1212
font-size: 1.063rem;
1313
font-weight: $font-medium;
1414
text-transform: uppercase;
1515
letter-spacing: 4px;
1616
color: $white;
17-
1817
img {
1918
margin-right: ($base-point-grid * 2);
2019
}
@@ -33,4 +32,34 @@
3332
display: flex;
3433
}
3534
}
35+
36+
.close {
37+
height: 28px;
38+
position: absolute;
39+
left: 0;
40+
top: 0;
41+
width: 28px;
42+
43+
&:before, &:after {
44+
background-color: #fff;
45+
content: ' ';
46+
height: 100%;
47+
left: 82%;
48+
position: absolute;
49+
top: 34%;
50+
width: 2px;
51+
}
52+
53+
&:before {
54+
transform: rotate(45deg);
55+
}
56+
57+
&:after {
58+
transform: rotate(-45deg);
59+
}
60+
}
61+
62+
63+
64+
3665
}

‎modules/docs/arrow-docs/docs/_sass/components/_wrapper.scss

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,87 @@
33
// -----------------------------------------------
44

55
#wrapper {
6-
padding-left: 50px;
7-
transition: all 0.5s ease;
6+
padding-left: 250px;
7+
transition: padding 0.4s ease-in-out;
8+
&.toggled {
9+
padding-left: 0;
10+
}
811
}
912

1013
#sidebar-wrapper {
11-
z-index: 1;
12-
position: fixed;
13-
left: -200px;
14-
width: 250px;
14+
background: $brand-primary;
15+
left: 0;
1516
height: 100%;
1617
overflow-y: auto;
17-
background: $brand-primary;
18-
transition: all 0.5s ease;
18+
position: fixed;
19+
transition: left 0.4s ease-in-out;
20+
width: 250px;
21+
z-index: 11;
22+
23+
.sidebar-toggle {
24+
display: none;
25+
}
1926
}
2027

2128
#wrapper.toggled {
2229
#sidebar-wrapper {
2330
left: -250px;
24-
margin-left: 250px;
2531
}
2632
}
2733

28-
#doc-wrapper {
29-
width: 100%;
30-
}
34+
.sidebar-toggle {
35+
background: none;
36+
border: none;
37+
color: $brand-tertiary;
38+
display: inline-block;
39+
padding: 24px;
40+
position: relative;
41+
text-align: center;
42+
text-decoration: none;
43+
transition: color 0.3s ease, transform 0.3s ease;
3144

45+
.menu-icon {
46+
position: absolute;
47+
top: 37%;
48+
left: 25%;
49+
}
3250

33-
@media(min-width:768px) {
34-
#wrapper {
35-
padding-left: 250px;
51+
&:hover {
52+
color: $brand-primary;
53+
cursor: pointer;
54+
transform: scaleX(1.5);
3655
}
56+
}
3757

38-
#wrapper.toggled {
39-
padding-left: 50px;
58+
@include bp(medium) {
59+
#wrapper {
60+
padding-left: 0;
61+
transition: all 0.4s ease-in-out;
4062
}
4163

4264
#sidebar-wrapper {
43-
left: 250px;
44-
margin-left: -250px;
65+
left: -100%;
66+
width: 100%;
4567
}
4668

47-
#wrapper.toggled #sidebar-wrapper {
48-
left: -200px;
49-
margin-left: 0;
50-
}
69+
#wrapper.toggled {
70+
#sidebar-wrapper {
71+
left: 0;
5172

73+
.sidebar-toggle {
74+
display: block;
75+
opacity: 0.7;
76+
transition: opacity 0.3s ease, transform 0.3s ease;
5277

53-
#wrapper.toggled #doc-wrapper {
54-
position: relative;
55-
margin-right: 50px;
78+
&:hover {
79+
opacity: 1;
80+
transform: rotate(-180deg);
81+
}
82+
}
83+
}
5684
}
5785
}
86+
87+
#doc-wrapper {
88+
width: 100%;
89+
}

‎modules/docs/arrow-docs/docs/js/functions.js

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,6 @@
3838
$("#video-panel").slideToggle("toggled");
3939
});
4040

41-
// Touch interactions on the sidebar
42-
var sidebarWrapperEl = document.getElementById('sidebar-wrapper');
43-
// create a simple instance, by default it only adds horizontal recognizers
44-
if (sidebarWrapperEl) {
45-
var sidebarWrapperTouch = new Hammer(sidebarWrapperEl);
46-
// Listen to touch events, showing on swiperight, hiding on swipeleft
47-
sidebarWrapperTouch.on("swiperight", function(ev) {
48-
ev.preventDefault()
49-
$("#wrapper").addClass("toggled");
50-
});
51-
sidebarWrapperTouch.on("swipeleft", function(ev) {
52-
ev.preventDefault()
53-
$("#wrapper").removeClass("toggled");
54-
});
55-
}
56-
5741
/**
5842
* This function generates the “unrolling” of the secction by adding
5943
* some classes to the element and applying a jQuery slide action

‎modules/docs/arrow-docs/docs/js/hammer.min.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)