Skip to content

Commit

Permalink
Fixes mobile layout (opensearch-project#5195)
Browse files Browse the repository at this point in the history
Signed-off-by: Ashwin P Chandran <[email protected]>
(cherry picked from commit 0ffd2ab)
  • Loading branch information
ashwin-pc authored and AMoo-Miki committed Oct 4, 2023
1 parent 4a71389 commit fb19243
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 12 deletions.
3 changes: 2 additions & 1 deletion packages/osd-stylelint-config/config/global_selectors.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
"src/plugins/vis_builder/public/application/components/searchable_dropdown.scss",
"src/plugins/vis_builder/public/application/components/side_nav.scss",
"packages/osd-ui-framework/src/components/button/button_group/_button_group.scss",
"src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss"
"src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss",
"src/plugins/discover/public/application/view_components/canvas/discover_canvas.scss"
]
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
"font-family": {
"explanation": "All \"font-family\" styles should be inherited from OUI themes and components. Remove the rule.",
"approved": [
"src/plugins/discover_legacy/public/application/_discover.scss",
"src/plugins/maps_legacy/public/map/_leaflet_overrides.scss",
"src/plugins/maps_legacy/public/map/_legend.scss",
"src/plugins/opensearch_dashboards_legacy/public/font_awesome/font_awesome.scss",
Expand All @@ -12,8 +11,7 @@
"src/plugins/data/public/ui/typeahead/_suggestion.scss",
"src/plugins/vis_type_timeseries/public/application/components/_error.scss",
"packages/osd-ui-framework/src/components/form/check_box/_check_box.scss",
"src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss",
"src/plugins/discover_legacy/public/application/components/doc_viewer/doc_viewer.scss"
"src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss"
]
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
.deSidebar {
max-width: 462px;
min-width: 400px;

@include ouiBreakpoint("xs", "s", "m") {
max-width: initial;
width: 100%;
}
}

.deLayout {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@
max-width: 300px;
}

.dscSidebarField__actionButton {
opacity: 0;
transition: opacity $ouiAnimSpeedExtraFast;
.dscSidebarField {
&__actionButton {
opacity: 0;
transition: opacity $euiAnimSpeedFast;

&:hover,
&:focus {
opacity: 1;
@include ouiBreakpoint("xs", "s", "m") {
opacity: 1;
}
}

@include ouiBreakpoint("xs", "s", "m") {
&:hover &__actionButton,
&:focus &__actionButton {
opacity: 1;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export const DiscoverField = ({
}

return (
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} className="dscSidebarField">
<EuiFlexItem grow={false}>
<FieldIcon
type={field.type}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.dscSideBarFieldListHeader {
padding-left: $euiSizeS;
}

.dscSidebar__item:hover,
.dscSidebar__item:focus {
background-color: tintOrShade($euiColorPrimary, 90%, 90%);
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,36 @@
.dscCanvas {
@include euiYScrollWithShadows;

/* stylelint-disable-next-line */
container-type: inline-size; // containment context
/* stylelint-disable-next-line */
container-name: canvas;
height: 100%;
}

// TopNav styles for the Discover
/* stylelint-disable-next-line */
@container canvas (max-width: 900px) {
.globalQueryBar {
.osdQueryBar--withDatePicker {
flex-wrap: wrap;

& > .euiFlexItem {
width: 100% !important;

&:first-child {
order: 1;
}
}

.osdQueryBar__datePickerWrapper {
max-width: initial;
width: 100%;

.euiSuperDatePicker__flexWrapper {
width: auto;
}
}
}
}
}

0 comments on commit fb19243

Please sign in to comment.