Settings Table Lab

The goal of this experiment is to create a settings table that displays a large number of settings while allowing sync and async users alike to create and modify them.

The Settings Table lab experiments with an HTML and mobile first take on the MODX System Settings page. The components and findings could be applied to other pages such as Context Settings or even managing User Groups.

This proof can be accessed at:
http://jpdevries.github.io/matboard/labs/settings-table/

Notice as setting rows receive focus a corresponding form appears.

Features

• Accessible
• Supports (no-js) via the asynchronous collapse pattern (initially open)
• Lightweight. Aside from jQuery this experiment is practically weightless
• Responsive
• Touch Friendly
• Keyboard Friendly

jQuery

When rows receive focus they display a corresponding form below.

$('.settings-table').each(function(){
  $(this).on( 'focusin click', 'tbody > tr:not(.contextual-setting)', function(e) {
    $(this).addClass('open').siblings('.open').removeClass('open');
  });
});

Font End Dependencies

• Modernizr
• jQuery

Design Patterns

• Async Collapse
• Focus Show
• Flexible Items

Todos

• Progressively Enhance
• remove jQuery dependency (port to VanillaJS)
• a11y audit

Notes

While jQuery is used to toggle a .open class, this affect can also be achieved solely with pure CSS3. jQuery is used for cross browser compatibility. .no-js users will be presented with all .contextual-setting forms initially expanded.

tbody {
  > tr {
    &.open + .contextual-setting, &:focus + .contextual-setting {
      display:table-row !important; /* display the setting form for open rows */
    }
  }
}

Screencast

• Accessible Settings Table

Screenshots