1.0 Feature add

Mobile menu, vertical scale features added

changelog.txt

@@ -2,6 +2,11 @@ Changelog
 --------------------
 Currently for use with Zenphoto version 1.4.6
 
+1.0		8/19/14
+	- Added mobile menu. (header.php and style.css)
+	- Added option on single image page to scale image height to fit in screen. (image.php)
+
+
 0.97	4/28/14 Latest update, still in progress....
 	- Added more options to toggle the display of dates on various objects (multiple)
 	- Added option to have separate homepage with just gallery description source (multiple)

css/style.css

@@ -81,8 +81,7 @@ hr{border:0;border-top:1px solid #ddd;clear:both;margin:20px 0;height:0;position
 {border-color:#444;}
 
 /* ---- Fluid Images ---- */
-img.remove-attributes{max-width:100%;height:auto;}
-
+img.remove-attributes{max-width:100%;height:auto;max-height:100%;}
 
 #header h1{font-size:300%;}
 #logo{text-decoration:none;}
@@ -91,13 +90,14 @@ img.remove-attributes{max-width:100%;height:auto;}
 #nav{list-style:none;margin:0 0 35px;padding:0;}
 #nav li{display:inline-block;margin-right:10px;}
 #nav li ul{display:none;}
-#nav a{
+#nav a,#nav-icon{
 	outline:0;line-height:1.8;
 	display:block;
 	font-family:Georgia,"Times New Roman",Times,serif;
 	text-transform:uppercase;text-decoration:none;
 	font-size:110%;
 }
+#nav-icon{display:none;}
 #nav a:hover{}
 #nav li.active a,#nav a.active{font-weight:bold;color:#000;}
 #dark #nav li.active a,#dark #nav a.active{color:#fff;}
@@ -674,6 +674,27 @@ text-align:center;
 	.masonry-style-padding .masonry-image-popup,.masonry-style-padding .popup-page{opacity:0.5;}
 }
 @media only screen and (max-width: 670px) {
+
+	#nav{display:none;}
+	#nav{margin:0;padding:0;}
+	#nav li{display:block;margin:0;}
+	#nav li{
+		text-align:center;
+		padding:0px;
+		border-top:1px solid #eee;
+	}
+	#nav a,#nav-icon{outline:0;display:block;text-decoration:none;padding:10px;}
+	#nav a:hover{background:#eee;}
+	#nav li.active a,#nav a.active{font-weight:bold;color:#000;}
+	#nav-icon{display:block;background:#eee;}
+	#nav-icon span{display:inline-block;}
+	#nav-icon span:after{content: "\25BC";padding-left:2px;}
+	#nav-icon.menu-open span:after{content: "\25B2";}
+	#dark #nav li{border-color:#111;}
+	#dark #nav a:hover{background:#222;}
+	#dark #nav li.active a,#dark #nav a.active,#dark #nav-icon{color:#fff;}
+	#dark #nav-icon{background:#000;}
+
 	#commentcontent{max-width:100%;}
 	.image-grid {margin:0;}
 	.image-unit{width:50%;}

image.php

@@ -21,6 +21,24 @@
 						<?php } ?>
 					</div>
 					<?php printDefaultSizedImage(getBareImageTitle(),'remove-attributes'); ?>
+					<?php if (getOption('zpbase_verticalscale')) { ?>
+					<script>
+						function resizeFullImageDiv() {
+							vpw = $(window).width();
+							vph = $(window).height()*(.60);
+							if (vph > <?php echo getOption('image_size'); ?>) { vph = <?php echo getOption('image_size'); ?>; }
+							if (vph < vpw) { 
+								$('#image-full').css({'height': vph + 'px'}); 
+							} else {
+								$('#image-full').css({'height': 'auto'}); 
+							}
+						}
+						resizeFullImageDiv();
+						window.onresize = function(event) {
+							resizeFullImageDiv();
+						}
+					</script>
+					<?php } ?>
 				</div>
 				<div id="object-info">
 					<?php 

inc/header.php

@@ -102,6 +102,26 @@
 	<meta name="description" content="<?php echo $zpbase_metadesc; ?>" />	
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 	<link rel="stylesheet" href="<?php echo $_zp_themeroot; ?>/css/style.css">
+
+	<script>
+	// Mobile Menu
+	$(function() {
+		var navicon = $('#nav-icon');
+		menu = $('#nav');
+		menuHeight	= menu.height();
+		$(navicon).on('click', function(e) {
+			e.preventDefault();
+			menu.slideToggle();
+			$(this).toggleClass('menu-open');
+		});
+		$(window).resize(function(){
+        	var w = $(window).width();
+        	if(w > 320 && menu.is(':hidden')) {
+        		menu.removeAttr('style');
+        	}
+    	});
+	});
+	</script>
 
 	<?php if (getOption('zpbase_selectmenu') == 'chosen') { ?>
 	<link rel="stylesheet" href="<?php echo $_zp_themeroot; ?>/css/chosen.css">
@@ -228,6 +248,7 @@
 					</li>
 					<?php } ?>
 				</ul>
+				<a href="#" id="nav-icon"><span><?php echo gettext('Menu'); ?></span></a>
 			</div>
 		</div>
 	</div>

news.php

@@ -67,6 +67,8 @@
 						<?php } else if (in_context(ZP_ZENPAGE_NEWS_DATE)) { ?>
 						<div><?php printNewsIndexURL($newsname); echo ' / '; ?></div>
 						<h1><?php printCurrentNewsArchive(); ?></h1>
+						<?php } else { ?>
+						<h1><?php echo $newsname; ?></h1>
 						<?php } ?>
 					</div>
 					<div id="object-desc">

themeoptions.php

@@ -22,6 +22,7 @@ function ThemeOptions() {
 		setThemeOptionDefault('zpbase_pnglogo', '');
 		setThemeOptionDefault('zpbase_style', 'light');
 		setThemeOptionDefault('zpbase_maxwidth', '960');
+		setThemeOptionDefault('zpbase_verticalscale', true);
 		setThemeOptionDefault('zpbase_align', 'center');
 		setThemeOptionDefault('zpbase_date_albums', true);
 		setThemeOptionDefault('zpbase_date_images', true);
@@ -122,6 +123,9 @@ function getOptionsSupported() {
 				'order'=>3, 
 				'multilingual' => 0,
 				'desc' => gettext('Set the max-width of site in pixels.  Site is fluid but will not expand beyond this width for styling and image sizing purposes. <p class="notebox">*<strong>Note:</strong> The theme uses this value also to set the default image and thumb size as a percentage of this width, so that maximum efficiency of image/thumb size is gained while still filling the column width with the image.  When you change this number, images will be re-cached on load.  It is recommended to keep the max-width in the 900-1200 range.</p>')),
+			gettext('Vertical Scale Full Image') => array('key' => 'zpbase_verticalscale', 'type' => OPTION_TYPE_CHECKBOX, 
+				'order' => 3.1,
+				'desc' => gettext("If unchecked, the full image will scale to max-width of the site.  If checked, the full image will also scale vertically to the viewport using javascript to ensure it is always entirely visible on the full image page.")),
 			gettext('General Alignment') => array('key' => 'zpbase_align', 'type' => OPTION_TYPE_RADIO, 
 				'order' => 4,
 				'buttons' => array(gettext('Center')=>'center', gettext('Left')=>'left'),