diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss index e588edfe35240..655c4742bcf5a 100644 --- a/src/plugins/home/public/application/components/_add_data.scss +++ b/src/plugins/home/public/application/components/_add_data.scss @@ -17,6 +17,17 @@ * under the License. */ +.homDataAdd__actions { + // Prevent children from rendering as flex items + display: block; + + // Accounting for no `flush="both"` prop on EuiButtonEmpty + .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; + } +} + .homDataAdd__content .euiIcon__fillSecondary { fill: $euiColorDarkestShade; } diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index d9b7602971e8d..0cbb08c43d11c 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -42,17 +42,10 @@ $homePageWidth: 1200px; } } -#homHeader__title { - @include euiBreakpoint('xs', 's') { - text-align: center; - } -} - -.homHeader__actionItem { - @include euiBreakpoint('xs', 's') { - margin-bottom: 0 !important; - margin-top: 0 !important; - } +// Accounting for no `flush="both"` prop on EuiButtonEmpty +.homHeader__actionItem .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; } .homContent { @@ -71,3 +64,16 @@ $homePageWidth: 1200px; margin-top: 0 !important; } } + +.homFooter { + // Prevent children from rendering as flex items + .euiFlexItem { + display: block; + } + + // Accounting for no `flush="both"` prop on EuiButtonEmpty + .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; + } +} diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index be693707e06b4..e80f817308b3e 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -30,10 +30,12 @@ } .homSolutions__group { - max-width: 50%; + @include euiBreakpoint('l') { + max-width: calc(75% - #{$euiSizeM * 2}); + } - @include euiBreakpoint('xs', 's') { - max-width: none; + @include euiBreakpoint('xl') { + max-width: calc(50% - #{$euiSizeM * 2}); } } diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx index 82f0020b1b389..7b6156e5d8510 100644 --- a/src/plugins/home/public/application/components/add_data/add_data.tsx +++ b/src/plugins/home/public/application/components/add_data/add_data.tsx @@ -34,7 +34,7 @@ interface Props { export const AddData: FC = ({ addBasePath, features }) => (
- +

@@ -43,13 +43,8 @@ export const AddData: FC = ({ addBasePath, features }) => ( - - + +

- +

- - + + {i18n.translate('home.pageHeader.addDataButtonLabel', { defaultMessage: 'Add data', @@ -163,10 +163,10 @@ export class Home extends Component { {stackManagement ? ( - + {i18n.translate('home.pageHeader.stackManagementButtonLabel', { defaultMessage: 'Manage', @@ -176,10 +176,10 @@ export class Home extends Component { ) : null} {devTools ? ( - + {i18n.translate('home.pageHeader.devToolsButtonLabel', { defaultMessage: 'Dev tools', @@ -226,7 +226,7 @@ export class Home extends Component { size="xs" > @@ -238,11 +238,10 @@ export class Home extends Component { data-test-subj="allPlugins" href="#/feature_directory" size="xs" - flush="right" iconType="apps" > diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx index 1a78a6c71030a..7d77788d48ece 100644 --- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx @@ -49,14 +49,12 @@ export const SolutionsSection: FC = ({ addBasePath, solutions }) => { <>
- -

- -

- +

+ +

diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index e694eb8e2397b..aef641603b1af 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/src/plugins/kibana_overview/public/components/_overview.scss @@ -20,50 +20,82 @@ // Local page variables $pageWidth: 1200px; -.kibanaOverviewWrapper { +.kbnOverviewWrapper { background-color: $euiColorEmptyShade; display: flex; flex-direction: column; min-height: calc(100vh - #{$euiHeaderHeightCompensation}); } -.kibanaOverviewHeader { +.kbnOverviewHeader { background-color: $euiPageBackgroundColor; border-bottom: $euiBorderWidthThin solid $euiColorLightShade; } -.kibanaOverviewHeader__inner { +.kbnOverviewHeader__inner { margin: 0 auto; max-width: $pageWidth; padding: $euiSizeXL $euiSize; } -#kibanaOverviewHeader__title { - @include euiBreakpoint('xs', 's') { - text-align: center; - } +// Accounting for no `flush="both"` prop on EuiButtonEmpty +.kbnOverviewHeader__actionItem .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; } -.kibanaOverviewHeader__actionItem { - @include euiBreakpoint('xs', 's') { - margin-bottom: 0 !important; - margin-top: 0 !important; - } -} - -.kibanaOverviewContent { +.kbnOverviewContent { margin: 0 auto; max-width: $pageWidth; padding: $euiSizeXL $euiSize; width: 100%; } -.kibanaOverviewData--expanded { - flex-direction: column; +// Prevent children from rendering as flex items +.kbnOverviewGettingStarted__content { + display: block; +} + +.kbnOverviewGettingStarted__apps .euiIcon__fillSecondary { + fill: $euiColorDarkestShade; +} + +.kbnOverviewApps__item { + .kbnOverviewApps__group--primary & { + @include euiBreakpoint('m', 'l', 'xl') { + max-width: calc(50% - #{$euiSizeM * 2}); + } + } + + .kbnOverviewApps__group--secondary & { + @include euiBreakpoint('m', 'l', 'xl') { + max-width: calc(25% - #{$euiSizeM * 2}); + } + } +} + +.kbnOverviewNews__content article { + & + article { + margin-top: $euiSizeL; + } &, - & > * { - margin-bottom: 0 !important; - margin-top: 0 !important; + header { + & > * + * { + margin-top: $euiSizeXS; + } + } +} + +.kbnOverviewFooter { + // Prevent children from rendering as flex items + .euiFlexItem { + display: block; + } + + // Accounting for no `flush="both"` prop on EuiButtonEmpty + .euiButtonEmpty__content { + padding-left: 0; + padding-right: 0; } } diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx index e4997b0e6b6f5..7814c30b010a8 100644 --- a/src/plugins/kibana_overview/public/components/overview/overview.tsx +++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx @@ -16,26 +16,27 @@ * specific language governing permissions and limitations * under the License. */ + import React, { FC, useState, useEffect } from 'react'; import { Observable } from 'rxjs'; import { - EuiTitle, + EuiButton, + EuiButtonEmpty, + EuiCard, + EuiFlexGrid, EuiFlexGroup, EuiFlexItem, - EuiImage, - EuiText, - EuiFlexGrid, - EuiCard, - EuiButton, - EuiIcon, - EuiSpacer, EuiHorizontalRule, - EuiScreenReaderOnly, - EuiButtonEmpty, + EuiIcon, + EuiImage, EuiLink, + EuiScreenReaderOnly, + EuiSpacer, + EuiText, + EuiTitle, } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import { createAppNavigationHandler } from '../../app_navigation_handler'; import { getServices } from '../../kibana_services'; import { PageHeader } from '../page_header'; @@ -43,7 +44,7 @@ import { PageHeader } from '../page_header'; const apps = { dashboard: { title: 'Dashboard', - description: i18n.translate('home.kibana.featureCatalogueDescription1', { + description: i18n.translate('kibana.overview.apps.featureCatalogueDescription1', { defaultMessage: 'Analyze data in dashboards.', }), icon: 'dashboardApp', @@ -51,15 +52,15 @@ const apps = { }, discover: { title: 'Discover', - description: i18n.translate('home.kibana.featureCatalogueDescription2', { + description: i18n.translate('kibana.overview.apps.featureCatalogueDescription2', { defaultMessage: 'Search and find insights.', }), - icon: 'discoverApp', + icon: 'search', path: '/app/discover', }, canvas: { title: 'Canvas', - description: i18n.translate('home.kibana.featureCatalogueDescription3', { + description: i18n.translate('kibana.overview.apps.featureCatalogueDescription3', { defaultMessage: 'Design pixel-perfect reports.', }), icon: 'canvasApp', @@ -67,7 +68,7 @@ const apps = { }, maps: { title: 'Maps', - description: i18n.translate('home.kibana.featureCatalogueDescription4', { + description: i18n.translate('kibana.overview.apps.featureCatalogueDescription4', { defaultMessage: 'Plot geographic data.', }), icon: 'gisApp', @@ -75,15 +76,15 @@ const apps = { }, ml: { title: 'Machine Learning', - description: i18n.translate('home.kibana.featureCatalogueDescription5', { + description: i18n.translate('kibana.overview.apps.featureCatalogueDescription5', { defaultMessage: 'Model, predict, and detect.', }), - icon: 'machineLearningApp', + icon: 'compute', path: '/app/ml', }, graph: { title: 'Graph', - description: i18n.translate('home.kibana.featureCatalogueDescription6', { + description: i18n.translate('kibana.overview.apps.featureCatalogueDescription6', { defaultMessage: 'Reveal patterns and relationships.', }), icon: 'graphApp', @@ -95,19 +96,6 @@ interface Props { newsfeed$: Observable; } -const addSpacersBetweenElementsReducer = ( - acc: JSX.Element[], - element: JSX.Element, - index: number, - elements: JSX.Element[] -) => { - acc.push(element); - if (index < elements.length - 1) { - acc.push(); - } - return acc; -}; - export const Overview: FC = ({ newsfeed$ }) => { const [isNewKibanaInstance, setNewKibanaInstance] = useState(false); const [newsFetchResult, setNewsFetchResult] = useState(null); @@ -142,13 +130,16 @@ export const Overview: FC = ({ newsfeed$ }) => { : '/plugins/home/assets/kibana_montage_light_2x.png'; return ( -
- - +
+ + -

+

@@ -159,42 +150,50 @@ export const Overview: FC = ({ newsfeed$ }) => {

- + - - {Object.values(apps).map(({ title, description, icon }) => ( + + {Object.values(apps).map(({ description, icon, title }) => ( } + description={description} display="plain" + icon={} + layout="horizontal" + paddingSize="none" title={title} - description={description} + titleElement="h3" + titleSize="xs" /> ))} + + + - - + + +
@@ -202,34 +201,47 @@ export const Overview: FC = ({ newsfeed$ }) => { }; const renderFeedItem = ({ title, description, link, publishOn }) => ( -
- - {title} - - -

{publishOn.format('MMM DD, YYYY')}

- +
+
+ +

+ + {title} + +

+ + + +

+ +

+ +
+

{description}

 -
+ ); const renderAppCard = (appId: string) => { const app = apps[appId]; + return ( - + ); @@ -241,53 +253,64 @@ export const Overview: FC = ({ newsfeed$ }) => { return ( <> -
+
- -

- -

- +

+ +

- {mainApps.map(renderAppCard)} + + + {mainApps.map(renderAppCard)} + + - {otherApps.map(renderAppCard)} + + + {otherApps.map(renderAppCard)} +
-