search

DigitalCommons / mykomap

A web application for mapping initiatives in the Solidarity Economy
3 stars 0 forks source link

Reduce width of panel for very narrow screens #85

Closed ColmMassey closed 3 years ago

ColmMassey commented 3 years ago

For very narrow screen, like some iphones, the blue tab is half obscured. We need to detect this and reduce the width of the panel by just enough for the full tab to be seen.

If this triggers some formatting issues within the panel, look at shifting the icons at the top of the panel to align from the top left and move the blue tab to sit withing the top right hand corner of the panel.

ColmMassey commented 3 years ago

What minimum aspect ration should we target? 21:9? I got that from very quick search. Images below use that ratio with new and old panel size. Looks like we could increase the panel width a little, but we need to look at justification and font size for the domain urls. Can we left justify the urls and drop the font a single size? We probalby should also wrap the urls too, for when they are still too long.

ColmMassey commented 3 years ago

On Iphones, I note that the panel icon justification behaviour is different when the search arrows are in view. It seems that the left arrow is left justified and the right is right justified. I also notice the panels overflowing into the map when the max icon were present, i.e when showDatasetsPanel= True

ColmMassey commented 3 years ago

Another consequence of url overspill... Untitled

wu-lee commented 3 years ago

What minimum aspect ration should we target?

Currently the design uses px (pixel) dimensions a lot, which isn't very responsive, and I'm not sure it respects display aspects either (remember the problems with the iframe). There is a bit of responsive design however - in that it switches behaviour depending on the display width.

I sheepishly confess to reverting @King-Mob's size reduction when I redeployed after your post last night, in favour of a max-width setting, which means the sidebar only shrinks if it can't fit on the screen (plus the closer button - which doesn't have a defined size but I fudged as being 50 pixels, possibly this should have been rems). See 05d9d29984551b75f895d82462da548d5a585966

See what you think guys, but I think this gets us the best of both worlds?

wu-lee commented 3 years ago

Another consequence of url overspill...

I hope this is the same thing as the overspill bug John fixed yesterday (and I committed). There's a panel with initiative info as present in the map pop-up. This is shown on small displays (because the sidebar obscures the map), but hidden off the left of the screen in large displays. Long lines were overflowing off in the latter case. I guess these were not showing up until we narrowed the sidebar?

ColmMassey commented 3 years ago

Can we left justify the urls and drop the font a single size?

King-Mob commented 3 years ago

I can take decreasing the font size. As I recall the URLs are list items, so they have a bullet point that pushes them further to the right. I think the list is already justified left, but I can check.