Tuning for Mobile Display

From TNG_Wiki
Jump to navigation Jump to search

Tablet Tweaks

While TNG V10 provides a tablet detection capability, it still uses the TNG standard display on the tablet.

Sitever tablet

TNG does set the $sitever variable to tablet, so if you have Add Ons or Mods to TNG like the Census Plus International mod you can change the information display for both mobile (smart phones) and tablets. See Mobile Mode visualization.

Depending on which template you are using, you may also need to tweak some of the css classes.

CSS Tweaks

For example, for the template 4 I had to change the templatestyle.css to use 

@media (max-width: 650px) {
    .section {
        width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .indexpage {
        width: 100%;
    }
    .titletop {
        font-size: 20px;
    }
    .titlebottom {
        font-size: 32px;
    }
    .banner {
        width: 360px;
        height: 100px;
    }
}

Genlib.php Tweaks

I also had to tweak the genlib.php code to only display:

  • Edit Profile
  • User Description

if the $sitever was for the standard mode. Thus not displaying it on a tablet mode setting. 

        if($currentuser) {
                if($allow_profile && $sitever == "standard") {
                      $editprofile_url = getURL( "ajx_editprofile", 1 );
                        $profilelink =  tng_smallIcon(array('label'=>($sitever == "mobile" ?  $text['editprofile'] : "({$text['editprofile']}: $currentuser)"),
                                'class'=>"tngsmallicon3", 'id'=>"profile", 
                                'onclick'=>"tnglitbox = new  LITBox('{$editprofile_url}p=" . urlencode($cms['tngpath']) .  "',{width:520,height:560}); return false"));
                        $tngconfig['menucount']++;
                }
                else 
                        if ($sitever == "standard") 
                                $userparen = " ($currentuser)";
                        else
                                $userparen = "";
        }

Note the above genlib.php tweaks are included in the Mobile Site Enhancements mod

Template 4 Banner

In order to get the Template 4 my dynamic image title to display correctly on tablet devices, I also changed the <img src= to remove the width="468" height="100" from the index.php and topmenu.php

Changed from: 

                    
<img  src="<?php echo $cms['tngpath'] . $templatepath; ?><?php echo  $tmp['t4_titleimg']; ?>" alt="" class="banner" width="468"  height="100" />

Changed to: 

                    
<img  src="<?php echo $cms['tngpath'] . $templatepath; ?><?php echo  $tmp['t4_titleimg']; ?>" alt="" class="banner" />

and added the parameters to the banner CSS class 

.banner {
      text-align: left;
      margin-top: 5px;
    border: 0px;
    width: 468px;
    height: 100px;
}

@media screen and (max-width: 1024px) {
    .banner {
        width: 360px;
        height: 100px;
    }
}

Smart Phone Tweaks

Google Search has started evaluating web pages as to whether they are mobile-friendly. The following URL can be used to check your pages out and get hints on how to fix your site.

You should upgrade your version of TNG if you are using a version prior to TNG v10, which introduced the siteversion.php check and adds the viewport and other meta tags for mobile devices.

Several changes using TNG mods can be made to improve TNG displays on smart phones:

note that you need to choose the version of the mod that matches the Google Map options you use
  • install the Responsive Tables mods that adjust the TNG table displays based on device widths
  • install the Signature Display mod update to reduce the signature display size on mobile devices

Mobile Device Mods

Mobile Site Enhancements

The Mobile Site Enhancements mod provides the following enhancements to TNG when in mobile or tablet mode, such as

  • not adding the Site Name to the page title
to make it easier for Shortcut Saving
  • reducing the margins and padding
  • reducing the header bar height to 60 percent of its size
  • adjusting the sprites and displacement made accordingly
  • reducing the Admin icons to half their size when in mobile mode
  • adjusting the getperson page left column to a smaller width
you may need to override the .labelcol {width: to a wider value if you use multiple languages
  • adjusting the left nav area for template 4 to a smaller width
similar adjustments may be needed for other templates with left nav areas
  • display text for the tabs on the smart phones rather than icons

Signature Display

The Signature Display mod was also adjusted to reduce the size of the signature to 60% when displayed on a tablet or smart phone.

Responsive Tables

The Responsive Tables mod provides the capability to dynamically adjust which columns are displayed on smaller device based on the priority setting for the tablesaw plugin such that the displays dynamically adjust when changing from portrait orientation to landscape orientation on the device. The mod provides options for Stack, Swipe, and Toggle table displays.

  • Stack will move the column headers to the left of the data and stack the row displays
  • Swipe will provide the capability to swipe to the right to display the additional columns
  • Toggle will automatically display the columns based on a specified priority for the screen width

You will need to install other mods that use the Responsive Tables besides the main mod. These mods were separated to avoid displaying conflicts (Bad Targets) when using other mods:

  • Responsive Tables-2 - Browse Sources
  • Responsive Tables-2 - Citation Master Basic which is the Citation Master Basic Mod with responsive tables
and an alternative to the Responsive Tables-2 - Browse Sources
  • Responsive Tables-2 - Search which provides responsive tables to the People and Family search results table
if you do not want to use the TNG smart phone formatting of those tables
  • Responsive Tables-2 - Showmap
  • Responsive Tables-2 - Showmap Burials which is the Showmap Burials mod with responsive table
and an alternative to the Responsive Tables-2 - Showmap if you use the Showmap Burials mod
  • Responsive Tables-2 - Burials More Details which is the Burials-More Details mod with responsive table
and an alternative to the Responsive Tables-2 - Showmap if you use the Burials-More Details mod

The following are additional mods you may need based on whether you use specific TNG mods:

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, suppresses the Slide Show on Show Media for smart phones and adjusts the Slide Show on 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 Fix Anniversaries - fixes the input form on the Dates and Anniversaries for smart phones and tablets

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

Responsive Tables -adjusts TNG table displays based on screen widths

Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Tuning_for_Mobile_Display&oldid=96692"