Design PR: layout tweaks, responsive styles (#72944)

* layout tweaks, responsive styles * address feedback, improve bg color setup * use EUI var for header height
elastic · Jul 27, 2020 · 1e1ed92 · 1e1ed92
1 parent 576e3fd
commit 1e1ed92
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 94 deletions.
diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss
@@ -1,21 +1,43 @@
 // Local page vars
-$homePageHeaderHeight: $euiSize * 8;
 $homePageWidth: 1200px;
 
+.homPageContainer {
+  display: flex;
+  height: calc(100vh - #{$euiHeaderHeightCompensation});
+  flex-direction: column;
+  background-color: $euiColorEmptyShade;
+}
+
+.homPageHeaderContainer {
+  background-color: $euiColorLightestShade;
+  border-bottom: 1px solid $euiColorLightShade;
+}
+
 .homPageHeader {
-  height: $homePageHeaderHeight;
   margin: 0 auto;
   max-width: $homePageWidth;
-  padding: $euiSizeXL $euiSize 0;
+  padding: $euiSizeXL $euiSize $euiSizeXXL;
 }
 
-.homPageContainer {
-  min-height: calc(100vh - #{$homePageHeaderHeight});
-  background-color: $euiColorEmptyShade;
-  border-top: 1px solid $euiColorLightShade;
+.homPageHeader__title {
+  @include euiBreakpoint('xs', 's') {
+    text-align: center;
+  }  
 }
 
-.homPage {
+.homPageHeader__menu {
+
+  @include euiBreakpoint('xs', 's') {
+    margin-top: 0;
+
+    .homPageHeader__menuItem {
+      margin-bottom: 0 !important;
+      margin-top: 0 !important;
+    }  
+  }
+}
+
+.homPageMain {
   max-width: $homePageWidth;
   margin: 0 auto;
   padding: 0 $euiSize $euiSizeXL;
@@ -24,10 +46,15 @@ $homePageWidth: 1200px;
 
 .homHome__synopsisItem {
   max-width: 50%;
+  min-width: $euiSizeL * 9;
+
+  @include euiBreakpoint('xs', 's') {
+    max-width: 100%;
+  }
 }
 
-@include euiBreakpoint('xs', 's', 'm') {
-  .homHome__synopsisItem {
-    flex-basis: 100% !important;
+.homPageFooter__mainAction {
+  @include euiBreakpoint('xs', 's') {
+    flex-direction: column;
   }
 }
diff --git a/src/plugins/home/public/application/components/_index.scss b/src/plugins/home/public/application/components/_index.scss
@@ -7,6 +7,7 @@
 
 @import 'add_data';
 @import 'home';
+@import 'manage_data';
 @import 'sample_data_set_cards';
 @import 'solutions_panel';
 @import 'synopsis';

diff --git a/src/plugins/home/public/application/components/_manage_data.scss b/src/plugins/home/public/application/components/_manage_data.scss
@@ -0,0 +1,9 @@
+.homManageData .homManageData__container {
+  @include euiBreakpoint('xs', 's') {
+    flex-direction: column;
+  }
+}
+
+.homManageData .euiIcon__fillSecondary {
+  fill: $euiColorDarkestShade;
+}
diff --git a/src/plugins/home/public/application/components/_solutions_panel.scss b/src/plugins/home/public/application/components/_solutions_panel.scss
@@ -3,10 +3,22 @@
   min-height: $euiSize*16;
   display: flex;
 
-  .homSolutionsPanel--restrictHalfWidth {
+  .homSolutionsPanel__column {
     max-width: 50%;
   }
 
+  @include euiBreakpoint('xs', 's') {
+    flex-direction: column;
+
+    .homSolutionsPanel__column {
+      max-width: 100%;
+    }
+  }
+
+  .homSolutionPanel__cardSecondary {
+    flex-basis: $euiSizeXL * 4;
+  }
+
   .homSolutionsPanel__solutionPanel {
     display: flex;
     align-items: stretch;
@@ -25,6 +37,11 @@
       flex-direction: column;
       justify-content: center;
       padding: $euiSize;
+
+      @include euiBreakpoint('xs', 's') {
+        height: auto;
+        text-align: center;
+      }
     }
   }
 
@@ -36,6 +53,10 @@
       position: absolute;
       width: auto;
     }
+
+    @include euiBreakpoint('xs', 's') {
+      border-radius: $euiBorderRadius $euiBorderRadius 0 0;
+    }
   }
 
   .homSolutionsPanel__enterpriseSearch {

diff --git a/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx b/src/plugins/home/public/application/components/change_home_route/change_home_route.tsx
@@ -33,26 +33,50 @@ export const ChangeHomeRoute: FunctionComponent<Props> = ({ defaultRoute }) => {
   const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute);
 
   return (
-    <EuiFlexGroup className="homPage__footer" alignItems="center" gutterSize="s">
-      <EuiFlexItem grow={false}>
-        <EuiText size="s" color="subdued">
-          <p>
-            <FormattedMessage
-              id="home.changeHomeRouteText"
-              defaultMessage="Would you prefer to have an alternate home page for this Elastic space? "
-            />
-          </p>
-        </EuiText>
+    <EuiFlexGroup
+      className="homPageFooter"
+      alignItems="center"
+      gutterSize="s"
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem grow={1}>
+        <EuiFlexGroup
+          className="homPageFooter__mainAction"
+          alignItems="center"
+          gutterSize="s"
+          responsive={false}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color="subdued">
+              <p>
+                <FormattedMessage
+                  id="home.changeHomeRouteText"
+                  defaultMessage="Would you prefer an alternate landing page? "
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="home"
+              // onClick={changeDefaultRoute}
+              onClick={createAppNavigationHandler('/app/management/kibana/settings#defaultRoute')}
+              size="xs"
+            >
+              <FormattedMessage
+                id="home.changeHomeRouteLink"
+                defaultMessage="Change the landing page for this space"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-      <EuiButtonEmpty
-          iconType="home"
-          // onClick={changeDefaultRoute}
-          onClick={createAppNavigationHandler('/app/management/kibana/settings#defaultRoute')}
-        >
+        {/* TODO: Hook up link to app directory */}
+        <EuiButtonEmpty href={''} size="xs" flush="right" iconType="apps">
           <FormattedMessage
-            id="home.changeHomeRouteLink"
-            defaultMessage="Change your home page route"
+            id="home.appDirectory.appDirectoryButtonLabel"
+            defaultMessage="View app directory"
           />
         </EuiButtonEmpty>
       </EuiFlexItem>

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
@@ -29,7 +29,6 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiScreenReaderOnly,
   EuiSpacer,
   EuiHorizontalRule,
 } from '@elastic/eui';
@@ -50,6 +49,10 @@ export class Home extends Component {
       getServices().homeConfig.disableWelcomeScreen ||
       props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
     );
+
+    const body = document.querySelector('body');
+    body.classList.add('isHomPage');
+
     this.state = {
       // If welcome is enabled, we wait for loading to complete
       // before rendering. This prevents an annoying flickering
@@ -158,16 +161,11 @@ export class Home extends Component {
     console.log({ directories });
 
     return (
-      <Fragment>
-        <header className="homPageHeader">
-          <EuiFlexGroup gutterSize="none">
-            <EuiFlexItem>
-              <EuiScreenReaderOnly>
-                <h1>
-                  <FormattedMessage id="home.welcomeHomePageHeader" defaultMessage="Kibana home" />
-                </h1>
-              </EuiScreenReaderOnly>
-              <EuiFlexGroup gutterSize="none">
+      <div className="homPageContainer">
+        <div className="homPageHeaderContainer">
+          <header className="homPageHeader">
+            <EuiFlexGroup gutterSize="none">
+              <EuiFlexItem className="homPageHeader__title">
                 <EuiTitle size="m">
                   <h1>
                     <FormattedMessage
@@ -177,60 +175,58 @@ export class Home extends Component {
                     />
                   </h1>
                 </EuiTitle>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup alignItems="flexEnd">
-                <EuiFlexItem>
-                  <EuiButtonEmpty href="#/tutorial_directory" iconType="plusInCircle">
-                    {i18n.translate('home.pageHeader.addDataButtonLabel', {
-                      defaultMessage: 'Add data',
-                    })}
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-                {stackManagement ? (
-                  <EuiFlexItem>
-                    <EuiButtonEmpty
-                      onClick={createAppNavigationHandler(stackManagement.path)}
-                      iconType="gear"
-                    >
-                      {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
-                        defaultMessage: 'Manage stack',
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup className="homPageHeader__menu" alignItems="flexEnd">
+                  <EuiFlexItem className="homPageHeader__menuItem">
+                    <EuiButtonEmpty href="#/tutorial_directory" iconType="plusInCircle">
+                      {i18n.translate('home.pageHeader.addDataButtonLabel', {
+                        defaultMessage: 'Add data',
                       })}
                     </EuiButtonEmpty>
                   </EuiFlexItem>
-                ) : null}
-                {devTools ? (
-                  <EuiFlexItem>
-                    <EuiButtonEmpty
-                      onClick={createAppNavigationHandler(devTools.path)}
-                      iconType="wrench"
-                    >
-                      {i18n.translate('home.pageHeader.devToolsButtonLabel', {
-                        defaultMessage: 'Dev tools',
+                  {stackManagement ? (
+                    <EuiFlexItem className="homPageHeader__menuItem">
+                      <EuiButtonEmpty
+                        onClick={createAppNavigationHandler(stackManagement.path)}
+                        iconType="gear"
+                      >
+                        {i18n.translate('home.pageHeader.stackManagementButtonLabel', {
+                          defaultMessage: 'Manage stack',
+                        })}
+                      </EuiButtonEmpty>
+                    </EuiFlexItem>
+                  ) : null}
+                  {devTools ? (
+                    <EuiFlexItem className="homPageHeader__menuItem">
+                      <EuiButtonEmpty
+                        onClick={createAppNavigationHandler(devTools.path)}
+                        iconType="wrench"
+                      >
+                        {i18n.translate('home.pageHeader.devToolsButtonLabel', {
+                          defaultMessage: 'Dev tools',
+                        })}
+                      </EuiButtonEmpty>
+                    </EuiFlexItem>
+                  ) : null}
+                  {/* <EuiFlexItem>
+                    <EuiButtonEmpty href="#/feature_directory" iconType="apps">
+                      {i18n.translate('home.pageHeader.appDirectoryButtonLabel', {
+                        defaultMessage: 'App directory',
                       })}
                     </EuiButtonEmpty>
-                  </EuiFlexItem>
-                ) : null}
-                {/* <EuiFlexItem>
-                  <EuiButtonEmpty href="#/feature_directory" iconType="apps">
-                    {i18n.translate('home.pageHeader.appDirectoryButtonLabel', {
-                      defaultMessage: 'App directory',
-                    })}
-                  </EuiButtonEmpty>
-                </EuiFlexItem> */}
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </header>
-        <div className="homPageContainer">
-          <main className="homPage" data-test-subj="homeApp">
+                  </EuiFlexItem> */}
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </header>
+        </div>
+        <div className="homPageMainContainer">
+          <main className="homPageMain" data-test-subj="homeApp">
             <SolutionsPanel addBasePath={addBasePath} findDirectoryById={this.findDirectoryById} />
 
-            <EuiSpacer size="s" />
-
             <div className="homAddData">
-              <EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
+              <EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline" responsive={false}>
                 <EuiFlexItem grow={1}>
                   <EuiTitle size="s">
                     <h3>
@@ -242,7 +238,12 @@ export class Home extends Component {
                 </EuiFlexItem>
                 {sampleData ? (
                   <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty iconType={sampleData.icon} href={sampleData.path} size="xs">
+                    <EuiButtonEmpty
+                      iconType={sampleData.icon}
+                      href={sampleData.path}
+                      size="xs"
+                      flush="right"
+                    >
                       <FormattedMessage
                         id="home.addData.sampleDataButtonLabel"
                         defaultMessage="Try our sample data"
@@ -277,7 +278,13 @@ export class Home extends Component {
 
                   <EuiSpacer />
 
-                  <EuiFlexGroup justifyContent="spaceAround">{manageDataFeatureCards}</EuiFlexGroup>
+                  <EuiFlexGroup
+                    className="homManageData__container"
+                    justifyContent="spaceAround"
+                    wrap
+                  >
+                    {manageDataFeatureCards}
+                  </EuiFlexGroup>
                 </div>
               </Fragment>
             ) : null}
@@ -290,7 +297,7 @@ export class Home extends Component {
             )}
           </main>
         </div>
-      </Fragment>
+      </div>
     );
   }