Responsive Tables in TNG v11

From TNG Wiki
Jump to: navigation, search

Responsive Tables provide a means of adjusting the content and column width of tables in TNG to improve the display on small displays such as mobiles including changes between portrait and landscape mode. It needs to be turned on to be effective.

TNG V11 incorporated the Responsive Tables mod.

From the TNG V11 Change Log:

70. Responsive: The Responsive Tables mod has been integrated, making it easier to view some of TNG's larger tables on a small screen (original code by Gustav Dahl and Ken Roy).

From the TNG Blog

Mobile-Friendly: More improvements here will make your site even more usable on mobile devices.

For TNG v10.1+, you can use the Responsive Tables mod.

Introduction

The responsive tables feature in TNG v11 applies to several TNG displays using the Tablesaw jQuery plugins

This code was available as the Responsive Tables mod in TNG 10.1 through 10.1.3.

For a complete discussion on responsive tables, see the TNG Forum entry on Responsive Web Design

Setup

If you want to use the Responsive Tables in TNG V11 for the smart phones and tablets, you must go to Admin > Setup > General Settings and scroll down to the Mobile section and enable the capability. In the Responsive Tables mod the options were in the Mod Manager Edit options screen.

TNG V11 responsive tables setup.png

You can specify the Type of responsive table displays to use:

  • Toggle (default)
  • Stack
  • Swipe

Column Priorities

Table headers use a data-tablesaw-priority attribute to be eligible to toggle their display. The data-tablesaw-priority is a numeric value from 1 to 6, which determine default breakpoints at which a column will show.

The breakpoint defaults are:

Priority Toggle Breakpoint Typical Target Devices Device Orientation Widths
data-tablesaw-priority="persist" Not eligible for toggle, always shows
data-tablesaw-priority="1" Shows at (min-width: 20em) (320px) smaller smart phones in portrait orientation iPhone 3 portrait 320x480
data-tablesaw-priority="2" Shows at (min-width: 30em) (480px) smaller smart phones in landscape orientation

small tablets in portrait orientation

iPhone 3
Samsung Tab 3
Landscape
Portrait
480×320
480x680
data-tablesaw-priority="3" Shows at (min-width: 40em) (640px) newer smart phone portrait

older smart phones in landscape

iPhone 4
Samsung Tab 3
Landscape
Landscape
640x960
680x480
data-tablesaw-priority="4" Shows at (min-width: 50em) (800px) tablet portrait
data-tablesaw-priority="5" Shows at (min-width: 60em) (960px) newer smart phone landscape
data-tablesaw-priority="6" Shows at (min-width: 70em) (1120px) tablet landscape

The Responsive Tables jQuery plugins from Tablesaw are implemented for the following TNG screens:

  • Anniversaries
  • Browse Albums
  • Browse Branches
  • Browse Media
  • Browse Notes
  • Browse Repositories
  • Browse Sources
  • Browse Trees
  • Cemeteries and Headstones
  • Cemetery Map Headstones and Burials
  • Family search results
  • People search results
  • Reports
  • Statistics
  • What's New

This Google Web Master link can be used to test whether your pages are mobile friendly.


Visualization

Toggle

The following are a couple of screen captures on the Galaxy S5 smart phone for the Toggle option. Notice that only the fields that were selected to display based on the priority are displayed.

Portrait Orientation Landscape Orientation
Browse Branches in portrait orientation Browse Branches in landscape orientation

Stack

The following are a couple of screen captures on the Galaxy S5 smart phone for the Stack option. Notice that the column headings are only stacked and siplayed to the left of the data if the screen width is not wide enough to display the data.

Portrait Orientation Landscape Orientation
Browse Branches in portrait orientation Browse Branches in landscape orientation

Swipe

The following are a couple of screen captures on the Galaxy S5 smart phone for the Swipe option. Notice that if thecolumns do not all fit on the screen you need to swipe the display to veiw the columns to the right/left of what is currently displayed.

Portrait Orientation Landscape Orientation
Browse Branches in portrait orientation Browse Branches in landscape orientation


Related Links

General Information

Mobile Mode Display

Tuning for Mobile Display

Formatting Tables for Mobile Display

Incorporated in to TNG 10.1

Mobile Media - adjusts the Image display when not using the Image Viewer and adjusts the Image Preview for smart phones and tablets was incorporated into TNG v10.1

Mobile Site No Previews - eliminates Person, and Family previews for smart phones was incorporated into TNG v10.1

Mobile Site No Slideshow - suppresses the Slide Show for smart phones and tablets was incorporated into TNG v10.1

Incorporated in to TNG 11

Responsive Tables - adjusts TNG table displays based on screen widths is incorporated into TNG v11

See Table Saw jQuery Plugin for additional information

Mods that are applicable for TNG 11

Mobile Individual Page Map - adjusts the Google Event Map on smart phones and tablets

Mobile Site Enhancements - several adjustments for smart phones and tablets

Life Dates Mobile - adjusts the date displays for smart phones and tablets as an alternative to Life Dates Mod which always puts the birth and death dates on separate lines