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

[Uptime] Improve responsiveness details page (#67034)

Browse source
This commit is contained in:
Shahzad 2020-05-20 22:15:36 +02:00 committed by GitHub
parent bc261436d5
commit 6d5e53859d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
View file

@ -33,7 +33,7 @@ export const MonitorDurationComponent = ({
}: DurationChartProps) => {
return (
<EuiPanel paddingSize="m">
<EuiFlexGroup>
<EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
<EuiFlexItem>
<EuiTitle size="xs">
<h4>

50
x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap generated
View file

@ -533,35 +533,55 @@ exports[`MonitorList component renders loading state 1`] = `
`;
exports[`MonitorList component renders the monitor list 1`] = `
.c2 {
.c3 {
padding-left: 17px;
}
.c4 {
.c5 {
padding-top: 12px;
}
.c0 {
.c1 {
margin-left: auto;
}
.c3 {
.c4 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width:574px) {
.c1 {
.c2 {
min-width: 230px;
}
}
@media only screen and (max-width:768px) {
.c0.c0 > :first-child {
-webkit-flex-basis: 40% !important;
-ms-flex-preferred-size: 40% !important;
flex-basis: 40% !important;
}
.c0.c0 > :nth-child(2) {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.c0.c0 > :nth-child(3) {
-webkit-flex-basis: 60% !important;
-ms-flex-preferred-size: 60% !important;
flex-basis: 60% !important;
}
}
<div
class="euiPanel euiPanel--paddingMedium"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive c0"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
@ -649,7 +669,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiFlexItem"
>
<h5
class="euiTitle euiTitle--xsmall c0"
class="euiTitle euiTitle--xsmall c1"
>
<a
data-test-subj="uptimeCertificatesLink"
@ -803,7 +823,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1"
@ -830,7 +850,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
</div>
</div>
<span
class="c2"
class="c3"
>
<span
class="euiToolTipAnchor"
@ -895,7 +915,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<button
class="euiLink euiLink--text c3"
class="euiLink euiLink--text c4"
type="button"
>
@ -980,7 +1000,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
>
<div
class="euiFlexItem euiFlexItem--flexGrow1"
@ -1007,7 +1027,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
</div>
</div>
<span
class="c2"
class="c3"
>
<span
class="euiToolTipAnchor"
@ -1072,7 +1092,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<button
class="euiLink euiLink--text c3"
class="euiLink euiLink--text c4"
type="button"
>
@ -1195,7 +1215,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
>
<button
aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
class="euiButtonIcon euiButtonIcon--text c4"
class="euiButtonIcon euiButtonIcon--text c5"
data-test-subj="xpack.uptime.monitorList.prevButton"
disabled=""
type="button"
@ -1212,7 +1232,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
>
<button
aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
class="euiButtonIcon euiButtonIcon--text c4"
class="euiButtonIcon euiButtonIcon--text c5"
data-test-subj="xpack.uptime.monitorList.nextButton"
disabled=""
type="button"

20
x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
View file

@ -16,9 +16,25 @@ const TitleStyle = styled(EuiTitle)`
margin-left: auto;
`;
const FlexGroupContainer = styled(EuiFlexGroup)`
&& {
@media only screen and (max-width: 768px) {
> :first-child {
flex-basis: 40% !important;
}
> :nth-child(2) {
order: 3;
}
> :nth-child(3) {
flex-basis: 60% !important;
}
}
}
`;
export const MonitorListHeader: React.FC = () => {
return (
<EuiFlexGroup alignItems="center">
<FlexGroupContainer alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="xs">
<h5>
@ -44,6 +60,6 @@ export const MonitorListHeader: React.FC = () => {
</h5>
</TitleStyle>
</EuiFlexItem>
</EuiFlexGroup>
</FlexGroupContainer>
);
};