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

Minor cosmetic improvement for filter section #50

Closed m-mohr closed 4 years ago

m-mohr commented 4 years ago

The functionalities box is scrollable although there's some space left on some screens. I'd propose to change the HTML/CSS a bit to support flex box stretching:

  1. Put The checkboxes/labels for "openEO API versions" and "Billing" in a div so that it doesn't show multiple lines once flex box is active on the parent.
  2. Change CSS at section#discover-filters: display: flex; flex-direction: column
  3. For .endpointchooser.compact replace max-height: 5em; with max-height: fit-content; min-height: 3em; flex: 1.
christophfriedrich commented 4 years ago

Mainly agreed.

On screens with a lot of available height, using flex: 1 results in this:

grafik

But that can be fixed by using flex-shrink: 1 instead.

And you don't really need max-height: fit-content, do you? (BTW it's -moz-fit-content in Firefox, i.e. still experimental :confused:)

christophfriedrich commented 4 years ago

Seems like the fit-content part didn't do anything in my Firefox (because it's experimental?), but relieved the too-big-box in your Chrome.

But flex-shrink works in both, so we shall use that.