From 59705844c3740b57cab1b1bb9b5b686ad982fa00 Mon Sep 17 00:00:00 2001 From: John Hauck Date: Fri, 19 Jan 2024 12:34:14 -0700 Subject: [PATCH] fix layout issue --- .../crowdsource-manager.css | 4 ++ .../crowdsource-manager.tsx | 19 +++--- src/components/info-card/info-card.css | 8 +-- src/components/info-card/info-card.tsx | 60 +++++++++++-------- 4 files changed, 56 insertions(+), 35 deletions(-) diff --git a/src/components/crowdsource-manager/crowdsource-manager.css b/src/components/crowdsource-manager/crowdsource-manager.css index 6cf1f04ad..6e56ede9f 100644 --- a/src/components/crowdsource-manager/crowdsource-manager.css +++ b/src/components/crowdsource-manager/crowdsource-manager.css @@ -178,3 +178,7 @@ .position-fixed { position: fixed; } + +.border-width-0 { + border-width: 0px; +} diff --git a/src/components/crowdsource-manager/crowdsource-manager.tsx b/src/components/crowdsource-manager/crowdsource-manager.tsx index 29f47da4b..cdf1a077e 100644 --- a/src/components/crowdsource-manager/crowdsource-manager.tsx +++ b/src/components/crowdsource-manager/crowdsource-manager.tsx @@ -471,11 +471,12 @@ export class CrowdsourceManager { * Renders the component. */ render() { + const borderClass = this._isMobile && this._hideTable ? "border-width-0" : ""; return ( {this._getBody(this._layoutMode, this._panelOpen, this._hideTable)} @@ -575,18 +576,20 @@ export class CrowdsourceManager { * * @param layoutMode ELayoutMode the current layout mode * @param panelOpen boolean indicates if all panels are open + * @param hideTable boolean when true the layer table is hidden * * @returns the css selectors * @protected */ protected _getMapSizeClass( layoutMode: ELayoutMode, - panelOpen: boolean + panelOpen: boolean, + hideTable: boolean ): string { let sizeClass = ""; switch (layoutMode) { case ELayoutMode.HORIZONTAL: - sizeClass = `${panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`; + sizeClass = `${panelOpen && !hideTable ? "height-1-2 display-grid" : panelOpen && hideTable ? "height-full" : "height-0"} width-full position-relative`; break; case ELayoutMode.GRID: sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`; @@ -644,7 +647,7 @@ export class CrowdsourceManager { return (
- {this._getMapAndCard(layoutMode, panelOpen)} + {this._getMapAndCard(layoutMode, panelOpen, hideTable)} {this._getTable(layoutMode, panelOpen, hideTable)}
@@ -656,15 +659,17 @@ export class CrowdsourceManager { * * @param layoutMode ELayoutMode the current layout mode * @param panelOpen boolean indicates if all panels are open + * @param hideTable boolean when true the layer table is hidden * * @returns the map node * @protected */ protected _getMapAndCard( layoutMode: ELayoutMode, - panelOpen: boolean + panelOpen: boolean, + hideTable: boolean ): VNode { - const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen); + const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable); return (
{this._getMapNode(layoutMode, panelOpen)} @@ -731,7 +736,7 @@ export class CrowdsourceManager { const popupNodeClass = !this._expandPopup ? "height-full" : this.mapInfos?.length === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50"; const headerClass = this._isMobile ? "display-none height-0" : ""; const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light"; - const containerClass = this._isMobile && this._hideTable ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : ""; + const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : ""; return (
diff --git a/src/components/info-card/info-card.css b/src/components/info-card/info-card.css index c99ae779b..a989b9925 100644 --- a/src/components/info-card/info-card.css +++ b/src/components/info-card/info-card.css @@ -75,10 +75,6 @@ height: 40px; } -.padding-top-46 { - padding-top: 46px; -} - .end-border { border-inline-end: 1px solid var(--calcite-color-border-1); } @@ -95,3 +91,7 @@ .padding-inline-start-1 { padding-inline-start: 1rem; } + +.border-width-0 { + border-width: 0px; +} diff --git a/src/components/info-card/info-card.tsx b/src/components/info-card/info-card.tsx index 2676e9ad8..c1b8d3f6a 100644 --- a/src/components/info-card/info-card.tsx +++ b/src/components/info-card/info-card.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Component, Element, Event, EventEmitter, Host, h, Listen, Method, Prop, State, Watch } from "@stencil/core"; +import { Component, Element, Event, EventEmitter, Host, h, Listen, Method, Prop, State, VNode, Watch } from "@stencil/core"; import InfoCard_T9n from "../../assets/t9n/info-card/resources.json"; import { getLocaleComponentStrings } from "../../utils/locale"; import { loadModules } from "../../utils/loadModules"; @@ -281,33 +281,13 @@ export class InfoCard { const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : ""; const nextBackDisabled = this._features?.features?.length < 2; const nextBackClass = this.isMobile ? "display-none" : ""; - const shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : ""; const id = this._features?.selectedFeature?.getObjectId(); const ids = parseInt(id?.toString(), 10) > -1 ? [id] : []; const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete; return ( - {this.isMobile && !this._editRecordOpen ? ( - - this._closePopup()} - scale="s" - slot="header-actions-start" - text="" - /> - - {this._mobileTitle} - - - ) : undefined - } - + + {this._getHeader()} { @@ -506,6 +486,38 @@ export class InfoCard { }) : Promise.resolve(); } + /** + * Get the mobile header + * + * @returns the header node to display when in mobile mode + * + * @protected + */ + protected _getHeader(): VNode { + return this.isMobile && !this._editRecordOpen ? ( + + this._closePopup()} + scale="s" + slot="header-actions-start" + text="" + /> + + {this._mobileTitle} + + + ) : undefined; + } + /** * Close the popup and emit the selected features */