Enhance left sidebar

This commit is contained in:
te2dy 2021-06-17 10:20:09 +02:00
parent 2f70982b00
commit a662d22d9d
5 changed files with 71 additions and 33 deletions

View File

@ -10,7 +10,26 @@
// The speed of animations.
var speed = 200;
// Show Custom Page Width only when 'Custom' is checked.
// Show sidebar parameters if a sidebar is set.
if ( $( "#_customize-input-marianne_global_layout-radio-two-column-left-sidebar" ).is( ":checked" ) ) {
$( "#customize-control-marianne_global_sidebar_width" ).show();
$( "#customize-control-marianne_global_sidebar_margin" ).show();
} else {
$( "#customize-control-marianne_global_sidebar_width" ).hide();
$( "#customize-control-marianne_global_sidebar_margin" ).hide();
}
$( "#customize-control-marianne_global_layout input" ).change( function () {
if ( $( "_customize-input-marianne_global_layout-radio-two-column-left-sidebar" ).is( ":checked" ) ) {
$( "#customize-control-marianne_global_sidebar_width" ).show( speed );
$( "#customize-control-marianne_global_sidebar_margin" ).show( speed );
} else {
$( "#customize-control-marianne_global_sidebar_width" ).hide( speed );
$( "#customize-control-marianne_global_sidebar_margin" ).hide( speed );
}
} );
// Show Round Logo when a logo is set.
if ( $( "#customize-control-custom_logo .remove-button" ).length > 0 ) {
$( "#customize-control-marianne_header_logo_round" ).show();
} else {

View File

@ -139,33 +139,37 @@ if ( ! function_exists( 'marianne_custom_css' ) ) {
if ( 'one-column' === $marianne_layout ) {
$css['.site']['max-width'] = absint( $marianne_page_width ) . 'px';
$css['.site-header']['margin-top'] = '2em';
$css['.site-header']['margin-top'] = '2em';
$css['.site-header']['margin-bottom'] = '4em';
$css['#menu-primary-container']['margin'] = '2em 0';
$css['.site-content']['margin-top'] = '4em';
} elseif ( 'two-column-left-sidebar' === $marianne_layout ) {
$marianne_sidebar_width = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
$marianne_sidebar_width = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
$marianne_sidebar_margin = marianne_get_theme_mod( 'marianne_global_sidebar_margin' );
$css['.site']['max-width'] = absint( $marianne_page_width ) . 'px';
$css['.site']['max-width'] = absint( $marianne_page_width ) . 'px';
$css['.site']['margin-top'] = '2em';
$css['.site-header']['width'] = absint( $marianne_sidebar_width ) . 'px';
$css['.site-header']['float'] = 'left';
$css['.site-header']['margin-left'] = '-' . absint( $marianne_sidebar_width + 50 ) . 'px';
$css['.site-header']['width'] = absint( $marianne_sidebar_width ) . 'px';
$css['.site-header']['float'] = 'left';
$css['.site-header']['margin-left'] = '-' . absint( $marianne_sidebar_width + $marianne_sidebar_margin ) . 'px';
$css['#menu-primary > .menu-item']['border-right'] = '0';
$css['#menu-primary > .menu-item']['border-left'] = '1px solid var(--color-border)';
$css['#menu-primary > .menu-item']['display'] = 'block';
$css['#menu-primary > .menu-item']['margin'] = '.5rem 0';
$css['#menu-primary > .menu-item']['border-right'] = '0';
$css['#menu-primary > .menu-item']['border-left'] = '1px solid var(--color-border)';
$css['#menu-primary > .menu-item']['display'] = 'block';
$css['#menu-primary > .menu-item']['margin'] = '.5rem 0';
$css['#menu-primary > .menu-item']['padding-right'] = '0';
$css['#menu-primary > .menu-item']['padding-left'] = '.5rem';
$css['#menu-primary > .menu-item']['padding-left'] = '.5rem';
$css['.site-content']['float'] = 'right';
$css['.site-content']['position'] = 'relative';
$css['.site-content']['margin'] = '0 0 4em 0';
$css['.site-content']['float'] = 'right';
$css['.site-content']['position'] = 'relative';
$css['.site-content']['margin-bottom'] = '4em';
$css['.site-secondary']['width'] = absint( $marianne_sidebar_width ) . 'px';
$css['.site-secondary']['float'] = 'left';
$css['.site-secondary']['margin-left'] = '-' . absint( $marianne_sidebar_width + 50 ) . 'px';
$css['.site-secondary']['width'] = absint( $marianne_sidebar_width ) . 'px';
$css['.site-secondary']['float'] = 'left';
$css['.site-secondary']['margin-left'] = '-' . absint( $marianne_sidebar_width + $marianne_sidebar_margin ) . 'px';
$css['.site-secondary']['clear'] = 'left';
$css['.site-secondary .separator']['margin'] = '2em 0';
@ -182,9 +186,10 @@ if ( ! function_exists( 'marianne_custom_css' ) ) {
// Responsive
if ( 'two-column-left-sidebar' === $marianne_layout ) {
$marianne_sidebar_width = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
$marianne_sidebar_width = marianne_get_theme_mod( 'marianne_global_sidebar_width' );
$marianne_sidebar_margin = marianne_get_theme_mod( 'marianne_global_sidebar_margin' );
$media_rule = '@media all and (max-width: ' . absint( $marianne_page_width + ( ( $marianne_sidebar_width + 50 ) * 2 ) + 100 ) . 'px)';
$media_rule = '@media all and (max-width: ' . absint( $marianne_page_width + ( ( $marianne_sidebar_width + $marianne_sidebar_margin ) * 2 ) + 100 ) . 'px)';
$media = array();

View File

@ -216,7 +216,7 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
'section' => 'marianne_global',
'id' => 'layout',
'title' => __( 'Layout', 'marianne' ),
'description' => __( 'You can choose to display your site in one or two columns, with a left sidebar. Default: one column.', 'marianne' ),
'description' => __( 'You can choose to display your site in one or two columns, with a left sidebar. The sidebar will show up only if the screen is wide enough. Default: one column.', 'marianne' ),
'type' => 'radio',
'value' => array(
'one-column' => __( 'One column', 'marianne' ),
@ -239,6 +239,20 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
'live' => false,
);
$marianne_customizer_options[] = array(
'section' => 'marianne_global',
'id' => 'sidebar_margin',
'title' => __( 'Sidebar Margin Width', 'marianne' ),
'description' => __( 'Default: 50px.', 'marianne' ),
'type' => 'marianne_slider',
'input_attrs' => array(
'min' => 50,
'max' => 150,
'step' => 10,
),
'live' => false,
);
$marianne_customizer_options[] = array(
'section' => 'marianne_global',
'id' => 'page_width',
@ -949,14 +963,15 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
'colors_link_hover' => 'blue',
// Global.
'marianne_global_layout' => 'one-column',
'marianne_global_sidebar_width' => 250,
'marianne_global_page_width' => 480,
'marianne_global_images_expand' => false,
'marianne_global_font_family' => 'sans-serif',
'marianne_global_font_size' => 100,
'marianne_global_font_smooth' => false,
'marianne_global_text_shadow' => false,
'marianne_global_layout' => 'one-column',
'marianne_global_sidebar_width' => 250,
'marianne_global_sidebar_margin' => 50,
'marianne_global_page_width' => 480,
'marianne_global_images_expand' => false,
'marianne_global_font_family' => 'sans-serif',
'marianne_global_font_size' => 100,
'marianne_global_font_smooth' => false,
'marianne_global_text_shadow' => false,
// Header Settings.
'marianne_header_align' => 'left',

View File

@ -19,7 +19,9 @@ if ( is_active_sidebar( 'widgets' ) ) {
}
?>
<aside id="secondary"<?php marianne_add_class( $marianne_widgets_class ); ?> role="complementary">
<hr class="separator">
<?php if ( 'two-column-left-sidebar' !== marianne_get_theme_mod( 'marianne_global_layout' ) ) : ?>
<hr class="separator">
<?php endif; ?>
<?php dynamic_sidebar( 'widgets' ); ?>
</aside>

View File

@ -243,9 +243,6 @@ body {
.site-header {
text-align: var(--site-header-align);
}
.site-content {
margin: 4em 0;
}
.site-primary {
margin-bottom: 4em;
}