search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
282 stars 77 forks source link

Enhancement: calcite-shell-panel content width #1080

Closed jcfranco closed 3 years ago

jcfranco commented 3 years ago

@rslibed commented on Fri Jan 31 2020

Description

Need to target .content in calcite-shell-panel and set width to 100%. The issue is that the container is within the shadow dom so external styles cannot be applied.

portrait

landscape

Which Component

calcite-shell-panel

Example Use Case

Configurable Apps new configuration experience will be using calcite-app-components for the UI and will need to support mobile.

The extra space on the right is reserved for an iframe on a desktop layout. On mobile, the iframe will be hidden and the content container in calcite-shell-panel will need to stretch to the right to fill up the extra space.

@driskull commented on Fri Jan 31 2020

I think we can just add some media queries to the panel to make it span 100% if below a threshold. right @asangma?

Maybe we need to start thinking about global css variables for the breakpoints though.

@asangma commented on Tue Feb 04 2020

I think we can just add some media queries to the panel to make it span 100% if below a threshold.

Definitely. Would we want to make that happen based on a prop?

@driskull commented on Tue Feb 04 2020

Would we want to make that happen based on a prop?

I don't think so. We can come up with some good breakpoint sizes and users can overwrite by changing css variables. Maybe follow bootstrap breakpoint sizes.

@driskull commented on Wed Feb 05 2020

I started a prototype for this but it would be a larger piece of work we would need to do to get all the components acting "responsively" :)

https://github.com/Esri/calcite-app-components/issues/800

I'm not sure when/if @asangma will have the bandwidth for tackling this.

For some components, it might be pretty easy but I can see the action-bar, action-pad, and some of the calcite-components like popover being a bit tricky

@driskull commented on Tue Feb 11 2020

Going to move this to backlog. We will consider mobile styles once we get mapviewer more stable.

github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 3 years ago

This issue has been automatically closed due to inactivity.