Skip to content

Commit ee72c62

Browse files
aliosoalioso
authored
Merge pull request linode#18 from linode/DLC-154
Mobile Sidebar Improvement Updates
2 parents 6c9cc28 + 25fcf51 commit ee72c62

File tree

6 files changed

+55
-58
lines changed

6 files changed

+55
-58
lines changed

‎src/components/2_molecules/search-header.js

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,7 @@ import { graphql, StaticQuery } from "gatsby";
33
import Search from "./search";
44

55
class SearchHeader extends React.Component {
6-
constructor(props) {
7-
super(props);
8-
this.state = {
9-
searchIsFixed: false
10-
};
11-
this.handleScroll = this.handleScroll.bind(this);
12-
}
13-
14-
componentDidMount() {
15-
window.addEventListener("scroll", this.handleScroll);
16-
}
17-
18-
componentWillUnmount() {
19-
window.removeEventListener("scroll", this.handleScroll);
20-
}
21-
22-
handleScroll() {
23-
if (window.innerWidth >= 640) {
24-
this.setState({ searchIsFixed: false });
25-
} else if (window.scrollY <= 30 && this.state.searchIsFixed === true) {
26-
this.setState({ searchIsFixed: false });
27-
} else if (window.scrollY > 30 && this.state.searchIsFixed !== true) {
28-
this.setState({ searchIsFixed: true });
29-
}
30-
}
31-
326
render() {
33-
const { searchIsFixed } = this.state;
34-
357
return (
368
<StaticQuery
379
query={graphql`
@@ -42,11 +14,7 @@ class SearchHeader extends React.Component {
4214
}
4315
`}
4416
render={data => (
45-
<header
46-
className={`md:mb-4 search-header ${
47-
searchIsFixed ? "search-header--fixed" : ""
48-
}`}
49-
>
17+
<header className={"md:mb-4 search-header"}>
5018
<Search searchIndex={data.siteSearchIndex.index} />
5119
</header>
5220
)}

‎src/components/2_molecules/search.js

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,11 @@ export default class Search extends Component {
3434
n.getSummary
3535
.toLowerCase()
3636
.includes(query.toLowerCase()) && (
37-
<li className="list-reset pt-1 px-2">
38-
<Link to={`/api/v4/${_.kebabCase(n.name)}`}>
37+
<li className="list-reset pt-3 md:pt-1 px-2">
38+
<Link
39+
to={`/api/v4/${_.kebabCase(n.name)}`}
40+
onClick={this.clearSearch}
41+
>
3942
{n.getSummary}
4043
</Link>
4144
</li>
@@ -44,8 +47,11 @@ export default class Search extends Component {
4447
n.postSummary
4548
.toLowerCase()
4649
.includes(query.toLowerCase()) && (
47-
<li className="list-reset pt-1 px-2">
48-
<Link to={`/api/v4/${_.kebabCase(n.name)}/#post`}>
50+
<li className="list-reset pt-3 md:pt-1 px-2">
51+
<Link
52+
to={`/api/v4/${_.kebabCase(n.name)}/#post`}
53+
onClick={this.clearSearch}
54+
>
4955
{n.postSummary}
5056
</Link>
5157
</li>
@@ -54,8 +60,11 @@ export default class Search extends Component {
5460
n.putSummary
5561
.toLowerCase()
5662
.includes(query.toLowerCase()) && (
57-
<li className="list-reset pt-1 px-2">
58-
<Link to={`/api/v4/${_.kebabCase(n.name)}/#put`}>
63+
<li className="list-reset pt-3 md:pt-1 px-2">
64+
<Link
65+
to={`/api/v4/${_.kebabCase(n.name)}/#put`}
66+
onClick={this.clearSearch}
67+
>
5968
{n.putSummary}
6069
</Link>
6170
</li>
@@ -64,8 +73,11 @@ export default class Search extends Component {
6473
n.deleteSummary
6574
.toLowerCase()
6675
.includes(query.toLowerCase()) && (
67-
<li className="list-reset pt-1 px-2">
68-
<Link to={`/api/v4/${_.kebabCase(n.name)}/#delete`}>
76+
<li className="list-reset pt-3 md:pt-1 px-2">
77+
<Link
78+
to={`/api/v4/${_.kebabCase(n.name)}/#delete`}
79+
onClick={this.clearSearch}
80+
>
6981
{n.deleteSummary}
7082
</Link>
7183
</li>
@@ -81,6 +93,12 @@ export default class Search extends Component {
8193
);
8294
}
8395

96+
clearSearch = () => {
97+
this.setState({
98+
query: ""
99+
});
100+
};
101+
84102
getOrCreateIndex = () =>
85103
this.index
86104
? this.index

‎src/components/2_molecules/sidemenu.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,11 @@ class SideMenu extends React.Component {
131131
<div className="api-navigation-wrapper md:bg-ThemeCell">
132132
<div className="api-navigation">
133133
<APITitle />
134-
<SearchHeader />
134+
<div className="hidden md:block">
135+
<SearchHeader />
136+
</div>
135137
<div>
136-
<ul className="p-0 ml-1 mb-4">
138+
<ul className="p-0 mb-4">
137139
<TopMenu />
138140
</ul>
139141
{groups.map((group, i) => {

‎src/components/5_templates/api.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import SEO from "../../components/0_utilities/seo";
1212
import Sidebar from "../../components/2_molecules/sidemenu";
1313
import ParamDisplay from "../../components/2_molecules/paramDisplay";
1414
import BodySchema from "../../components/2_molecules/BodySchema";
15+
import SearchHeader from "../2_molecules/search-header";
1516
import Security from "../../components/2_molecules/Security";
1617
import ResponseList from "../../components/2_molecules/ResponseList";
1718
import ResponseSamples from "../2_molecules/ResponseSamples";
@@ -39,6 +40,9 @@ const apiPage = ({ data }) => {
3940
>
4041
<SEO title="Linode API Documentation" description="Container Tools" />
4142
<div className="flex flex-wrap">
43+
<div className="md:hidden search-header-wrapper">
44+
<SearchHeader />
45+
</div>
4246
<div className="sidebar-container">
4347
<Sidebar />
4448
</div>
@@ -260,6 +264,7 @@ export const query = graphql`
260264
post {
261265
x_linode_grant
262266
summary
267+
tags
263268
description
264269
operationId
265270
x_linode_cli_action
@@ -343,6 +348,7 @@ export const query = graphql`
343348
put {
344349
x_linode_grant
345350
summary
351+
tags
346352
description
347353
operationId
348354
x_linode_cli_action
@@ -419,6 +425,7 @@ export const query = graphql`
419425
}
420426
}
421427
delete {
428+
tags
422429
summary
423430
description
424431
operationId

‎src/css/components/4_pages/api-page.css

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474

7575
.api-link {
7676
position: relative;
77-
left: 2px;
77+
line-height: 1.4;
7878
}
7979

8080
.top-menu-anchor {
@@ -93,9 +93,9 @@
9393
}
9494

9595
.sidemenu-button {
96-
width: calc(100% - 12px);
96+
width: 100%;
9797
padding: 6px 0;
98-
margin: 0 6px;
98+
/* margin: 0 6px; */
9999
text-align: left;
100100
display: flex;
101101
justify-content: space-between;
@@ -132,35 +132,33 @@
132132
@apply border-grey-light;
133133
}
134134

135-
.search-header {
136-
position: relative;
137-
top: 0;
138-
width: auto;
139-
transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
140-
}
141-
142-
.search-header.search-header--fixed {
143-
position: fixed;
135+
.search-header-wrapper {
136+
position: sticky;
144137
top: 65px;
145-
left: 0;
146138
width: 100%;
147139
z-index: 1;
148-
padding: 1rem;
140+
padding: 1rem 1rem 0;
149141
background-color: #fff;
150142
}
151143

152144
.search-results-list {
153145
background-color: #fff;
154146
}
155147

156-
.search-header--fixed .search-results-list {
148+
.search-header .search-results-list {
157149
max-height: 250px;
158150
height: 100%;
159151
overflow-y: scroll;
160152
box-shadow: 0px 5px 8px -2px rgba(0, 0, 0, 0.5);
161153
}
162154

163155
@screen md {
156+
.search-header .search-results-list {
157+
max-height: none;
158+
overflow-y: auto;
159+
box-shadow: none;
160+
}
161+
164162
.layout-fixed .sidebar-container {
165163
height: calc(100vh - 64px);
166164
position: fixed;

‎src/pages/api/v4.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Markdown from "react-markdown/with-html";
55

66
import Layout from "../../components/4_layouts/layout";
77
import SEO from "../../components/0_utilities/seo";
8+
import SearchHeader from "../../components/2_molecules/search-header";
89
import Sidebar from "../../components/2_molecules/sidemenu";
910

1011
const HeadingRenderer = props => {
@@ -27,6 +28,9 @@ const APIDocs = ({ data }) => {
2728
>
2829
<SEO title="API Documentation" description="" />
2930
<div className="flex flex-wrap">
31+
<div className="md:hidden search-header-wrapper">
32+
<SearchHeader />
33+
</div>
3034
<div className="sidebar-container">
3135
<Sidebar />
3236
</div>

0 commit comments

Comments
 (0)