Responsive Tables beta

From TNG_Wiki
Jump to: navigation, search

The following is the Revision History and Reported Issues for the Responsive Tables during beta testing

Revision History

Version Date Contents
v10.1.0.1p 21 April 2015
  • Changed to use Name instead of Last Name, First Names(s) when sitever=mobile for What's New and Date & Anniversaries
  • Attempted to change the cemmap styles based on orientation
v10.1.0.1o 19 April 2015
  • Removed the genstyle.css changes to titlebox
you need to install the Mobile Site No Previews to remove the Image, Person, and Family previews for smart phones
  • Add Responsive Tables - Search mod that reformats the search results for people and family search using the Responsive Tables
v10.1.0.1n 7 April 2015 Updated headstones.php and showmap.php to remove inline styles for cemetery maps, so they can be displayed at 95% width on mobile devices to allow scrolling.

Also changed the following to use the new genstyle.css definitions for cemmap class

  • Responsive Tables - Showmap
  • Responsive Tables - Showmap Burials
6 April 2015 for TNG 10.1.1, updated the
  • Responsive Tables - Showmap
  • Responsive Tables - Showmap Burials
v10.1.0.1m 2 April 2015
  • Added column headers for Thumbnails only view so they could be toggled based on screen width
  • Requires Mobile Site Enhancements v10.1.0.1f for adjustments to
    • Image displays when not using Image viewer
    • Image Preview
v10.1.0.1l 28 March 2015
  • Adjusted thumbnails calculation so that it uses 100px max width and height for standard, 80px for tablets and 60px for smart phones
  • Requires Mobile Site Enhancements v10.1.0.1e for adjustments to Individual getperson.php page
v10.1.0.1k 25 March 2015
  • Reverted tablesaw-cell-label in tablesaw.bare.cssdown back to 30%
  • Removed the max-width on the nbrcol definition since it was causing problems
  • Added idcol (50px) for ID columns instead of using nbrcol which was causing overlays
  • Added overflow:hidden to titlebox class to resolve What's New page being displayed wider than the mobile screen (zoomed out)
  • Updated Responsive Tables-3 - Branch Sort to put Branch ID column after the # column which is now marked as persist
v10.1.0.1j 23 March 2015
  • Moved tablesaw.bare.css from meta.php to genlib.php in front of genstyle.css to allow styles to be overridden
Note that if you override fieldnameback colors you will need to update the definition in your template mytngstyle.css
or the TNG css/mytngstyle.css if you do not use a template
  • changed tablesaw-cell-label in tablesaw.bare.cssdown from 30% to 20% to reduce the width of the Stacked 1st columns
Note that this will cause the Last Name, Given Names(s) to wrap on the What's New screen
  • Updated definitions for Toggle on Browse Media to display Linked To on smaller screens
  • Updated definitions for Toggle on What's New to swap the display of Location and Born/Baptized
v10.1.0.1i 22 March 2015
  • Added thumbnails class to genstyle.css to remove hard-coded style= definitions in TNG files
Note that Responsive Tables - Showmap and Responsive Tables - Showmap Burials were also updated
  • Added nbrcol class to genstyle.css to set the width of the ID and # columns to 10px
Note that Responsive Tables - Browse Source and Responsive Tables - Citation Master were also updated
  • Updated tablesaw.bare.css definitions to add spacing and fix overhang when in Stack mod to fix Notes overflow in Stack
and to re-instate the border definitions that had been previously commented out
v10.1.0.1h 21 March 2015
  • Changed all TNG style sheets so that .tablesaw-cell-label is inherited from .fieldnameback to resolve light text on light background when in Stack mode
Note that this causes the light text on a light background on my WampServer environment but not on the Linux host --Ken Roy 08:33, 21 March 2015 (EDT)
  • Default option set to Stack so you might want to change it to Toggle
v10.1.0.1g 20 March 2015
  • Reverted the tablesaw.bare.css back to the meta.php where they are the last style sheet
  • Fixed the Statistics page width for standard display
  • Added left-align for thead and th to genstyle.css to eliminate headers being centered
  • Added right-align class to genstyle.css to allow right aligning some headers like those in Statistics to the right
v10.1.0.1f 18 March 2015
  • This version split off the browsesource.php and showmap.php from the Responsive Tables and created the following mods:
    • Responsive Tables - Showmap
    with an alternative Responsive Tables - Showmap Burials if you want the Showmap Burials mod
    • Responsive Tables - Browse Sources
    with an alternative Responsive Tables - Citation Master Basic if you want the Citation Master Basic mod

These changes allow only the alternative mods to show as conflicts since both cannot be installed

  • Removed <strong> </strong> and <b> </b> from TNG browsesource headers converted to Responsive Tables <th> headers
  • Created Responsive Tables - Media Display Columns mod to remove the <b> </b> from the Reports and What's New headers
  • Updated following conflict mods to remove the bold in the headers:
    • Responsive Tables - Branch Sort
    • Responsive Tables - PersonID Note
    • Responsive Tables - Private Notes
    • Responsive Tables - Showmap Burials
  • Changed the if statement to only use the toggle, swipe, and stack header options if the $sitever is not equal standard to fix the table width issue reported by Graham
  • Updated whatsnew.php to split the combined heading column into two separate columns so the location column can be suppressed on smaller devices.

No attempt was made to tackle the problem reported by Roger Moffat and Del Groves

v10.1.0.1e 15 March 2015
  • Updated meta.php add the even for standard
  • Added left-align for thead and th to to eliminate headers being centered
  • Added tablesaw to anniversaries page
  • Removed and from TNG headers converted to Responsive Tables <th> headers
v10.1.0.1d 12 March 2015
  • Updated meta.php change to only add Tablesaw for tablet and smart phone devices
  • Changed to to eliminate vertical spacing enlarging
  • Updated browsemedia to eliminate white space after the list
v10.1.0.1c 8 March 2015
  • Removed jquery.js which is causing a conflict with the Login litbox
  • Added use of Tablesaw jQuery plugins as a comment to modules changed by the mod
  • Updated changes to showmap.php to support the Showmap Burials mod that moves the burial location to the header and suppress the Tree name column when only 1 tree
v10.1.0.1b 7 March 2015 Copy needed files from mods/responsive folder instead of requiring users to download Tablesaw jQuery plugins
v10.1.0.1a 6 March 2015 Attempt to resolve conflict with Citation Master Basic Mod
v10.1.0.1 5 March 2015 initial release

Reported Issues

The following issues have been reported:

Issue Reported By Mod Version Problem Description Comments Resolved
Report Table Headers Graham Chamberlain v10.1.0.1e As far as I can tell all header line texts are now left-aligned. However there seems to be some inconsistency between tables with some texts still appearing as . The attached shows the reports table where the 'Report Name' text is <strong> but the 'Description' text appears <normal>. Created Responsive Tables - Media Display Columns Mod to fix the bold in Reports and What's New user mod
Source Table Headers Graham Chamberlain v10.1.0.1e Header row texts in browsesources.php are still all . Browse Source updated to remove bold v10.1.0.1f
Mod Conflicts Ken Roy v10.1.0.1e Removing bold <strong>and <b> from table headers now causes conflicts in a couple of mods Split off browsesource.php and showmap.php from Responsive Tables and created

Responsive Tables - Browse Sources and Responsive Tables - Showmap so Responsive Tables - Citation Master Basic and Responsive Tables - Showmap Burials can be installed without showing conflicts in the Responsive Tables mod

Table Widths Graham Chamberlain v10.1.0.1e The RT mod changes the table width for sitever=standard to 100% in Statistics, Trees, Branches, Sources and Repositories pages. This might suit a smartphone, possibly looks strange on a tablet and definitely looks completely out of place in standard mode for a desktop computer. changed the if statement to only apply the toggle, stack, and swipe header options if the $sitever is not standard v10.1.0.1f
Font Color Change Roger Moffat V10.1.0.1e One oddity I notice - if you look at this page (statistics) narrow it down until the responsive thing kicks in, suddenly the light coloured heading text shows on the light coloured databack text making it hard to read. Duplicate of Stack Header Unreadable issue below v10.1.0.1h
Stack Option causes white space Del Groves V10.1.0.1e Unexpected 'white space' surrounding thumbnails in 'stack' view at resolutions somewhere below 550x600 [portrait view] and lower. This actually looks like the thumbnails are not moved to the 2nd column when using the Stack option. This happens on the What's New screen and some others but not on the Browse Media screens. --Ken Roy 18:38, 20 March 2015 (EDT) v10.1.0.1i
Combined column headings Ken Roy V10.1.0.1e Combined column headings that span more than one column of data do not lend themselves to easily suppress one of the columns in Toggle mode. For example, the Born/Baptized column in What's New for Individuals that is a heading for the date and location does not allow suppressing the location when on a smaller width. Updated whatsnew.php changes to split the heading into 2 columns so the location column is suppressed on smaller devices v10.1.0.1f
Fix for Statistics incomplete Graham Chamberlain V10.1.0.1f Fix for Statistics page only applied to first table of the Statistics page Fix for 2nd and 3rd tables was added to v10.1.0.1g v10.1.0.1g
Stack Header Unreadable Graham Chamberlain V10.1.0.1f When using Stack with dark backgrounds and light text, the heading becomes unreadable because it is light on light when the headers get stacked. This may be the same problem that Roger Moffat reported, although he never mentioned using Stack. The issue is that when the header column is stacked in front of the data column the fieldnameback class background is lost and the light fieldname is displayed on a light databack background. I have no clue on how to fix this. --Ken Roy 17:09, 20 March 2015 (EDT) v10.1.0.1h
Notes overflow in Stack Del Groves V10.1.0.1e Viewing Notes in Stack Mode, it seems the # default column width is too wide (at small screen sizes) thus resulting in overflow of Notes to the right requiring scrolling to view. see attached screenshot 360x640. Appears to be caused by the class=nw that was added. However, removing it causes the table display to not be to the full width of the screen. v10.1.0.1i
Thumbnails Display V10.1.0.1e Thumbnails do not display correctly in What's New, Headstones and Show Map Removed hard-coded style= definitions in showmap.php and functions.php doMedia function v10.1.0.1i
Wrong Color in Stack Roger Moffat V10.1.0.1i Wrong colors are being displayed in Stack mode for WordPress users who override TNG defaults that are set in css/genstyle.css using css/mytngstyle.css

Note that the same applies to TNG users who override templatestyle.css colors in the template mytngstyle.css

Move tablesaw.bare.css from meta.php to genlib.php so that mytngstyle.css overrides will apply

If you override fieldnameback colors, you need to add tablesaw-cell-label to your override in mytngstyle.css

Column Display issues Gustave Dahl V10.1.0.1j tablesaw-cell-label at 20% and nbrcol max-width cause problems in the Stack mode display tablesaw-cell-label will be reverted back to 30% and max-width will be removed from the nbrcol v10.1.0.1k
What's New Page issues David Jamieson

Ken Roy

V10.1.0.1j What's New page on iPhone 6 and Galaxy S5 is wider than the screen display Added overflow:hidden to the titlebox to resolve the issue of the page not being displayed in the mobile screen but rather zoomed out v10.1.0.1k
ID Column too narrow Colin Spencer V10.1.0.1j When swapping from back to Toggle from one of the other views the ID column is too narrow until the page is reloaded.

In Stack mode the left column is too narrow on an iPhone 5 (320px) and the column 1 text is overlaid on column 2

The nbrcol (10px) assigned to ID columns is causing the problem. Added an idcol (50px) for ID columns v10.1.0.1k
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
Thumbnails Only Ken Roy v10.1.0.1k The Thumbnails only view is based on the number of columns in General Settings and exceeds the screen width on smaller devices Partially solved by adding Column headings for Thumbs 1 through 10 so they could be toggled. Need to create N column headings based on $tngconfig['thumbcols'] and also not generate column headings when less thumbnails than $tngconfig['thumbcols'] V10.1.0.1m
Thumbnails Preview Del Groves v10.1.0.1m What's New: - thumbnails constrained [not showing full size]. Problem exists in both standard & mobile versions. The Image Preview from the thumbnail is restricted to display only within the What's New section - Photos, Headstones, etc. Fixed in the Mobile Site No Previews
Stack Mode Image Preview Del Groves v10.1.0.1m Image Preview when using Stack Mode are [shifted right off-screen]: mobile site version. The Image Preview for thumbnails on Responsive Tables Stack mode or on the Individual Person page are for thumbnails in the 2nd column, so may always be an issue. Fixed in the Mobile Site No Previews
What's New Portrait Colin Spencer v10.1.0.1m On my iPhone 5 on my personal test site Recent Additions is not responsive (portrait mode) but I am sure it was earlier. If I put the site into mobile mode then it does display in responsive mode. Appears to be a problem on Colin's site where the iPhone is not being detected and $sitever set to mobile
Search Results Colin Spencer v10.1.0.1m Search Results is also not responsive in portrait mode. Appears to be a problem on Colin's site where the iPhone is not being detected and $sitever set to mobile, so the logic in the TNG search.php script is not being applied
mini iPad issues Ken Roy v10.1.0.1m On the mini iPad the What's New portrait orientation exceeds the screen width. When tapped and pinched to get it to display within the screen and then rotated, the screen display in landscape mode does not fill the screen Removed changed in Mobile Site Enhancements v10.1.0.1f did not appear to resolve the issue
Stack Mode Image Preview Del Groves v10.1.0.1o Dates & Anniversaries: (Stack mode) at screen-size less than 360x640 (i.e. 320x480 - see attached screenshot) the column heading "Last Name, Given" is too narrow Changed What's New and Date & Anniversaries to use Name instead of Last Name, First Name(s) when sitever=mobile like the People Search results page does v10.1.0.1p