okfn/opendataeditor

Implement Screen 1 - Empty state

Closed this issue · 0 comments

Screen 1

This is the landing page after the user successfully launches the ODE. This is screen right after #454. This screen also exists when a user deletes all the imported/ingested files i.e the sidebar is cleared.

https://www.figma.com/design/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=4677-7300&t=l7y16LwUcZhIcckX-1

image

Key Features

  • The Main screen
  • The Sidebar

The Main screen

  1. This component hosts the drag, and drop functionality
  2. The blue text hovers from OKFN/blue/500 to OKFN/blue/600. Transition is instant. No animation.
  3. The button hovers from OKFN/Gray/900 to OKFN/blue/500. Transition is instant. No animation.

image

Screen.1.-.empty.state.-.01.mp4

The Sidebar

  1. The "Upload your data" button here is a global button.
  • Please play the prototype in Figma
Screen.3.-.sidebar.03.mp4
  • Home button interaction
    image
  1. Collapse:
  • triggered on click, this is very useful for full focus-mode on the datagrid
  • triggered when the app windows gets smaller upon resizing. Let's decide this breakpoint @pdelboca
Screen.1.-.02.-.sidebar.collapse.mp4