search

Language-Mapping / language-map

Front-end codebase for Language Mapping web map
https://languagemap.nyc
MIT License
7 stars 4 forks source link

iPad Portrait: max width for search bars #226

Closed rperlin-ela closed 3 years ago

rperlin-ela commented 3 years ago

Sorry I lost track of iPad for a bit— I'm guessing this got out of whack when we added the search bar? It looks good and desktop-like on Landscape, but Portrait is doing the mobile thing and putting the panels at the bottom, but not in a good way: search bars and legend extra long on Home, top of the table squished on Data. Hope we can make iPad Portrait go desktop-style.

abettermap commented 3 years ago

@rperlin-ela

Was this not the case always, or it something I broke in this scope? If not then I won't be addressing it in this go-around. Unless you're on one of those monster iPad Pros, the mobile layout is correct. The sidebar is too wide (400-500ish px) to comfortably fit the map alongside it. Granted I have an old iPad Air 2 that's 768px wide or so, but the mobile layout looks fine on there in portrait. Even if you're on a wider device, the sidebar would take up the left half of the screen in portrait mode, leaving only a narrow strip of map left.

If you can upload a screenshot and let me know what device you're on, and whether or not it's a new thing you're experiencing with the recent changes, we'll go from there.

rperlin-ela commented 3 years ago

Will send screenshots separately. Don’t think I have anything to go back to, but I had been checking iPad pretty consistently until SOW 3, and I’m sorry I didn’t check as much across SOW 3. The super long search bars in the panel and sprawling legend are the things that I’m noticing

On Apr 5, 2021, at 10:02 PM, Jason Lampel @.***> wrote:

@rperlin-ela

Was this not the case always, or it something I broke in this scope? If not then I won't be addressing it in this go-around. Unless you're on one of those monster iPad Pros, the mobile layout is correct. The sidebar is too wide (400-500ish px) to comfortably fit the map alongside it. Granted I have an old iPad Air 2 that's 768px wide or so, but the mobile layout looks fine on there in portrait. Even if you're on a wider device, the sidebar would take up the left half of the screen in portrait mode, leaving only a narrow strip of map left.

If you can upload a screenshot and let me know what device you're on, and whether or not it's a new thing you're experiencing with the recent changes, we'll go from there.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

rperlin-ela commented 3 years ago

… and didn’t remember top-line stuff in Data being pushed together

On Apr 5, 2021, at 10:18 PM, Ross Perlin @.***> wrote:

Will send screenshots separately. Don’t think I have anything to go back to, but I had been checking iPad pretty consistently until SOW 3, and I’m sorry I didn’t check as much across SOW 3. The super long search bars in the panel and sprawling legend are the things that I’m noticing

On Apr 5, 2021, at 10:02 PM, Jason Lampel @.***> wrote:

@rperlin-ela https://github.com/rperlin-ela Was this not the case always, or it something I broke in this scope? If not then I won't be addressing it in this go-around. Unless you're on one of those monster iPad Pros, the mobile layout is correct. The sidebar is too wide (400-500ish px) to comfortably fit the map alongside it. Granted I have an old iPad Air 2 that's 768px wide or so, but the mobile layout looks fine on there in portrait. Even if you're on a wider device, the sidebar would take up the left half of the screen in portrait mode, leaving only a narrow strip of map left.

If you can upload a screenshot and let me know what device you're on, and whether or not it's a new thing you're experiencing with the recent changes, we'll go from there.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/226#issuecomment-813768572, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5EGFB4YZAGN3J5XBFTTHJTVFANCNFSM42FG3I5Q.

abettermap commented 3 years ago

I've been neglecting tablets too. Those 'tweeners are a far less common screen size and they tend to slip through the cracks, Both of those screenshots are how they've always been though.

There's already 4 breakpoints in the layout, and I agree that things could be improved in iPad portrait, but the 50/50 strip of map to the side would not be a good approach. And the insane amount of overrides I've got going to make the top section of the table look so-so on a range from iPhone SE to large monitors is pretty heavy.

If you want me to set a max width on the search bar though, that's fair since it's a new addition, and I'll make sure it doesn't get wider than 500ish on any screen size.

rperlin-ela commented 3 years ago

Cool, ok, do what’s doable!

On Apr 5, 2021, at 10:44 PM, Jason Lampel @.***> wrote:

I've been neglecting tablets too. Those 'tweeners are a far less common screen size and they tend to slip through the cracks, Both of those screenshots are how they've always been though.

There's already 4 breakpoints in the layout, and I agree that things could be improved in iPad portrait, but the 50/50 strip of map to the side would not be a good approach. And the insane amount of overrides I've got going to make the top section of the table look so-so on a range from iPhone SE to large monitors is pretty heavy.

If you want me to set a max width on the search bar though, that's fair since it's a new addition, and I'll make sure it doesn't get wider than 500ish on any screen size.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/226#issuecomment-813781821, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5DEVW2IRITNRZG63FLTHJYRJANCNFSM42FG3I5Q.

abettermap commented 3 years ago

Also for the table top part, the margins and padding to make it fit would have to be pretty nickel and dimed to squeeze it in on one line, and it would basically involve creating a custom breakpoint just for the sake of fitting on one line. And with the recent requests for more stuff up top, forget it. Not gonna fit, so wrapping seemed like an easy and clean concession.

Fun suggestion: "Add to Home Screen" on your phone and tablet. Feels like a true app!

rperlin-ela commented 3 years ago

Sorry, two more questions on this, which you can check on one of the screenshots I sent: -the placement of the mapbox logo and the © Mapbox etc bit, which cover part of the top green bar -the bottom panel icon bar being wider than the rest of the panel in my screenshot

abettermap commented 3 years ago

first one i'll fix. second one ain't hurtin' nobody and i think it's always been like that. any variation of #212 would fix both though, as well as #246 and possibly #139 and possibly #138