directus/directus

Additional Field Layout Options

benhaynes asked for this feature about 1 year ago — 4 comments

benhaynes commented about 1 year ago Admin

@laszlokorte: From a frontend layout perspective this is probably a rather big feature but it would be nice anyway:

It would be great if we could assign widths to each field of a table to achieve a multi column layout for the table's editing page. In kirby (an document based cms) this is possible for example.

The editing page: https://cloud.githubusercontent.com/assets/26493/16302801/71d2b07e-394d-11e6-97bf-94fcf1990a5e.png

could me made look more like this: https://cloud.githubusercontent.com/assets/26493/16302827/8dc58162-394d-11e6-906f-1c6832703588.png

just by assigning "width: 1/2" to the last 4 fields.

The result is a much more compact and nicer layout.

benhaynes commented about 1 year ago Admin

Thanks @laszlokorte – been thinking about this one for years! Especially useful for things like lat/lon or address inputs. I'd love to figure this out, but here are a few things we'd need to consider before moving forward with this update:

  • UIs: Which UIs can support this? All of them? They could responsively adjust to less width – but some are more conducive to the smaller horizontal space. I wonder if it's easier to only support some (eg: text inputs)
  • Design: Currently the design guarantees that the fields are fairly standardized. It's difficult to miss inputs since they are all left aligned and delineated with a HR. What happens with very different heights between adjacent UIs? Weird gaps?
  • Labels: Each field currently has a dedicated/reserved label area – this is used for field comments and bulk-edit checkboxes. Fields labels would have to be shifted to be similar to Kirby, so we'd need to rethink some things.
  • Widths: Would 50% be the only option? Would 33.3% also work?
  • Responsiveness: since all the UIs require different ideal widths, at what point (if any) do we break the side-by-side fields to become stacked?

benhaynes commented about 1 year ago Admin

@laszlokorte: UIs: which UIs would be bigger?

design: If two neighboring UIs have different heights in kirby the smaller one just has spacing below it: https://cloud.githubusercontent.com/assets/26493/16304242/d05d7b22-3954-11e6-9022-b3810f6870ae.png

I think that's fine.

Labels: I agree, that's probably one of the strongest problems

Widths: In kirby multiples of 1/2, 1/3, 1/4 or 1/5 are supported. In my opinion 1/2 and 1/3 would be enought.

Responsiveness: kirby stacks the fields if the viewport get's to narrow.

benhaynes commented about 1 year ago Admin

@laszlokorte The implementation is pretty straightforward: The field's container elements just get's a class like field-grid-item-1-3 assigned which sets it's width to 33% and css float is use to put all grid-items next to each other. If two items do not fit next to each other they will break. It just requires that the field itself adjusts to it's container size.

Join the discussion!

Sign-in with GitHub to comment