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
optio deleniti quo fugit
Some extra info
English
Some extra info
dolore nisi quibusdam asperiores
Some extra info
French
Some extra info
et quasi at eligendi
Some extra info
Spanish
Some extra info
optio enim quas ullam
Some extra info
Japanese
Some extra info
accusantium consectetur vero voluptas
Some extra info
English
Some extra info
nemo possimus modi repellat
Some extra info
French
Some extra info
est laboriosam modi iure
Some extra info
Spanish
Some extra info
possimus quia eius id
Some extra info
Japanese
Some extra info
veniam enim rem maiores
Some extra info
English
Some extra info
ratione eligendi a esse
Some extra info
French
Some extra info