--- a/include/common-template.inc.php +++ b/include/common-template.inc.php @@ -23,8 +23,10 @@ $url.= "&guid=ON"; return str_replace("&", "&", $url); } + function include_header($pageTitle, $pageType, $opendiv = true, $geolocate = false, $datepicker = false) { +global $labsPath; echo ' <!DOCTYPE html> <html lang="en"> @@ -33,31 +35,31 @@ <title>' . $pageTitle . '</title> <meta name="google-site-verification" content="-53T5Qn4TB_de1NyfR_ZZkEVdUNcNFSaYKSFkWKx-sY" /> - <link rel="stylesheet" href="css/jquery-ui-1.8.12.custom.css" />'; + <link rel="stylesheet" href="'.$labsPath.'css/jquery-ui-1.8.12.custom.css" />'; if (isDebugServer()) { - echo '<link rel="stylesheet" href="css/jquery.mobile-1.0a4.css" /> + echo '<link rel="stylesheet" href="'.$labsPath.'css/jquery.mobile-1.0b1.css" /> - <script type="text/javascript" src="js/jquery-1.5.js"></script> + <script type="text/javascript" src="'.$labsPath.'js/jquery-1.6.1.min.js"></script> <script>$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; }); </script> - <script type="text/javascript" src="js/jquery.mobile-1.0a4.js"></script>'; + <script type="text/javascript" src="'.$labsPath.'js/jquery.mobile-1.0b1.js"></script>'; } else { - echo '<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> - <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> + echo '<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> + <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script>$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; }); </script> - <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>'; + <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>'; } echo ' - <script src="js/jquery.ui.autocomplete.min.js"></script> -<script src="js/jquery.ui.core.min.js"></script> -<script src="js/jquery.ui.position.min.js"></script> -<script src="js/jquery.ui.widget.min.js"></script> + <script src="'.$labsPath.'js/jquery.ui.autocomplete.min.js"></script> +<script src="'.$labsPath.'js/jquery.ui.core.min.js"></script> +<script src="'.$labsPath.'js/jquery.ui.position.min.js"></script> +<script src="'.$labsPath.'js/jquery.ui.widget.min.js"></script> <script> $(function() { $( "#geolocate" ).autocomplete({ @@ -76,6 +78,17 @@ </script> '; echo '<style type="text/css"> +.ui-li-thumb, .ui-li-icon { position: relative; }'; + +if (strstr($_SERVER['HTTP_USER_AGENT'], 'Android')) echo '.ui-shadow,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-b,.ui-btn-up-b,.ui-btn-hover-b, +.ui-btn-down-b,.ui-bar-c,.ui-body-c,.ui-btn-up-c,.ui-btn-hover-c,.ui-btn-down-c,.ui-bar-c,.ui-body-d, +.ui-btn-up-d,.ui-btn-hover-d,.ui-btn-down-d,.ui-bar-d,.ui-body-e,.ui-btn-up-e,.ui-btn-hover-e, +.ui-btn-down-e,.ui-bar-e,.ui-overlay-shadow,.ui-shadow,.ui-btn-active,.ui-body-a,.ui-bar-a { + text-shadow: none; + box-shadow: none; + -webkit-box-shadow: none; +}'; +echo ' .ui-navbar { width: 100%; } @@ -89,11 +102,11 @@ margin: 0 !important; } .ui-icon-navigation { - background-image: url(css/images/113-navigation.png); + background-image: url('.$labsPath.'css/images/113-navigation.png); background-position: 1px 0; } .ui-icon-beaker { - background-image: url(css/images/91-beaker-2.png); + background-image: url('.$labsPath.'css/images/91-beaker-2.png); background-position: 1px 0; } #footer { @@ -125,8 +138,12 @@ -moz-border-radius: 15px; border-radius: 15px; } - - + + +#footer { +clear:both; +text-align:center; +} // source http://webaim.org/techniques/skipnav/ #skip a, #skip a:hover, #skip a:visited { @@ -144,8 +161,136 @@ width:auto; height:auto; } + + +// adaptive layout from jQuery Mobile docs site +.type-interior .content-secondary { + border-right: 0; + border-left: 0; + margin: 10px -15px 0; + background: #fff; + border-top: 1px solid #ccc; +} +.type-home .ui-content { + margin-top: 5px; +} +.type-interior .ui-content { + padding-bottom: 0; +} +.content-secondary .ui-collapsible-contain { + padding: 10px 15px; + +} +.content-secondary .ui-collapsible-heading { + margin: 0 0 30px; +} +.content-secondary .ui-collapsible-heading-collapsed, +.content-secondary .ui-collapsible-content { + padding:0; + margin: 0; +} +@media all and (min-width: 650px){ +.content-secondary { + text-align: left; + float: left; + width: 45%; + background: none; + border-top: 0; + } + .content-secondary, + .type-interior .content-secondary { + margin: 30px 0 20px 2%; + padding: 20px 4% 0 0; + background: none; + } + .type-index .content-secondary { + padding: 0; + } + .type-index .content-secondary .ui-listview { + margin: 0; + } + .content-primary { + width: 45%; + float: right; + margin-top: 30px; + margin-right: 1%; + padding-right: 1%; + } + .content-primary ul:first-child { + margin-top: 0; + } + + .type-interior .content-primary { + padding: 1.5em 6% 3em 0; + margin: 0; + } + /* fix up the collapsibles - expanded on desktop */ + .content-secondary .ui-collapsible-heading { + display: none; + } + .content-secondary .ui-collapsible-contain { + margin:0; + } + .content-secondary .ui-collapsible-content { + display: block; + margin: 0; + padding: 0; + } + .type-interior .content-secondary .ui-li-divider { + padding-top: 1em; + padding-bottom: 1em; + } + .type-interior .content-secondary { + margin: 0; + padding: 0; + } + +} +@media all and (min-width: 750px){ + .type-home .ui-content, + .type-interior .ui-content { + background-position: 39%; + } + .content-secondary { + width: 34%; + } + .content-primary { + width: 56%; + padding-right: 1%; + } + .type-interior .ui-content { + background-position: 34%; + } +} + +@media all and (min-width: 1200px){ + .type-home .ui-content{ + background-position: 38.5%; + } + .type-interior .ui-content { + background-position: 30%; + } + .content-secondary { + width: 30%; + padding-right:6%; + margin: 30px 0 20px 5%; + } + .type-interior .content-secondary { + margin: 0; + padding: 0; + } + .content-primary { + width: 50%; + margin-right: 5%; + padding-right: 3%; + } + .type-interior .content-primary { + width: 60%; + } +} + </style>'; - if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod')) { + if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPad')) { echo '<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="startup.png" /> @@ -176,7 +321,7 @@ } $(document).ready(function() { $('#here').click(function(event) { $('#geolocate').val(geolocate()); return false;}); -$('#here').show(); + $('#here').show(); }); "; if (!isset($_SESSION['lat']) || $_SESSION['lat'] == "") echo "geolocate();"; @@ -201,7 +346,7 @@ <div data-role="header" data-position="inline"> <a href="' . (isset($_SERVER["HTTP_REFERER"]) ? $_SERVER["HTTP_REFERER"] : "javascript:history.go(-1)") . '" data-icon="arrow-l" data-rel="back" class="ui-btn-left">Back</a> <h1>' . $pageTitle . '</h1> - <a href="/index.php" data-icon="home" class="ui-btn-right">Home</a> + <a href="'.$labsPath.'/index.php" data-icon="home" class="ui-btn-right">Home</a> </div><!-- /header --> <a name="maincontent" id="maincontent"></a> <div data-role="content"> '; @@ -220,7 +365,9 @@ } function include_footer() { - echo '<div id="footer"><a href="about.php">About/Contact Us</a> <a href="feedback.php">Feedback/Bug Report</a>'; + +global $labsPath; + echo '<div id="footer"><a href="'.$labsPath.'about.php">About/Contact Us</a> <a href="'.$labsPath.'feedback.php">Feedback/Bug Report</a> <a href="'.$labsPath.'privacy.php">Privacy Policy</a>'; echo '</div>'; if (isAnalyticsOn()) { echo "<script> (function() { @@ -251,7 +398,7 @@ or enter an address/co-ordinates in the box below.'; } echo '</div>'; - echo '<div data-role="collapsible" data-collapsed="' . !$geoerror . '"> + echo '<div id="settings" data-role="collapsible" data-collapsed="' . !$geoerror . '"> <h3>Change Time/Place (' . (isset($_SESSION['time']) ? $_SESSION['time'] : "Current Time,") . ' ' . ucwords(service_period()) . ')...</h3> <form action="' . basename($_SERVER['PHP_SELF']) . "?" . $_SERVER['QUERY_STRING'] . '" method="post"> <div class="ui-body">