Merge pull request #738 from Aurorum/add/628-mobile-social-menu

Apostrophe 2: Offer an Option to Display a Mobile Social Menu

apostrophe-2/functions.php

@@ -330,6 +330,10 @@ function apostrophe_2_body_class( $classes ) {
 		$classes[] = 'apostrophe-2-no-sidebar';
 	}
 
+	if ( function_exists( 'jetpack_social_menu' ) && get_theme_mod( 'apostrophe_2_mobile_social' ) == 1 ) {
+		$classes[] = 'show-mobile-social-menu';
+	}
+
 	return $classes;
 }
 add_filter( 'body_class', 'apostrophe_2_body_class' );

apostrophe-2/inc/customizer.php

@@ -14,6 +14,24 @@ function apostrophe_2_customize_register( $wp_customize ) {
 	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
 	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
 	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
+	
+	function apostrophe_2_sanitize_checkbox( $checked ){ 
+            return ( ( isset( $checked ) && true == $checked ) ? true : false );
+        }
+	
+	if ( function_exists( 'jetpack_social_menu' ) ) {
+		$wp_customize->add_setting( 'apostrophe_2_mobile_social', array(
+  			'capability' => 'edit_theme_options',
+			'transport' => 'refresh',
+			'sanitize_callback'  => 'apostrophe_2_sanitize_checkbox',
+		) );
+
+		$wp_customize->add_control( 'apostrophe_2_mobile_social', array(
+  			'type' => 'checkbox',
+  			'section' => 'jetpack_content_options',
+  			'label' => __( 'Display social menu on mobile devices', 'apostrophe-2' ),
+		) );
+	}	
 }
 add_action( 'customize_register', 'apostrophe_2_customize_register' );
 

apostrophe-2/style.css

@@ -2691,6 +2691,7 @@ Primarily mobile devices and super-small tablets.
 
 	.main-navigation {
 		margin: 10px 0 20px;
+		position: relative;
 	}
 
 	.main-navigation .menu-toggle {
@@ -2773,6 +2774,22 @@ Primarily mobile devices and super-small tablets.
 	.apostrophe-2-navigation .dropdown-toggle {
 		display: block;
 	}
+	
+	/* Display the social menu if the user requests it */
+	.show-mobile-social-menu .jetpack-social-navigation {
+    		display: block;
+    		position: absolute;
+    		top: 0;
+    		right: 0;
+		height: 50px;
+   		width: 80%;
+	}
+  
+ 	.show-mobile-social-menu .jetpack-social-navigation ul li a {
+     		margin-right: 10px;
+    		padding: 0.75rem 0 1.5rem;
+   		line-height: 45px;
+	}
 
 	/* Use a slightly smaller font size for titles */
 	h1 {