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

Style home page header and other misc design tweaks #72481

Merged
merged 1 commit into from
Jul 20, 2020
Merged

Style home page header and other misc design tweaks #72481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 25 additions & 0 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,3 +1,28 @@
// Local page vars
$homePageHeaderHeight: $euiSize * 8;
$homePageWidth: 1200px;

.homPageHeader {
height: $homePageHeaderHeight;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it necessary to define a fixed height for the home page header here? Ideally, the height of the header would scale to its contents. If only being used to account for the min-height in .homPageContainer, perhaps we can use a flexbox solution instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is also worth tinkering with. This fixed height made it simpler, in the end, to account for some of the shaded background color that was showing at the bottom of the screen. In other words, I was able to also use this value to resolve that issue. That said, it might be the culprit that generated the bottom 'band' 🤔

margin: 0 auto;
max-width: $homePageWidth;
padding: $euiSizeXL $euiSize 0;
}

.homPageContainer {
min-height: calc(100vh - #{$homePageHeaderHeight});
background-color: $euiColorEmptyShade;
border-top: 1px solid $euiColorLightShade;
}

.homPage {
display: flex;
max-width: $homePageWidth;
margin: 0 auto;
padding: 0 $euiSize $euiSizeXL;
background-color: transparent;
}

.homHome__synopsisItem {
max-width: 50%;
}
Expand Down
103 changes: 39 additions & 64 deletions src/plugins/home/public/application/components/_solutions_panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.homSolutionsPanel {
margin-top: -$euiSizeXL*2;
margin-top: -$euiSizeXL;

.homeSolutionsPanel--restrictHalfWidth {
Comment on lines 1 to 4
Copy link
Contributor

Choose a reason for hiding this comment

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

Out of curiosity, any reason/difference between use of class prefix hom and home here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Catherine will clean this one up. hom follows the three-letter precedent used all over Kibana.

max-width: 50%;
Expand All @@ -24,97 +24,72 @@
}
}

.homSolutionsPanel__header {
border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
color: $euiColorEmptyShade;

img {
position: absolute;
width: auto;
}
}

.homSolutionsPanel__enterpriseSearch {
.homSolutionsPanel__enterpriseSearchHeader {
background-color: #017d73;
color: $euiColorEmptyShade;

.homSolutionsPanel__enterpriseSearchTopLeftImage {
.euiImage__img {
position: absolute;
top: 0;
left: 0;
margin-top: $euiSizeS;
height: $euiSizeXL;
width: auto;
}

.homSolutionsPanel__enterpriseSearchTopLeftImage img {
Copy link
Contributor

Choose a reason for hiding this comment

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

As these panel patterns/images are purely cosmetic, would it be better to use CSS background images instead?

Copy link
Contributor Author

@ryankeairns ryankeairns Jul 20, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Probably, yeah. I did a little consolidating of styles here, but the images need more attention. By re-slicing the images, we could simplify the styles further - if the padding was baked in, then we could set all the right, top, bottom, left values to 0.

top: $euiSizeS;
left: 0;
height: $euiSizeXL;
}

.homSolutionsPanel__enterpriseSearchBottomRightImage {
.euiImage__img {
position: absolute;
right: 0;
bottom: 0;
height: $euiSizeXL;
width: auto;
margin-bottom: $euiSizeS;
margin-right: $euiSizeS;
}
.homSolutionsPanel__enterpriseSearchBottomRightImage img {
right: $euiSizeS;
bottom: $euiSizeS;
height: $euiSizeXL;
}
}
}

.homSolutionsPanel__observability {
.homSolutionsPanel__observabilityHeader {
background-color: #c42373;
color: $euiColorEmptyShade;

.homSolutionsPanel__observabilityTopRightImage {
.euiImage__img {
position: absolute;
top: 0;
right: 0;
height: $euiSizeXL;
width: auto;
margin-top: $euiSizeS;
margin-right: $euiSizeS;
}

.homSolutionsPanel__observabilityTopRightImage img {
top: $euiSizeS;
right: $euiSizeS;
height: $euiSizeXL;
}
}
}

.homSolutionsPanel__securitySolution {
.homSolutionsPanel__securitySolutionHeader {
background-color: #343741;
color: $euiColorEmptyShade;

.homSolutionsPanel__securitySolutionTopLeftImage {
.euiImage__img {
position: absolute;
top: 0;
left: 0;
height: $euiSizeXXL;
width: auto;
margin-top: $euiSize;
margin-left: $euiSize;
}

.homSolutionsPanel__securitySolutionTopLeftImage img {
top: $euiSizeS;
left: $euiSizeS;
height: $euiSizeXXL;
}
}
}

.homSolutionsPanel__kibana {
.homSolutionsPanel__kibanaHeader {
background-color: #006bb4;
color: $euiColorEmptyShade;

.homSolutionsPanel__kibanaTopLeftImage {
.euiImage__img {
position: absolute;
top: 0;
left: 0;
height: $euiSizeXXL * 4;
width: auto;
}

.homSolutionsPanel__kibanaTopLeftImage img {
top: 0;
left: 0;
height: $euiSizeXXL * 4;
}

.homSolutionsPanel__kibanaBottomRightImage {
.euiImage__img {
position: absolute;
right: 0;
bottom: 0;
height: $euiSizeXXL * 4;
width: auto;
}
.homSolutionsPanel__kibanaBottomRightImage img {
right: 0;
bottom: 0;
height: $euiSizeXXL * 4;
}
}
}
Expand Down
26 changes: 16 additions & 10 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 @@ -18,7 +18,7 @@
*/

import React, { FunctionComponent } from 'react';
import { EuiButtonEmpty, EuiText } from '@elastic/eui';
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { HOME_APP_BASE_PATH } from '../../../../common/constants';
import { getServices } from '../../kibana_services';
Expand All @@ -32,20 +32,26 @@ export const ChangeHomeRoute: FunctionComponent<Props> = ({ defaultRoute }) => {
const changeDefaultRoute = () => uiSettings.set('defaultRoute', defaultRoute);

return (
<EuiText>
<p>
<FormattedMessage
id="home.changeHomeRouteText"
defaultMessage="Would you prefer to have an alternate home page for this Elastic space? "
/>
<EuiButtonEmpty iconType="home" onClick={changeDefaultRoute}>
<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>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty size="xs" iconType="home" onClick={changeDefaultRoute}>
<FormattedMessage
id="home.changeHomeRouteLink"
defaultMessage="Change your home page route"
/>
</EuiButtonEmpty>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
Comment on lines +35 to +54
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 not utilize EuiFlexGroup in this situation, as I fear it has the potential to yield an odd layout. For example, assuming we had a long string of text that breaks a line (in the first EuiFlexItem), this would cause the button (in the second EuiFlexItem) to stay positioned to the right and vertically center itself. I'm not sure that's desirable in this situation.

image

Would it be better to have the button appear inline with the paragraph text, so that if/when the line is broken, the button also moves to the second line (thus avoiding the above odd layout)?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Probably so and its worth tinkering with it. The reason I swapped it to use the flex components was to get the text and empty button to align vertically. It was visually misaligned when the button was inlined in the paragraph.

);
};

Expand Down
Loading