github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix Legend Options and Node Map layout on mobile view (#142052)

Browse source 
* Fix Legend Options and Node Map layout on mobile view

* Fix Number of Color bar on mobile

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Carlos Crespo 2022-09-29 14:23:50 +02:00 • committed by GitHub
parent 13824dd0dd
commit 60e5e41107
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx
View file

@ -24,6 +24,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import React, { SyntheticEvent, useState, useCallback, useEffect } from 'react';
import { first, last } from 'lodash';
import { InfraWaffleMapBounds, InventoryColorPalette, PALETTES } from '../../../../../lib/lib';
@ -189,9 +190,10 @@ export const LegendControls = ({
button={buttonComponent}
anchorPosition="leftCenter"
data-test-subj="legendControls"
// panelStyle={{ width: '100%', maxWidth: 375 }}
>
<EuiPopoverTitle>Legend Options</EuiPopoverTitle>
<EuiForm style={{ minWidth: 400 }}>
<StyledEuiForm>
<EuiFormRow
display="columnCompressed"
label={i18n.translate('xpack.infra.legendControls.colorPaletteLabel', {
@ -352,7 +354,16 @@ export const LegendControls = ({
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiForm>
</StyledEuiForm>
</EuiPopover>
);
};
const StyledEuiForm = euiStyled(EuiForm)`
min-width: 400px;
@media (max-width: 480px) {
min-width: 100%;
max-width: 100%;
width: 100vw;
}
`;

1
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
View file

@ -105,6 +105,7 @@ const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeig
overflow-x: hidden;
overflow-y: auto;
margin-bottom: ${(props) => props.bottomMargin}px;
max-width: calc(100vw - 90px);
${(props) => props.staticHeight && 'min-height: 300px;'}
`;

4
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx
View file

@ -28,9 +28,9 @@ export const PalettePreview = ({ steps, palette, reverse }: Props) => {
};
const Swatch = euiStyled.div`
width: 15px;
max-width: 15px;
height: 12px;
flex: 0 0 auto;
flex: 1 1 auto;
&:first-child {
border-radius: ${(props) => props.theme.eui.euiBorderRadius} 0 0 ${(props) =>
props.theme.eui.euiBorderRadius};