search

Open-EO / openeo-hub

Source code for openEO Hub, a centralized platform to explore openEO back-end providers.
https://hub.openeo.org
Apache License 2.0
8 stars 3 forks source link

Optimize space for smaller screens #51

Closed m-mohr closed 4 years ago

m-mohr commented 4 years ago

I was looking at the Hub on a smaller screen and noticed some things that could be improved:

  1. The filters take more space than they need. I think having the list/filters use 60/40% respectively would make it a bit more usable. The following settings seem to work quite well:
    • #discover-list: flex: 2 1 60%;
    • #discover-filters: flex: 1 1 40%;
    • It may make sense to add a padding between list and filters (1 or 2em?)
  2. The space on the left of the back-end list is a bit wasted. Remove the left margin/padding from the list. I think removing the padding and changing the top margin to 1.5em would be reasonable.
  3. Also, I'd reduce the spacing between the list elements a bit and maybe also remove the horizontal line.
  4. Why's there a max-width: 50em; for #discover-list>ul>li? If it's there to limit the max width of the left panel, it should (also?) be applied to the #discover-list. Or if it's to restrict the maximum width on large screens, we should maybe restrict the width of the whole content and center it, see example 2.
  5. Why's the endpoint chooser not 100% in width?

Example 1 (on small screens): image

Example 2 (big screen, max width 1200px): image

christophfriedrich commented 4 years ago
  1. The filters take more space than they need. I think having the list/filters use 60/40% respectively would make it a bit more usable. The following settings seem to work quite well:
    • #discover-list: flex: 2 1 60%;
    • #discover-filters: flex: 1 1 40%;
    • It may make sense to add a padding between list and filters (1 or 2em?)

I used your suggestions, thanks for experimenting, they seem to work quite well indeed.

Instead of adding a padding (and thus consuming even more space), I added a dotted line (like the ones between header, main, and footer). How do you like that?

grafik

  1. The space on the left of the back-end list is a bit wasted. Remove the left margin/padding from the list. I think removing the padding and changing the top margin to 1.5em would be reasonable.

Default padding for <ul>s removed for this case. What top margin?

  1. Also, I'd reduce the spacing between the list elements a bit and maybe also remove the horizontal line.

Line removed (I liked it, but not having it isn't bad either). Reduced the spacing to 30px in total (instead of 60).

  1. Why's there a max-width: 50em; for #discover-list>ul>li? If it's there to limit the max width of the left panel, it should (also?) be applied to the #discover-list. Or if it's to restrict the maximum width on large screens, we should maybe restrict the width of the whole content and center it, see example 2.

Moments like this are what I write detailed commit messages for :D Quoting the one from cbbd16b: "Prevent backend panels in discover section from spanning the whole screen - otherwise they get hard to read and the "show more" buttons are too far right". That was more than a year ago and the component's context has changed quite a bit, so that rule can be removed.

  1. Why's the endpoint chooser not 100% in width?

That was a remnant from the time when that component was also used in the Search section's Backends search form, where all inputs had width: 90% in order not to cause a horizontal scroll bar due to default paddings/margins. Since it's now obsolete, I already removed it in 417865c.

Example 2 (big screen, max width 1200px):

That doesn't look nice IMHO.

m-mohr commented 4 years ago

Okay, thanks. All changes and comments fine for me, can be closed then, I think.