Fix the side nav (#437)

* Rebuild docs site page using custom classes. * Add page title.
elastic · Mar 9, 2018 · b06588a · b06588a
1 parent 330228a
commit b06588a
Show file tree

Hide file tree

Showing 48 changed files with 174 additions and 114 deletions.
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -1,3 +1,4 @@
+$guideSideNavWidth: 240px;
 $guideZLevelHighest: $euiZLevel9 + 1000;
 
 @mixin whenNarrowerThan($browserWidth) {
@@ -29,23 +30,57 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
-.guideLogo {
-  width: 40px;
-  height: 40px;
-  background: $euiColorEmptyShade;
-  border-radius: 40px;
+.guideBody {
+  background: linear-gradient(90deg, $euiColorLightestShade 50%, $euiColorEmptyShade 50%);
+}
+
+#guide {
   margin: auto;
-  border: $euiBorderThin;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
+  max-width: 1240px;
+}
+
+.guidePage {
+  padding: 0;
+}
+
+.guideSideNav {
+  width: $guideSideNavWidth;
+  position: fixed;
+  top: 0;
+  bottom: 0;
 
-  &:hover {
-    border-color: $euiColorMediumShade;
+  .guideSideNav__identity {
+    border-bottom: $euiBorderThin;
+    padding: $euiSize;
+  }
+
+  .guideSideNav__theme {
+    font-size: $euiFontSizeS;
+    color: $euiColorDarkShade;
+  }
+
+  .guideSideNav__content {
+    width: $guideSideNavWidth;
+    padding: $euiSize;
+    position: absolute;
+    bottom: 0;
+    top: 132px;
+    @include scrollbar;
+    overflow-y: auto;
   }
 }
 
+.guidePageContent {
+  flex: 1 1 auto;
+  padding: $euiSize $euiSizeXL;
+  min-height: 100vh;
+  background-color: $euiColorEmptyShade;
+  border-left: $euiBorderThin;
+  max-width: 1000px;
+  margin-left: 240px;
+}
+
+
 .guideDemo__highlightLayout {
   div {
     background: transparentize(#0096CC, .9);
@@ -117,3 +152,43 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 
 @import "guide_section/index";
 @import "guide_rule/index";
+
+@include screenXSmall {
+
+  .guideBody {
+    background: none;
+  }
+
+  .guideSideNav {
+    position: relative;
+    width: auto;
+
+    // This is a temporary hack till we fix how classes pass into form controls
+    .euiFormControlLayout, input[type=search] {
+      max-width: 100%;
+    }
+
+    .guideSideNav__content {
+      position: relative;
+      width: auto;
+      top: auto;
+      bottom: auto;
+      padding: 0;
+      overflow-y: hidden;
+    }
+
+    .guideSideNav__identity {
+      position: relative;
+      width: auto;
+    }
+
+    .guideSideNav__mobileToggle {
+      background: $euiColorPrimary;
+      color: $euiColorEmptyShade !important;
+    }
+  }
+
+  .guidePageContent {
+    margin-left: 0;
+  }
+}
diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
@@ -1,15 +1,30 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment } from 'react';
 
-export function GuidePage({ children }) {
+import {
+  EuiTitle,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export const GuidePage = ({ children, title, intro }) => {
   return (
-    <div>
+    <Fragment>
+      <div className="guideSection__text">
+        <EuiTitle size="l">
+          <h1>{title}</h1>
+        </EuiTitle>
+
+        <EuiSpacer />
+        {intro}
+      </div>
+
       {children}
-    </div>
+    </Fragment>
   );
-}
+};
 
 GuidePage.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
   title: PropTypes.string,
+  intro: PropTypes.node,
 };
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -39,6 +39,7 @@ export class GuidePageChrome extends Component {
   onSearchChange = event => {
     this.setState({
       search: event.target.value,
+      isSideNavOpenOnMobile: event.target.value !== '',
     });
   };
 
@@ -51,6 +52,11 @@ export class GuidePageChrome extends Component {
   onClickLink = id => {
     // Scroll to element.
     this.scrollTo($(`#${id}`).offset().top - 20);
+
+    this.setState({
+      search: '',
+      isSideNavOpenOnMobile: false,
+    });
   };
 
   renderIdentity() {
@@ -153,20 +159,24 @@ export class GuidePageChrome extends Component {
     }
 
     return (
-      <div>
-        {this.renderIdentity()}
-
-        <EuiSpacer size="m" />
-
-        <EuiFieldSearch
-          placeholder="Search"
-          value={this.state.search}
-          onChange={this.onSearchChange}
-        />
-
-        <EuiSpacer size="m" />
-
-        {sideNavContent}
+      <div className="guideSideNav">
+        <div className="guideSideNav__identity">
+          {this.renderIdentity()}
+
+          <EuiSpacer size="m" />
+
+          <div className="guideSideNav__search">
+            <EuiFieldSearch
+              placeholder="Search"
+              value={this.state.search}
+              onChange={this.onSearchChange}
+            />
+          </div>
+        </div>
+
+        <div className="guideSideNav__content">
+          {sideNavContent}
+        </div>
       </div>
     );
   }

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { flatten } from 'lodash';
 
@@ -135,7 +135,6 @@ export class GuideSection extends Component {
     }
 
     return [
-      <EuiSpacer size="m" key="textSpacer" />,
       <EuiText key="text">{text}</EuiText>,
     ];
   }
@@ -276,12 +275,22 @@ export class GuideSection extends Component {
   }
 
   renderChrome() {
-    return (
-      <div>
-        <div className="guideSection__text">
+    let title;
+
+    if (this.props.title) {
+      title = (
+        <Fragment>
           <EuiTitle>
             <h2>{this.props.title}</h2>
           </EuiTitle>
+          <EuiSpacer size="m" key="textSpacer" />
+        </Fragment>
+      );
+    }
+    return (
+      <div>
+        <div className="guideSection__text">
+          {title}
           {this.renderText()}
         </div>
 

diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -38,7 +38,7 @@ export class GuideThemeSelector extends Component {
         iconSide="right"
         onClick={this.onThemeButtonClick}
       >
-        Theme
+        Elastic UI <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
       </EuiButtonEmpty>
     );
 

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -197,18 +197,17 @@ const slugify = str => {
 
 const createExample = ({ title, intro, sections }) => {
   sections.forEach(section => {
-    section.id = slugify(section.title);
+    section.id = slugify(section.title || title);
   });
 
   const renderedSections = sections.map(section => createElement(GuideSection, {
-    key: section.title,
+    key: section.title || title,
     ...section
   }));
 
   const component = () => (
     <EuiErrorBoundary>
-      <GuidePage title={title}>
-        {intro}
+      <GuidePage title={title} intro={intro}>
         {renderedSections}
       </GuidePage>
     </EuiErrorBoundary>

diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
@@ -30,7 +30,7 @@ const accordionOpenHtml = renderToHtml(AccordionOpen);
 export const AccordionExample = {
   title: 'Accordion',
   sections: [{
-    title: 'Accordion (unstyled)',
+    title: 'Unstyled',
     source: [{
       type: GuideSectionTypes.JS,
       code: accordionSource,

diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
@@ -13,9 +13,6 @@ import {
   EuiErrorBoundary,
   EuiPage,
   EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiPageSideBar,
 } from '../../../src/components';
 
 import { keyCodes } from '../../../src/services';
@@ -76,24 +73,20 @@ export class AppView extends Component {
     const { navigation } = routes;
 
     return (
-      <EuiPage>
+      <EuiPage className="guidePage">
         <EuiPageBody>
           <EuiErrorBoundary>
-            <EuiPageSideBar>
-              <GuidePageChrome
-                currentRouteName={currentRoute.name}
-                onToggleTheme={toggleTheme}
-                selectedTheme={theme}
-                navigation={navigation}
-              />
-            </EuiPageSideBar>
+            <GuidePageChrome
+              currentRouteName={currentRoute.name}
+              onToggleTheme={toggleTheme}
+              selectedTheme={theme}
+              navigation={navigation}
+            />
           </EuiErrorBoundary>
 
-          <EuiPageContent>
-            <EuiPageContentBody>
-              {children}
-            </EuiPageContentBody>
-          </EuiPageContent>
+          <div className="guidePageContent">
+            {children}
+          </div>
         </EuiPageBody>
       </EuiPage>
     );

diff --git a/src-docs/src/views/avatar/avatar_example.js b/src-docs/src/views/avatar/avatar_example.js
@@ -18,7 +18,6 @@ const avatarHtml = renderToHtml(Avatar);
 export const AvatarExample = {
   title: 'Avatar',
   sections: [{
-    title: 'Avatar',
     source: [{
       type: GuideSectionTypes.JS,
       code: avatarSource,

diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -26,7 +26,6 @@ const badgeButtonHtml = renderToHtml(BadgeButton);
 export const BadgeExample = {
   title: 'Badge',
   sections: [{
-    title: 'Badge',
     source: [{
       type: GuideSectionTypes.JS,
       code: badgeSource,

diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js
@@ -18,7 +18,6 @@ const bottomBarHtml = renderToHtml(BottomBar);
 export const BottomBarExample = {
   title: 'Bottom Bar',
   sections: [{
-    title: 'BottomBar',
     source: [{
       type: GuideSectionTypes.JS,
       code: bottomBarSource,

diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
@@ -48,7 +48,6 @@ const buttonLoadingHtml = renderToHtml(ButtonLoading);
 export const ButtonExample = {
   title: 'Button',
   sections: [{
-    title: 'Button',
     source: [{
       type: GuideSectionTypes.JS,
       code: buttonSource,

diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
@@ -22,7 +22,7 @@ const codeBlockHtml = renderToHtml(CodeBlock);
 export const CodeExample = {
   title: 'Code',
   sections: [{
-    title: 'Code',
+    title: 'Inline',
     source: [{
       type: GuideSectionTypes.JS,
       code: codeSource,

diff --git a/src-docs/src/views/code_editor/code_editor_example.js b/src-docs/src/views/code_editor/code_editor_example.js
@@ -22,7 +22,6 @@ const readOnlyrHtml = renderToHtml(ReadOnly);
 export const CodeEditorExample = {
   title: 'Code Editor',
   sections: [{
-    title: 'Code Editor',
     source: [{
       type: GuideSectionTypes.JS,
       code: codeEditorSource,