simple mobile question viewer (#4755)

* hide the things

* nav bar fix

* hide recents on mobile

frontend/src/metabase/components/HeaderBar.jsx

@@ -42,15 +42,15 @@ export default class Header extends Component {
         }
 
         return (
-            <div className={cx("QueryBuilder-section flex align-center", className)}>
-                <div className={cx("py1 relative flex-full", { "pt2": badge })}>
+            <div className={cx("QueryBuilder-section pt2 sm-pt0 flex align-center", className)}>
+                <div className={cx("px2 sm-px0 pt2 relative flex-full")}>
                     { badge &&
-                        <div className="absolute top left">{badge}</div>
+                        <div className="absolute top left ml2 sm-ml0">{badge}</div>
                     }
                     {titleAndDescription}
                 </div>
 
-                <div className="flex-align-right">
+                <div className="flex-align-right hide sm-show">
                     {buttons}
                 </div>
             </div>

frontend/src/metabase/home/containers/HomepageApp.jsx

@@ -94,7 +94,7 @@ export default class HomepageApp extends Component {
                           <Activity {...this.props} />
                         </div>
                     </div>
-                    <div className="Layout-sidebar flex-no-shrink">
+                    <div className="Layout-sidebar flex-no-shrink hide sm-show">
                       <NextStep />
                       <RecentViews {...this.props} />
                     </div>

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -110,13 +110,13 @@ export default class Navbar extends Component {
     renderMainNav() {
         return (
             <nav className={cx("Nav CheckBg CheckBg-offset relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
-                <ul className="pl4 pr1 flex align-center">
+                <ul className="ml2 sm-pl4 pr1 flex align-center">
                     <li>
                         <Link to="/" data-metabase-event={"Navbar;Logo"} className="NavItem cursor-pointer text-white flex align-center my1 transition-background p1">
                             <LogoIcon dark={true}></LogoIcon>
                         </Link>
                     </li>
-                    <li className="pl3">
+                    <li className="pl3 hide sm-show">
                         <DashboardsDropdown {...this.props}>
                             <a
                                 data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"}
@@ -132,17 +132,20 @@ export default class Navbar extends Component {
                             </a>
                         </DashboardsDropdown>
                     </li>
-                    <li className="pl1">
+                    <li className="pl1 hide sm-show">
                         <Link to="/questions" data-metabase-event={"Navbar;Questions"} style={this.styles.navButton} className={cx("NavItem cursor-pointer text-white text-bold no-decoration flex align-center px2 transition-background")} activeClassName="NavItem--selected">Questions</Link>
                     </li>
-                    <li className="pl1">
+                    <li className="pl1 hide sm-show">
                         <Link to="/pulse" data-metabase-event={"Navbar;Pulses"} style={this.styles.navButton} className={cx("NavItem cursor-pointer text-white text-bold no-decoration flex align-center px2 transition-background")} activeClassName="NavItem--selected">Pulses</Link>
                     </li>
-                    <li className="pl1">
+                    <li className="pl1 hide sm-show">
                         <Link to="/reference/guide" data-metabase-event={"Navbar;DataReference"} style={this.styles.navButton} className={cx("NavItem cursor-pointer text-white text-bold no-decoration flex align-center px2 transition-background")} activeClassName="NavItem--selected">Data Reference</Link>
                     </li>
-                    <li className="pl3">
-                        <Link to={Urls.question()} data-metabase-event={"Navbar;New Question"} style={this.styles.newQuestion} className="NavNewQuestion rounded inline-block bg-white text-brand text-bold cursor-pointer px2 no-decoration transition-all">New <span className="hide sm-show">Question</span></Link>
+                    <li className="pl3 hide sm-show">
+                        <Link to={Urls.question()} data-metabase-event={"Navbar;New Question"} style={this.styles.newQuestion} className="NavNewQuestion rounded inline-block bg-white text-brand text-bold cursor-pointer px2 no-decoration transition-all">
+                            New
+                            <span>Question</span>
+                        </Link>
                     </li>
                     <li className="flex-align-right transition-background">
                         <div className="inline-block text-white"><ProfileLink {...this.props}></ProfileLink></div>

frontend/src/metabase/query_builder/components/QueryVisualization.jsx

@@ -116,10 +116,10 @@ export default class QueryVisualization extends Component {
         const isEmbeddingEnabled = MetabaseSettings.get("embedding");
         return (
             <div className="relative flex align-center flex-no-shrink mt2 mb1" style={{ minHeight: "2em" }}>
-                <div className="z4 flex-full">
+                <div className="z4 flex-full hide sm-show">
                   { !isObjectDetail && <VisualizationSettings ref="settings" {...this.props} /> }
                 </div>
-                <div className="z3">
+                <div className="z3 full">
                     <Tooltip tooltip={runButtonTooltip}>
                         <RunButton
                             isRunnable={isRunnable}
@@ -151,7 +151,7 @@ export default class QueryVisualization extends Component {
                     }
                     { !isResultDirty && result && !result.error ?
                         <QueryDownloadWidget
-                            className="mx1"
+                            className="mx1 hide sm-show"
                             card={card}
                             result={result}
                         />
@@ -161,7 +161,7 @@ export default class QueryVisualization extends Component {
                         (isEmbeddingEnabled && isAdmin)
                     ) ?
                         <QuestionEmbedWidget
-                            className="mx1"
+                            className="mx1 hide sm-show"
                             card={card}
                         />
                     : null }

frontend/src/metabase/query_builder/components/RunButton.jsx

@@ -25,7 +25,7 @@ export default class RunButton extends Component {
             buttonText = <div className="flex align-center"><Icon className="mr1" name="refresh" />Refresh</div>;
         }
         let actionFn = isRunning ? onCancel : onRun;
-        let classes = cx("Button Button--medium circular RunButton", {
+        let classes = cx("Button Button--medium circular RunButton ml-auto mr-auto block", {
             "RunButton--hidden": !buttonText,
             "Button--primary": isDirty,
             "text-grey-2": !isDirty,

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -219,7 +219,7 @@ class LegacyQueryBuilder extends Component {
                         <QueryHeader {...this.props}/>
                     </div>
 
-                    <div id="react_qb_editor" className="z2">
+                    <div id="react_qb_editor" className="z2 hide sm-show">
                         { card && card.dataset_query && card.dataset_query.type === "native" ?
                             <NativeQueryEditor
                                 {...this.props}
@@ -245,7 +245,7 @@ class LegacyQueryBuilder extends Component {
                     }
                 </div>
 
-                <div className={cx("SideDrawer", { "SideDrawer--show": showDrawer })}>
+                <div className={cx("SideDrawer hide sm-show", { "SideDrawer--show": showDrawer })}>
                     { uiControls.isShowingDataReference &&
                         <DataReference {...this.props} onClose={() => this.props.toggleDataReference()} />
                     }