Increased the width of main-panel in notebook viewer #787
Conversation
|
|
|
Integration tests report: appsharing.space |
Gauss-Taylor-Euler
force-pushed
the
panel_notebook_width
branch
from
4c1cb84 to
face7a1
Compare
|
@Gauss-Taylor-Euler I sent you an invite to the org which should grant you triage role, granting the permissions to edit labels on PRs. @martinRenou should we grant greater access than this? |
mfisher87
changed the title
| }); | ||
|
|
||
| resizeObserver.observe(el); | ||
| } |
There was a problem hiding this comment.
Looks great! But is there any way this can be done with CSS only?
There was a problem hiding this comment.
One of the problem is that we are constrained by the parent (main-panel ) and only in recent version of css can we select the parent with a specific child (with :has so that it won't affect other plugin } but this is not availlable on firefox for now .I tried other workaround , this is the least ugly way I found to do it , maybe there is a better way.
There was a problem hiding this comment.
It looks like :has is supported in modern versions of FireFox -- caniuse gives it a "baseline" rating.
I think #main-panel > #child-id selector would also work? I'm sure I'm missing something though :)
There was a problem hiding this comment.
The thing is another plugin , is setting constraint on #main-panel (~1200px) those constraint are passed down to our components .We need to change #main-panel because if we don't our elements will be limited by its width so modifying , main-panel children only won't work. Another problem is that we don't want to do it in all cases for instance when a notebook is run the default is good so simply modifying #main-panel won't work.Another problem and this is why there is a resize observer , is that the plugin do it multiple times, and because we do it programatically after the plugin we also need to modify other element than just #main-panel.
There was a problem hiding this comment.
Ah, gotcha. We need to change the parent IFF it contains our component. Thanks for explaining!
There was a problem hiding this comment.
I was also surprised it wasn't possible with CSS only, I briefly tried this:
#main-panel:has(.jGIS-toolbar-widget) {
max-width: 100% !important;
width: 100% !important;
left: 0px !important;
}Seems to work fine until you resize the page dynamically, then the map doesn't take the right space, so using the resize observer may be the only way indeed.
mfisher87
changed the title
Thank you ! I don't really know what do you mean by the org ? I don't see any notifications , Is it normal ? |
|
The GeoJupyter GitHub org! You should have a notification email about the invite, but if not, check here: https://github.com/settings/organizations or here: https://github.com/orgs/geojupyter/invitation |
Ah okay, I see , thank you, I joined. |
Co-authored-by: martinRenou <[email protected]>
Increased the width of main-panel(#761)
Addressing #761 .
mainpanelwidthdemo.mp4
Checklist
Resolves #XXX.