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
perspiciatis ad necessitatibus modi
Some extra info
English
Some extra info
ab fugiat molestias rem
Some extra info
French
Some extra info
soluta aperiam natus minus
Some extra info
Spanish
Some extra info
quis itaque ducimus suscipit
Some extra info
Japanese
Some extra info
atque recusandae sed magnam
Some extra info
English
Some extra info
rem cum consequuntur hic
Some extra info
French
Some extra info
quam illum labore voluptates
Some extra info
Spanish
Some extra info
dignissimos delectus corporis ratione
Some extra info
Japanese
Some extra info
reiciendis exercitationem accusantium libero
Some extra info
English
Some extra info
tenetur cum eius harum
Some extra info
French
Some extra info