From 38b43f5fb2b8eaeb94f312569175502bab268a13 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Wed, 30 Sep 2020 10:48:55 -0400 Subject: [PATCH 01/12] fix overview cards not stretching height equally --- .../kibana_overview/public/components/_overview.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index d403eff8d219f..3c3bf81166118 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/src/plugins/kibana_overview/public/components/_overview.scss @@ -49,6 +49,13 @@ $pageWidth: 1200px; max-width: $pageWidth; padding: $euiSizeXL $euiSize; width: 100%; + + // Ensure card heights are stretched equally when wrapped with this element + .kbnRedirectCrossAppLinks { + display: flex; + flex: 1; + flex-direction: column; + } } // Prevent children from rendering as flex items From 7489769f89a813a212c0594225e5a785906a57c5 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Wed, 30 Sep 2020 10:55:18 -0400 Subject: [PATCH 02/12] change var name for better specificity --- .../kibana_overview/public/components/_overview.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index 3c3bf81166118..911a0346e2824 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/src/plugins/kibana_overview/public/components/_overview.scss @@ -18,7 +18,7 @@ */ // Local page variables -$pageWidth: 1200px; +$kbnOverviewPageWidth: 1200px; .kbnOverviewWrapper { background-color: $euiColorEmptyShade; @@ -34,7 +34,7 @@ $pageWidth: 1200px; .kbnOverviewHeader__inner { margin: 0 auto; - max-width: $pageWidth; + max-width: $kbnOverviewPageWidth; padding: $euiSizeXL $euiSize; } @@ -46,7 +46,7 @@ $pageWidth: 1200px; .kbnOverviewContent { margin: 0 auto; - max-width: $pageWidth; + max-width: $kbnOverviewPageWidth; padding: $euiSizeXL $euiSize; width: 100%; From aa154882bd626cbccb7cc965632e5f01b64bd963 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Wed, 30 Sep 2020 13:43:48 -0400 Subject: [PATCH 03/12] switch from display: block to adding wrapping div --- .../application/components/_add_data.scss | 3 - .../public/application/components/_home.scss | 5 -- .../components/add_data/add_data.tsx | 14 +-- .../public/components/_overview.scss | 11 +-- .../public/components/add_data/add_data.tsx | 14 +-- .../getting_started/getting_started.tsx | 88 ++++++++++--------- 6 files changed, 62 insertions(+), 73 deletions(-) diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss index 655c4742bcf5a..8a04706628616 100644 --- a/src/plugins/home/public/application/components/_add_data.scss +++ b/src/plugins/home/public/application/components/_add_data.scss @@ -18,9 +18,6 @@ */ .homDataAdd__actions { - // Prevent children from rendering as flex items - display: block; - // Accounting for no `flush="both"` prop on EuiButtonEmpty .euiButtonEmpty__content { padding-left: 0; diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index bab34a7b08946..831b36ddddc60 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -66,11 +66,6 @@ $homePageWidth: 1200px; } .homFooter { - // Prevent children from rendering as flex items - .euiFlexItem { - display: block; - } - // Accounting for no `flush="both"` prop on EuiButtonEmpty .euiButtonEmpty__content { padding-left: 0; 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 7b6156e5d8510..0daece3cac441 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 @@ -44,12 +44,14 @@ export const AddData: FC = ({ addBasePath, features }) => ( - - - +
+ + + +
diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index 911a0346e2824..75aaa57197cc1 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/src/plugins/kibana_overview/public/components/_overview.scss @@ -53,16 +53,10 @@ $kbnOverviewPageWidth: 1200px; // Ensure card heights are stretched equally when wrapped with this element .kbnRedirectCrossAppLinks { display: flex; - flex: 1; - flex-direction: column; + height: 100%; } } -// Prevent children from rendering as flex items -.kbnOverviewGettingStarted__content { - display: block; -} - .kbnOverviewGettingStarted__apps .euiIcon__fillSecondary { fill: $euiColorDarkestShade; } @@ -137,9 +131,6 @@ $kbnOverviewPageWidth: 1200px; } .kbnOverviewDataAdd__actions { - // Prevent children from rendering as flex items - display: block; - // Accounting for no `flush="both"` prop on EuiButtonEmpty .euiButtonEmpty__content { padding-left: 0; diff --git a/src/plugins/kibana_overview/public/components/add_data/add_data.tsx b/src/plugins/kibana_overview/public/components/add_data/add_data.tsx index 2d1e6a466327b..195ec3c9903ac 100644 --- a/src/plugins/kibana_overview/public/components/add_data/add_data.tsx +++ b/src/plugins/kibana_overview/public/components/add_data/add_data.tsx @@ -51,12 +51,14 @@ export const AddData: FC = ({ features }) => { - - - +
+ + + +
diff --git a/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx b/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx index ddf46d5c5529b..9df036cdb78c3 100644 --- a/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx +++ b/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx @@ -57,55 +57,57 @@ export const GettingStarted: FC = ({ addBasePath, isDarkTheme, apps }) => > - -

- -

- +
+ +

+ +

+ - + - -

- -

- + +

+ +

+ - + - - {apps.map(({ subtitle = '', icon, title }) => ( - - } - layout="horizontal" - paddingSize="none" - title={title} - titleElement="h3" - titleSize="xs" - /> - - ))} - + + {apps.map(({ subtitle = '', icon, title }) => ( + + } + layout="horizontal" + paddingSize="none" + title={title} + titleElement="h3" + titleSize="xs" + /> + + ))} + - + - - - - - + + + + + +
From f5f0bb0d8f6365baed2b0566215e68952b8353cd Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Wed, 30 Sep 2020 14:41:57 -0400 Subject: [PATCH 04/12] replace eui prefixed class selectors; use flush --- .../application/components/_add_data.scss | 9 ++-- .../public/application/components/_home.scss | 28 ++++--------- .../components/_solutions_section.scss | 18 ++++---- .../components/add_data/add_data.tsx | 8 +++- .../solutions_section/solution_panel.tsx | 2 +- .../solutions_section/solution_title.tsx | 2 +- .../public/components/_overview.scss | 14 +++---- .../public/components/add_data/add_data.tsx | 8 +++- .../overview_footer/_overview_footer.scss | 31 +++++++++----- .../overview_footer/overview_footer.tsx | 41 +++++++++++-------- .../overview_header/overview_header.tsx | 21 ++++++++-- 11 files changed, 104 insertions(+), 78 deletions(-) diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss index 8a04706628616..8de24570cae16 100644 --- a/src/plugins/home/public/application/components/_add_data.scss +++ b/src/plugins/home/public/application/components/_add_data.scss @@ -17,12 +17,9 @@ * under the License. */ -.homDataAdd__actions { - // Accounting for no `flush="both"` prop on EuiButtonEmpty - .euiButtonEmpty__content { - padding-left: 0; - padding-right: 0; - } +// Accounting for no `flush="both"` prop on EuiButtonEmpty +.homDataAdd__actionButton { + margin-right: 0; } .homDataAdd__content .euiIcon__fillSecondary { diff --git a/src/plugins/home/public/application/components/_home.scss b/src/plugins/home/public/application/components/_home.scss index 831b36ddddc60..f06d283ce39cf 100644 --- a/src/plugins/home/public/application/components/_home.scss +++ b/src/plugins/home/public/application/components/_home.scss @@ -30,21 +30,15 @@ $homePageWidth: 1200px; .homHeader { background-color: $euiPageBackgroundColor; border-bottom: $euiBorderWidthThin solid $euiColorLightShade; +} - .homHeader__inner { - margin: 0 auto; - max-width: $homePageWidth; - padding: $euiSizeXL $euiSize; - - .homHeader--hasSolutions & { - padding-bottom: $euiSizeXL + $euiSizeL; - } - } +.homHeader__inner { + margin: 0 auto; + max-width: $homePageWidth; + padding: $euiSizeXL $euiSize; - // Accounting for no `flush="both"` prop on EuiButtonEmpty - .homHeader__actionItem .euiButtonEmpty__content { - padding-left: 0; - padding-right: 0; + .homHeader--hasSolutions & { + padding-bottom: $euiSizeXL + $euiSizeL; } } @@ -64,11 +58,3 @@ $homePageWidth: 1200px; margin-top: 0 !important; } } - -.homFooter { - // 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 e80f817308b3e..53c5678ff0b09 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -50,20 +50,20 @@ @include euiSlightShadowHover; transform: translateY(-2px); - .euiTitle { + .homSolutionPanel__title { text-decoration: underline; } } +} - &, - .euiPanel { - display: flex; - flex-direction: column; - } +.homSolutionPanel, +.homSolutionPanel__inner { + display: flex; + flex-direction: column; +} - .euiPanel { - overflow: hidden; - } +.homSolutionPanel__inner { + overflow: hidden; } .homSolutionPanel__header { 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 0daece3cac441..0311c1fc5e5c6 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 @@ -45,7 +45,13 @@ export const AddData: FC = ({ addBasePath, features }) => (
- + = ({ addBasePath, solution, apps = [] }) = href={addBasePath(solution.path)} onClick={createAppNavigationHandler(solution.path)} > - + = ({ title, subtitle, iconType }) => ( className="homSolutionPanel__icon" /> - +

{title}

 diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss index 75aaa57197cc1..597856705b2e6 100644 --- a/src/plugins/kibana_overview/public/components/_overview.scss +++ b/src/plugins/kibana_overview/public/components/_overview.scss @@ -39,9 +39,8 @@ $kbnOverviewPageWidth: 1200px; } // Accounting for no `flush="both"` prop on EuiButtonEmpty -.kbnOverviewHeader__actionItem .euiButtonEmpty__content { - padding-left: 0; - padding-right: 0; +.kbnOverviewHeader__actionButton { + margin-right: 0; } .kbnOverviewContent { @@ -130,12 +129,9 @@ $kbnOverviewPageWidth: 1200px; } } -.kbnOverviewDataAdd__actions { - // Accounting for no `flush="both"` prop on EuiButtonEmpty - .euiButtonEmpty__content { - padding-left: 0; - padding-right: 0; - } +// Accounting for no `flush="both"` prop on EuiButtonEmpty +.kbnOverviewDataAdd__actionButton { + margin-right: 0; } .kbnOverviewDataAdd__content, diff --git a/src/plugins/kibana_overview/public/components/add_data/add_data.tsx b/src/plugins/kibana_overview/public/components/add_data/add_data.tsx index 195ec3c9903ac..69026d72f5ed6 100644 --- a/src/plugins/kibana_overview/public/components/add_data/add_data.tsx +++ b/src/plugins/kibana_overview/public/components/add_data/add_data.tsx @@ -52,7 +52,13 @@ export const AddData: FC = ({ features }) => {
- + = ({ path }) => { defaultRoute === path ? ( = ({ path }) => { ) : ( { setDefaultRoute(path); @@ -82,25 +86,30 @@ export const OverviewFooter: FC = ({ path }) => { ); return ( -