Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Design PR: layout tweaks, responsive styles #72944

Merged
merged 3 commits into from
Jul 27, 2020
Merged

Design PR: layout tweaks, responsive styles #72944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0059f80
layout tweaks, responsive styles
ryankeairns Jul 22, 2020
a8459f0
address feedback, improve bg color setup
ryankeairns Jul 27, 2020
97cf47d
use EUI var for header height
ryankeairns Jul 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 38 additions & 11 deletions src/plugins/home/public/application/components/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if it would be better to set the padding to $euiSizeXL $euiSize by default, and then if the below solutions container is rendered/visible, then a modifier class is added to apply additional bottom padding (to account for the overlap of those solution cards).

Also, I imagine we probably want to have some top padding always applied to the .homPage element, to ensure that page contents are properly spaced from the header when the solution cards aren't present.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic for checking solutions exists a layer deeper than the home page, so that presents a challenge. As a simple alternative, I've changed the solutions component (that contains said logic) to output a larger spacer when no solutions exist. This results in the following layout:

Screenshot 2020-07-27 10 18 22

The extra padding in the header remains, but it feels less noticeable (to me) with the 'add data' panel pushing down from the header a bit. I think this gets us by for now given this feels like an edge case scenario.

}

.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;
Expand All @@ -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;
}
}
1 change: 1 addition & 0 deletions src/plugins/home/public/application/components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

@import 'add_data';
@import 'home';
@import 'manage_data';
@import 'sample_data_set_cards';
@import 'solutions_panel';
@import 'synopsis';
Expand Down
9 changes: 9 additions & 0 deletions src/plugins/home/public/application/components/_manage_data.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.homManageData .homManageData__container {
@include euiBreakpoint('xs', 's') {
flex-direction: column;
}
}

.homManageData .euiIcon__fillSecondary {
fill: $euiColorDarkestShade;
}
23 changes: 22 additions & 1 deletion src/plugins/home/public/application/components/_solutions_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,22 @@
min-height: $euiSize*16;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since my mistake of assuming there was a 32px gutter option for EuiFlexGroup, can we change this margin-top property to offset the cards -24px over the header after the gutters are reverted back to 24px? That way the offset/overlap matches the gutter spacing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Due to the margin being applied by the EuiFlex items, the euiSizeXL effectively results in a -24px overlap.

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;
Expand All @@ -25,6 +37,11 @@
flex-direction: column;
justify-content: center;
padding: $euiSize;

@include euiBreakpoint('xs', 's') {
ryankeairns marked this conversation as resolved.
Show resolved Hide resolved
height: auto;
text-align: center;
}
}
}

Expand All @@ -36,6 +53,10 @@
position: absolute;
width: auto;
}

@include euiBreakpoint('xs', 's') {
border-radius: $euiBorderRadius $euiBorderRadius 0 0;
}
}

.homSolutionsPanel__enterpriseSearch {
Expand Down
58 changes: 41 additions & 17 deletions src/plugins/home/public/application/components/change_home_route/change_home_route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
127 changes: 67 additions & 60 deletions src/plugins/home/public/application/components/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import {
EuiTitle,
EuiFlexGroup,
EuiFlexItem,
EuiScreenReaderOnly,
EuiSpacer,
EuiHorizontalRule,
} from '@elastic/eui';
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -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"
Expand Down Expand Up @@ -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}
Expand All @@ -290,7 +297,7 @@ export class Home extends Component {
)}
</main>
</div>
</Fragment>
</div>
);
}

Expand Down
Loading