From 155a4a8f067e36912c3eb6bc279ca58ce90a53c0 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 28 Sep 2018 14:28:39 +0100
Subject: Add sidebar menu, proper scrolling and mobile-optimize

---
 .../ts/components/documentation/docs_content_top_bar.tsx |  2 +-
 .../ts/components/documentation/tutorial_button.tsx      | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index dede6f636..1db9e794a 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -61,7 +61,7 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
             },
         ];
         return (
-            <Container height={75} className="pb2 mb3">
+            <Container height={80}>
                 <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
                     <div className="col col-2 sm-hide xs-hide">
                         <Link
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
index 0cb7d9de5..22480888e 100644
--- a/packages/website/ts/components/documentation/tutorial_button.tsx
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -40,10 +40,10 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
                         backgroundColor: this.state.isHovering ? '#e7f1fd' : colors.white,
                     }}
                 >
-                    <div>
+                    <div className="col col-1 flex items-center sm-pr3">
                         <img src={this.props.tutorialInfo.iconUrl} height={40} />
                     </div>
-                    <div className="pl2">
+                    <div className="pl2 col col-10">
                         <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
                             {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)}
                         </Text>
@@ -51,11 +51,13 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
                             {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
                         </Text>
                     </div>
-                    <div className="absolute" style={{ top: 31, right: 31 }}>
-                        <i
-                            className="zmdi zmdi-chevron-right bold"
-                            style={{ fontSize: 26, color: colors.lightLinkBlue }}
-                        />
+                    <div className="col col-1 flex items-center justify-end">
+                        <div className="right">
+                            <i
+                                className="zmdi zmdi-chevron-right bold"
+                                style={{ fontSize: 26, color: colors.lightLinkBlue }}
+                            />
+                        </div>
                     </div>
                 </div>
             </Link>
-- 
cgit v1.2.3