Merge pull request linode#10 from linode/DLC-146

DLC-146 Mobile updates to API docs Gatsby (WIP)

Author: Alban

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

@@ -2,21 +2,57 @@ import React from "react";
 import { graphql, StaticQuery } from "gatsby";
 import Search from "./search";
 
-const SearchHeader = () => (
-  <StaticQuery
-    query={graphql`
-      query SearchIndexQuery {
-        siteSearchIndex {
-          index
-        }
-      }
-    `}
-    render={data => (
-      <header className="md:mb-4">
-        <Search searchIndex={data.siteSearchIndex.index} />
-      </header>
-    )}
-  />
-);
+class SearchHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchIsFixed: false
+    };
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener("scroll", this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("scroll", this.handleScroll);
+  }
+
+  handleScroll() {
+    if (window.innerWidth >= 640) {
+      this.setState({ searchIsFixed: false });
+    } else if (window.scrollY <= 30 && this.state.searchIsFixed === true) {
+      this.setState({ searchIsFixed: false });
+    } else if (window.scrollY > 30 && this.state.searchIsFixed !== true) {
+      this.setState({ searchIsFixed: true });
+    }
+  }
+
+  render() {
+    const { searchIsFixed } = this.state;
+
+    return (
+      <StaticQuery
+        query={graphql`
+          query SearchIndexQuery {
+            siteSearchIndex {
+              index
+            }
+          }
+        `}
+        render={data => (
+          <header
+            className={`md:mb-4 search-header ${
+              searchIsFixed ? "search-header--fixed" : ""
+            }`}
+          >
+            <Search searchIndex={data.siteSearchIndex.index} />
+          </header>
+        )}
+      />
+    );
+  }
+}
 
 export default SearchHeader;

src/components/2_molecules/search.js

@@ -23,30 +23,30 @@ export default class Search extends Component {
           onChange={this.search}
           placeholder="Search"
         />
-        <ul className="p-0">
+        <ul className="p-0 search-results-list">
           {this.state.results.map((n, i) => {
             const { query } = this.state;
             return (
-              <div key={i}>
+              <React.Fragment key={i}>
                 {n.getSummary &&
                   n.getSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}`}>
                         {n.getSummary}
                       </Link>
                     </li>
                   )}
                 {n.postSummary &&
                   n.postSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#post`}>
                         {n.postSummary}
                       </Link>
                     </li>
                   )}
                 {n.putSummary &&
                   n.putSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#put`}>
                         {n.putSummary}
                       </Link>
@@ -56,13 +56,13 @@ export default class Search extends Component {
                   n.deleteSummary
                     .toLowerCase()
                     .includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#delete`}>
                         {n.deleteSummary}
                       </Link>
                     </li>
                   )}
-              </div>
+              </React.Fragment>
             );
           })}
           {this.state.query && this.state.results.length === 0 && (

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

@@ -105,6 +105,34 @@
   @apply border-grey-light;
 }
 
+.search-header {
+  position: relative;
+  top: 0;
+  width: auto;
+  transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.search-header.search-header--fixed {
+  position: fixed;
+  top: 65px;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  padding: 1rem;
+  background-color: #fff;
+}
+
+.search-results-list {
+  background-color: #fff;
+}
+
+.search-header--fixed .search-results-list {
+  max-height: 250px;
+  height: 100%;
+  overflow-y: scroll;
+  box-shadow: 0px 5px 8px -2px rgba(0, 0, 0, 0.5);
+}
+
 @screen md {
   .api-content-wrapper {
     margin-left: 300px;
@@ -133,4 +161,9 @@
     width: 300px;
     padding: 2rem;
   }
+
+  .search-results-list {
+    box-shadow: none;
+    background-color: none;
+  }
 }

tailwind.js

@@ -6,6 +6,7 @@ config.colors["ThemeTagGrey"] = "#e1e8eC";
 config.colors["ThemeTagGreyLight"] = "#fbfbfb";
 config.colors["BaseGreenLight"] = "#f1f9f5";
 config.colors["BaseRedLight"] = "#fdF1ef";
+config.colors["white"] = "#fff";
 
 config.borderWidths["5"] = "5px";