Responsive Tables

From TNG_Wiki
Jump to: navigation, search
Obsolete The Responsive Tables mods are obsolete with TNG 11. The functionality was added to TNG V11, see Responsive Tables in TNG v11.


This mod only applies to TNG v10.1 through TNG V10.1.3. You may also want to install the following mods

for a complete tablet and smart phone display solution. See Tuning for Mobile Display


Responsive Tables
Summary provides enhancements to TNG when in mobile or tablet mode
Validation
Mod Updated {{{mod_last_update}}}
Download link for
TNG 10.1.1
responsive_tables_showmap_v10.1.1.2a.zip
or responsive_tables_showmap_burial_v10.1.1.2.zip
responsive_tables_search_v10.1.1.1.zip
or responsive_tables_search_treeid_v10.1.1.3.zip
other Responsive Tables mods are the same as for TNG 10.1
for
TNG 10.1.0
responsive_tables_v10.1.0.2a.zip
responsive_tables_browsesource_v10.1.0.2b.zip
responsive_tables_showmap_v10.1.0.2a.zip
See Mods that conflict for alternatives for the browse source and showmap mods
responsive_tables_search_v10.1.0.2a.zip
Download stats View download statistics
Author(s) Ken Roy
Homepage Responsive Tables (This page)
Mod Support TNG Community Forums
Contact Developer
Latest Mod 10.1.0.2a for TNG V10.1.0 and up
Min TNG V 10.1.0
Max TNG V 10.1.2
Files modified
See Impacted Files section
Related Mods
Notes
See mods that conflict with this mod for alternate versions of mods for Browse Source, Cemeteries Showmap, and several other mods


Introduction

This mod provides responsive tables to several TNG displays using the Tablesaw jQuery plugins

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

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
  • Reports
  • Statistics
  • What's New

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

Mod Developer

This mod was developed by Gustave Dahl and packaged with help from Ken Roy.

Thanks to Graham Chamberlain, Del Groves, Bryan Larson, Roger Moffat, Robin Richmond, and Rudi Schmit for testing and feedback

Thanks to David A Jamieson and Colin Spencer for their help with css media queries

Revision History

v10.1.1.1 20 July 2015 Updated the following mods for TNG 10.1.1
  • Responsive Tables-2 - Search
  • Responsive Tables-2 - Search Tree ID (updated on 5 August)
v10.1.0.2b 15 June 2015 Updated the following mods to fix the display of a comment provided by Bill Herndon
  • Responsive Tables-2 - Browse Sources
v10.1.0.2a
v10.1.1.2a
13 June 2015 Updated the following mods to fix the html for <thread><tr> provided by Martin Pannier
  • Responsive Tables-2 - Browse Sources
  • Responsive Tables-2 - Showmap
v10.1.0.2a 6 May 2015 Updated the Responsive Tables - Tree ID mod to remove the updates to the search.php and famsearch.php scripts and created two versions of the Responsive Tables - Search mod:
  • Responsive Tables - Search if using only one tree
  • Responsive Tables - Search Tree ID if using multiple trees and the Responsive Tables - Tree ID mod
v10.1.0.2a 26 April 2015 Updated to fix the thumbnail width calculation in genlib.php so that thumbnails will display using the following widths:
  • 100px for standard mode
  • 80px for tablet mode
  • 60px for mobile mode (smart phones)
v10.1.0.2 22 April 2015 initial release

See Responsive Tables beta for changes made during beta testing

Requirements

  • a working TNG installation
  • an installed current version of the Mod Manager
  • a backup of the files shown in the Impacted Files section

Pre Installation

If you use any of the mods shown in the mods that conflict section, you need to uninstall those before installing this Responsive Tables mod

Automated Install

  1. Download the appropriate file for your TNG version from the download links in the mod summary area in the upper right.
  2. Extract the appropriate zip file to your TNG mods folder.
  3. Follow the normal automated installation for Mod Manager, as shown in the example Mod Manager - Installing Config Files to install the appropriate mod for your desktop genealogy program.

Post Installation

  • You also need to install the following mods for Responsive Tables to work on the browsesource and cemeteries show map pages:
    or the Responsive Tables-2 Citation Master Basic mod shown below
    or the Responsive Tables-2 Showmap Burials mod shown below
  • If you use mytngstyle.css to change the color for fieldnameback on your site, you will need to update your mytngstyle.css to add .tablesaw-cell-label so that you have something like the following
.fieldnameback, .tablesaw-cell-label {
    background-color : #D0E0F0;  /*    was  B6D1E4; */
}
  • If you're using a TNG template, then you would make this change in templates/templateX/css/mytngstyle.css
  • If you're not using a TNG template (e.g. using TNG on a WordPress site), then you would make this change in css/mytngstyle.css
Note that you need to install the Mobile Site No Previews to resolve the screen width issue with the search results pages caused by the person or family preview if using TNG 10.1 or TNG 10.1.1

Order of Installation

You should install the mods in the following order, that is those marked -2 before those marked -3

  • Responsive Tables
  • Responsive Tables-2 - Browse Sources
or Responsive Tables-2 - Citation Master Basic (no longer available) since it was not constructed correctly
  • Responsive Tables-2 - Showmap
or Responsive Tables-2 - Showmap Burials
or Responsive Tables-2 - Burials-More Details
  • Responsive Tables-2 - Search
or Responsive Tables-2 - Search Tree ID
  • Responsive Tables-3 - Branch Sort
  • Responsive Tables-3 - Media Display Columns Mod
  • Responsive Tables-3 - PersonID Note
  • Responsive Tables-3 - Private Notes
  • Responsive Tables-3 - Tree ID

Order of Uninstall

You should uninstall those marked Responsive Tables-3 before you uninstall those marked Responsive Tables-2 and the Responsive Tables mod itself. In other words you need to uninstall in the opposite order from what you installed. Note that if you are updating the Responsive Tables mod itself it is not necessary to uninstall the Responsive Tables-2 mods.

You must uninstall the Responsive Tables-3 mods related to the Responsive Tables

Note that if you do not uninstall the Responsive Tables-3 - Tree ID before uninstalling the Responsive Tables you will be forced into a file recovery situation.

and will have to restore the browsetrees.php module before you can install the new version of the Responsive Tables mod since it will return
line 441: %location:% code fragment not allowed here in the %target:browsetrees.php% section of the config file.

Mods That Conflict

The following mods are impacted by this mod and require that you uninstall them before installing the Responsive Tables mod as indicated below.

  • Media display columns mod - requires that you install a new version of this mod to eliminate the conflicts with the whatsnew.php and reports.php
note that this mod needs to be uninstalled prior to installing the Responsive Tables mod
you need to install the responsive_tables_media_display_columns_V10.1.0.5a.zip mod
after installing the Responsive Tables mod to eliminate any conflict
note that this mod needs to be uninstalled prior to installing the Responsive Tables mod
you need to install the responsive_tables_notes_personid_v10.1.0.3b.zip
after installing the Responsive Tables mod to eliminate any conflict
note that this mod needs to be uninstalled prior to the Responsive Tables mod
you need to install the responsive_tables_private_notes_v10.1.0.3b.zip
after installing the Responsive Tables mod to eliminate any conflict
note that this mod needs to be uninstalled prior to installing the Responsive Tables mod
you need to install the responsive_tables_branch_sort_v10.1.0.2c.zip
after installing the Responsive Tables mod to eliminate any conflict
note that this mod needs to be uninstalled prior to installing the Responsive Tables mod
you need to install the responsive_tables_treeid_mod_v10.1.0.2d.zip
after installing the Responsive Tables mod to eliminate any conflict in behavior
Responsive Tables make an incompatible modification to the header row of the sources table in browsesources.php. Citation Master Basic v10.1.0.3a corrects this by removing it's own modification to that header row, with the downside that the table titles no longer reflect the content of the columns. v10.1.0.3a is recommended for any TNG users having both Citation Master and Responsive Tables installed. Otherwise, for full functionality, Citation Master Basic v10.1.0.3 is recommended. Note that testing has only verified the installation compatibility of Citation Master and Responsive Tables, along with the preservation of Citation Master's functionality. Any assistance with verifying Responsive Tables functionality is appreciated.
Note that a version of the Responsive Tables - Citation Master Basic was provided to the Citation Master Basic mod developer that support the functionality of both mods.
if you do not use the Citation Master Basic mod, then
you need to install the responsive_tables_browsesource_v10.1.0.2.zip mod to get the Responsive Tables in Browse Source
This new mod by David Beckwith moves the burial location to the header and eliminates the Tree Name column if you only have one tree
note that this mod needs to be uninstalled prior to installing the Responsive Tables mod
you need to install the responsive_tables_showmap_burial_v10.1.0.2.zip mod
for TNG 10.1.1, you need responsive_tables_showmap_burial_v10.1.1.2.zip
if you do not use this mod, then
you need to install the responsive_tables_showmap_v10.1.0.2.zip mod
and for TNG 10.1.1, you need responsive_tables_v10.1.1.2.zip
while this mod does not show a Mod Manager conflict with the Responsive Tables mod, if installed the toggle no longer works on the All Burials table in showmap.php
a Responsive Tables version of this mod is required, if you use this mod

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

Sites Using This Mod

If you download and install this mod, please add your TNG site to the table below:

URL User Note Mod-Version TNG-Version Template User-language
Dahl Family Gustave Dahl Mod Developer 10.1.0.1n 10.1.1 EN
Our Roy and Boucher Family Ken Roy I helped Gustave package the mod. I also use the Life Dates Mobile, Mobile Site Enhancements, Mobile Site No Preview, and Mobile Individual Page Map mods 10.1.0.2a 10.1.0/10.1.1 on test subdomain Template 4 EN, FR
Our Family Histories Bryan S. Larson beta tester 10.1.0.1j 10.1.0 Template 8 EN
Chamberlain & Eidenbenz Genealogy Graham Chamberlain beta tester 10.1.0.2a 10.1.1 Template 8 EN,FR,DE,NL,ES
Robin's Genealogy Robin Richmond beta tester 10.1.0.1e 10.1.0 Template 5 EN
Our Family Saga Del Groves beta tester 10.1.0.2a 10.1.1 Template 4 EN
Roger's Ramblings Roger Moffat beta tester on WordPress site 10.1.0.1o 10.1.0 WordPress EN
Wortelboer Genealogy Bernard Wortelboer 10.1.0.2a 10.1.3 12 NL,EN
Kemp(e) Family History Andrew Kemp Public site see User:Kempons see User:Kempons Template 8 EN

Reported Issues

Issue Reported By Mod Version Problem Description Comments Resolved
Anniversaries not mobile friendly Ken Roy V10.1.0.1k Anniversaries does not pass the Google Mobile Friendly test The form input fields are wider than the screen at 320x. Form is resolved in Mobile Site Fix Anniversaries, but Google still flags the script as not mobile-friendly due to Links too close together
Thumbnails display Bernard Wortelboer V10.1.0.2 One remark about the implementation of the responsive tables mods on my site. I noticed that, after installing the responsive tables mods, my thumbnails for my desktop (my setup: max 100x100px) are much smaller (max 60x60px). When I uninstall the mods, the thumbnails are according the setup (max 100x100) for desktop. $sitever variable is missing from the function getSmallPhoto in the Responsive Tables updates to genlib.php v10.1.0.2a
Search Heather Feuerhelm V10.1.0.2 Responsive Tables - Search shows partially installed after installing the Responsive Tables - Tree ID mod Reworked the Responsive Tables - Tree ID mod to remove the modifications to search.php and famsearch.php and created a Responsive Tables - Search Tree ID to be use if you used the Tree ID mod v10.1.0.2a

See Responsive Tables beta for changes made during beta testing

Impacted Files

The following files are modified by this mod:

  • browsealbums.php
  • browsebranches.php
  • browsemedia.php
  • browsenotes.php
  • browsesources.php
  • browserepos.php
  • browsetrees.php
  • headstones.php
  • meta.php
  • reports.php
  • showmap.php
  • statistics.php
  • whatsnew.php
  • search.php
  • famsearch.php


Related Links

Mobile Mode Display

Tuning for Mobile Display

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

Mobile Media - adjusts the Image display when not using the Image Viewer and adjusts the Image Preview for smart phones and tablets

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

Mobile Site Enhancements - several adjustments for smart phones and tablets

Mobile Site No Previews - eliminates Person, and Family previews for smart phones

Mobile Site No Slideshow - suppresses the Slide Show for smart phones and tablets

Responsive Tables - adjusts TNG table displays based on screen widths