maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[6.x] [Infra UI] Work around IE11 flexbox alignment problems (#25224) (#25281)

Browse source 
Backports the following commits to 6.x:
 - [Infra UI] Work around IE11 flexbox alignment problems  (#25224)
This commit is contained in:
Felix Stürmer 2018-11-07 14:51:16 +01:00 committed by GitHub
parent 9b04e556be
commit f55b39d195
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
x-pack/plugins/infra/public/components/empty_page.tsx
View file

@ -6,6 +6,7 @@
import { EuiButton, EuiEmptyPrompt } from '@elastic/eui'; import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
import React from 'react'; import React from 'react';
import styled from 'styled-components';
interface EmptyPageProps { interface EmptyPageProps {
message: string; message: string;
@ -22,7 +23,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
title, title,
...rest ...rest
}) => ( }) => (
<EuiEmptyPrompt <CenteredEmptyPrompt
title={<h2>{title}</h2>} title={<h2>{title}</h2>}
body={<p>{message}</p>} body={<p>{message}</p>}
actions={ actions={
@ -33,3 +34,7 @@ export const EmptyPage: React.SFC<EmptyPageProps> = ({
{...rest} {...rest}
/> />
); );
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
align-self: center;
`;

6
x-pack/plugins/infra/public/components/page.tsx
View file

@ -11,16 +11,16 @@ export const ColumnarPage = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
flex: 1 0 0; flex: 1 0 0%;
`; `;
export const PageContent = styled.div` export const PageContent = styled.div`
flex: 1 0 0; flex: 1 0 0%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: ${props => props.theme.eui.euiColorEmptyShade}; background-color: ${props => props.theme.eui.euiColorEmptyShade};
`; `;
export const FlexPage = styled(EuiPage)` export const FlexPage = styled(EuiPage)`
flex: 1 0 0; flex: 1 0 0%;
`; `;

8
x-pack/plugins/infra/public/components/waffle/index.tsx
View file

@ -96,7 +96,7 @@ export class Waffle extends React.Component<Props, {}> {
return <InfraLoadingPanel height="100%" width="100%" text="Loading data" />; return <InfraLoadingPanel height="100%" width="100%" text="Loading data" />;
} else if (!loading && map && map.length === 0) { } else if (!loading && map && map.length === 0) {
return ( return (
<EuiEmptyPrompt <CenteredEmptyPrompt
title={<h2>There is no data to display.</h2>} title={<h2>There is no data to display.</h2>}
titleSize="m" titleSize="m"
body={<p>Try adjusting your time or filter.</p>} body={<p>Try adjusting your time or filter.</p>}
@ -206,7 +206,7 @@ export class Waffle extends React.Component<Props, {}> {
} }
const WaffleMapOuterContiner = styled.div` const WaffleMapOuterContiner = styled.div`
flex: 1 0 0; flex: 1 0 0%;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@ -222,3 +222,7 @@ const WaffleMapInnerContainer = styled.div`
align-content: flex-start; align-content: flex-start;
padding: 10px; padding: 10px;
`; `;
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
align-self: center;
`;

4
x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
View file

@ -117,7 +117,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
template: ` template: `
<div <div
id="${ROOT_ELEMENT_ID}" id="${ROOT_ELEMENT_ID}"
style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0; overflow: hidden;" style="display: flex; flex-direction: column; align-items: stretch; flex: 1 0 0%; overflow: hidden;"
></div> ></div>
`, `,
})); }));
@ -140,7 +140,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
uiRoutes.otherwise({ uiRoutes.otherwise({
reloadOnSearch: false, reloadOnSearch: false,
template: template:
'<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0;"></infra-ui-kibana-adapter>', '<infra-ui-kibana-adapter style="display: flex; align-items: stretch; flex: 1 0 0%;"></infra-ui-kibana-adapter>',
}); });
}; };
} }

4
x-pack/plugins/infra/public/pages/logs/page_content.tsx
View file

@ -106,14 +106,14 @@ export const LogsPageContent: React.SFC = () => (
); );
const LogPageEventStreamColumn = styled.div` const LogPageEventStreamColumn = styled.div`
flex: 1 0 0; flex: 1 0 0%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
`; `;
const LogPageMinimapColumn = styled.div` const LogPageMinimapColumn = styled.div`
flex: 1 0 0; flex: 1 0 0%;
overflow: hidden; overflow: hidden;
min-width: 100px; min-width: 100px;
max-width: 100px; max-width: 100px;

2
x-pack/plugins/infra/public/pages/metrics/index.tsx
View file

@ -222,7 +222,7 @@ const EuiSideNavContainer = styled.div`
`; `;
const MetricsDetailsPageColumn = styled.div` const MetricsDetailsPageColumn = styled.div`
flex: 1 0 0; flex: 1 0 0%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
`; `;