Amara styleguide

List View

List View is a generic way to display items in a tabular layout.

List View items have:

  • Associated actions that get hidden until the user hovers the row.
  • A checkbox column that can get hooked up to an action bar
  • Extra information that gets show when you expand the item. Click anywhere on a row to expand it. Don't forget to include the `expandable` class if your rows have extra information.

Keyboard Controls

  • Up/Down -- navigate the list
  • Space -- toggle the checkbox
  • Enter -- Activate the right-most action (usually a context menu)
  • Ctrl-a -- Select all checkboxes

Responsive Design and mobile

As the browser width shrinks, we hide columns so the listView will fit. In the example below, we hide everything except the title/language columns.

On mobile devices, you use a long press to bring up the context menu.

A varient of List View is the always-expanded version. Here the secondary info is shown by default, without having to expand it.

Title
Language
quo reprehenderit numquam nisi
Some extra info
English
Some extra info
consectetur deserunt eius saepe
Some extra info
French
Some extra info
fugiat inventore hic earum
Some extra info
Spanish
Some extra info
debitis minus aut dicta
Some extra info
Japanese
Some extra info
pariatur dolorem ex nihil
Some extra info
English
Some extra info
accusamus incidunt libero est
Some extra info
French
Some extra info
dicta mollitia molestiae officiis
Some extra info
Spanish
Some extra info
numquam tempora quibusdam autem
Some extra info
Japanese
Some extra info
rem incidunt vel aspernatur
Some extra info
English
Some extra info
voluptate deserunt natus veritatis
Some extra info
French
Some extra info