Web: Split file list metadata horizontally instead of stacking

[tomneedham]

Steps to reproduce

1. Open files app in phoenix
2. Observe list of files and folders.

Expected behaviour

• Aasy to spot file based on name (this is why you are here, to locate a file)
• Can spot lasted activity, or particular sized file

Actual behaviour

• Metadata for files are stacked on top of each other, essentially in one column
• This makes it hard to scan with your eyes for a particular results
  
  
  
  • See native file browsers -> separate columns
  
  
  • See other cloud browsers -> separate columns
  
  

• Also allows sorting by column.

• Column show/hide is another discussion IMO.

Example of stacked (now):

Example of horiztonal (desire, cleaner, easier to find files, more consistent):

[michaelstingl]

Mobile optimised view could have multi-line layout, similar to native mobile apps. (depending on available space)

[DeepDiver1975]

They have been stacked because of in case the sidebar is open the space is better used.

I'm far from happy with the current side bar behavior - this needs UX input ....

[tomneedham]

Would rather design a file list that works, than change that, because of another component... :P Seems a bit strange. We can do better! Maybe side bar slides in, and all columns apart from name are hidden

[DeepDiver1975]

Absolutely agree. We can do better and we will so better!

[tomneedham]

Done with ui kit stuff recently