Responsive Tables
|
The Responsive Tables mods are obsolete with TNG 11. The functionality was added to TNG V11, see Responsive Tables in TNG v11.
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
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
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
- Responsive Tables-2 - Browse Sources
- Responsive Tables-2 - Showmap
| v10.1.1.1 | 20 July 2015 | Updated the following mods for TNG 10.1.1
|
| v10.1.0.2b | 15 June 2015 | Updated the following mods to fix the display of a comment provided by Bill Herndon
|
| v10.1.0.2a v10.1.1.2a |
13 June 2015 | Updated the following mods to fix the html for <thread> |
| 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:
|
| 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:
|
| 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
- Download the appropriate file for your TNG version from the download links in the mod summary area in the upper right.
- Extract the appropriate zip file to your TNG mods folder.
- 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
- if you want to format the People and Family search result pages using the responsive tables approach, you can optionally install
- either the responsive_tables_search_v10.1.0.2a.zip the Responsive Tables-2 - Search mod if you are not using the Tree ID mod
- responsive_tables_search_v10.1.1.1.zip the Responsive Tables-2 - Search mod if you are not using the Tree ID mod
- or the responsive_tables_search_treeid_v10.1.0.2.zip the Responsive Tables-2 - Search Tree ID mod if you are using the Tree ID mod
- responsive_tables_search_treeid_v10.1.1.3.zip the Responsive Tables-2 - Search Tree ID mod if you are using the Tree ID mod
- 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
- Showmap Burials - alternate version of mod for Cemeteries Showmap
- 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
- Burials-More Details - alternate version of Cemetery headstones.php and showmap
- 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 |
|---|---|
|
|
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 |
|---|
|
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 |
|---|
|
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
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