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. // The speed of animations.
var speed = 200; 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 ) { if ( $( "#customize-control-custom_logo .remove-button" ).length > 0 ) {
$( "#customize-control-marianne_header_logo_round" ).show(); $( "#customize-control-marianne_header_logo_round" ).show();
} else { } else {

View file

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

View file

@ -216,7 +216,7 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
'section' => 'marianne_global', 'section' => 'marianne_global',
'id' => 'layout', 'id' => 'layout',
'title' => __( 'Layout', 'marianne' ), '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', 'type' => 'radio',
'value' => array( 'value' => array(
'one-column' => __( 'One column', 'marianne' ), 'one-column' => __( 'One column', 'marianne' ),
@ -239,6 +239,20 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
'live' => false, '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( $marianne_customizer_options[] = array(
'section' => 'marianne_global', 'section' => 'marianne_global',
'id' => 'page_width', 'id' => 'page_width',
@ -949,14 +963,15 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
'colors_link_hover' => 'blue', 'colors_link_hover' => 'blue',
// Global. // Global.
'marianne_global_layout' => 'one-column', 'marianne_global_layout' => 'one-column',
'marianne_global_sidebar_width' => 250, 'marianne_global_sidebar_width' => 250,
'marianne_global_page_width' => 480, 'marianne_global_sidebar_margin' => 50,
'marianne_global_images_expand' => false, 'marianne_global_page_width' => 480,
'marianne_global_font_family' => 'sans-serif', 'marianne_global_images_expand' => false,
'marianne_global_font_size' => 100, 'marianne_global_font_family' => 'sans-serif',
'marianne_global_font_smooth' => false, 'marianne_global_font_size' => 100,
'marianne_global_text_shadow' => false, 'marianne_global_font_smooth' => false,
'marianne_global_text_shadow' => false,
// Header Settings. // Header Settings.
'marianne_header_align' => 'left', '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"> <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' ); ?> <?php dynamic_sidebar( 'widgets' ); ?>
</aside> </aside>

View file

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