Commit e4580971 authored by lucha's avatar lucha

[auto] theme: vanilla 2.2.0

parent 10b7ab36
......@@ -43,6 +43,33 @@
} );
} );
// Navbar
api( 'navbar_transparent_at_front_page', function( value ) {
value.bind( function( to ) {
var $body = $( 'body' );
if ( $body.hasClass( 'home' ) ) {
if ( to ) {
$body.addClass( 'navbar-transparent' );
} else {
$body.removeClass( 'navbar-transparent' );
}
}
} );
} );
api( 'navbar_transparent_at_post_with_thumbnail', function( value ) {
value.bind( function( to ) {
var $body = $( 'body' );
if ( $body.hasClass( 'singular-with-thumbnail' ) ) {
if ( to ) {
$body.addClass( 'navbar-transparent' );
} else {
$body.removeClass( 'navbar-transparent' );
}
}
} );
} );
// Page layouts.
api( 'posts_layout_on_front_page', function( value ) {
value.bind( function( to ) {
......@@ -84,7 +111,6 @@
if ( 'blank' === to ) {
$( '.custom-header__branding' ).css({
clip: 'rect(1px, 1px, 1px, 1px)',
position: 'absolute'
});
// Add class for different logo styles if title and description are hidden.
$( 'body' ).addClass( 'title-tagline-hidden' );
......@@ -94,10 +120,9 @@
if ( ! to.length ) {
$( '#vanilla-custom-header-styles' ).remove();
}
// $( '.custom-header__branding' ).css({
// clip: 'auto',
// position: 'relative'
// });
$( '.custom-header__branding' ).css({
clip: 'auto',
});
$( '.custom-header' ).css({
color: to
});
......
import $ from 'jquery';
import _ from 'underscore';
import Drawer from './Drawer';
import HeaderClassController from './AppLayout/HeaderClassController';
import HeaderEscaper from './AppLayout/HeaderEscaper';
......@@ -50,13 +51,25 @@ $(function() {
$(function() {
let $window = $(window);
let $appLayout = $(".app-layout");
$(window).on( 'load resize', () => {
let $navbar = $('.navbar');
$window.on( 'load resize', () => {
$appLayout.find(".app-layout__header").removeClass("app-layout__header--static");
} );
new HeaderClassController( $appLayout, "app-layout__header--fixed", 46 );
new HeaderEscaper( $appLayout, "app-layout__header--escape", 64 );
new HeaderEscaper( $appLayout, "app-layout__header--escape", 128 );
new ContentSpacer( $appLayout );
$window.on( 'scroll resize', _.throttle(function(){
if( $window.scrollTop() > 64 ) {
$navbar.addClass( 'navbar--opaque' );
}
else {
$navbar.removeClass( 'navbar--opaque' );
}
}, 1 ) );
});
......@@ -75,4 +75,5 @@ button {
cursor: pointer;
user-select: none;
background-image: none;
border-radius: 0
}
.content-area {
position relative
background-color: inherit
}
\ No newline at end of file
background: inherit
}
......@@ -39,11 +39,19 @@
padding: 0;
&::before {
display none;
display: none;
}
}
&__content {
gutter( margin-bottom );
}
&__content-body {
&::after {
content: '';
clear: both;
display: block;
}
}
}
......@@ -7,7 +7,6 @@ $grid-gutter ?= 20px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
&-item {
margin: 0;
......@@ -16,9 +15,11 @@ $grid-gutter ?= 20px;
flex-grow: 0;
flex-shrink: 0;
padding: ($grid-gutter / 2);
width: 100%;
}
&-icon {
padding: 8px;
img {
display: block;
margin: 0 auto;
......@@ -34,6 +35,22 @@ $grid-gutter ?= 20px;
flex-basis: $width;
}
&.gallery-columns-1 &-item {
gallery-item-width(percentage(1 / 1));
}
&.gallery-columns-2 &-item {
gallery-item-width(percentage(1 / 2));
}
&.gallery-columns-3 &-item {
gallery-item-width(percentage(1 / 2));
}
&-item {
gallery-item-width(percentage(1 / 3));
}
@media $medium-up {
for $i in (1..9) {
&.gallery-columns-{$i} &-item {
......
$container-gutter ?= 16px;
$container-max-width ?= 1200px;
.navbar {
display: flex;
flex: 100% 1 0;
justify-content: space-between;
align-items: center;
padding-top: 16px;
padding-bottom: 16px;
box-shadow:
0 1px 2px 0 rgba(51, 51, 51, .14),
0 3px 1px -2px rgba(51, 51, 51, .2),
0 0px 5px 0 rgba(51, 51, 51, .12);
&__container {
display: flex;
flex: 100% 1 0;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
margin: 0 auto;
padding: 0 $container-gutter;
max-width: $container-max-width;
gutter( padding-left );
gutter( padding-right );
}
&__branding {
//width: 48px;
......@@ -58,11 +76,40 @@
&__drawer-button {
white-space: nowrap;
order: 20;
padding: 8px;
margin: -16px;
padding 23px;
border 1px dotted;
border-color: transparent;
color: inherit;
font-size: 1.6rem;
border: none;
font-weight: normal;
outline: none;
box-sizing: border-box;
background-color: transparent;
&:focus {
outline: none;
border-radius: 0;
border-color: currentColor;
}
}
}
\ No newline at end of file
}
.navbar-transparent {
.navbar {
transition-delay: .3s;
transition-duration: .3s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-property: color, background, box-shadow;
}
//transparent style
.navbar:not(.navbar--opaque) {
box-shadow: none;
transition-delay: 0s;
background-color: transparent !important;
}
}
.pagination {
clear both;
margin: 3em 0;
text-align: center;
......@@ -55,4 +55,4 @@
border-bottom 3px solid currentColor
}
}
\ No newline at end of file
}
......@@ -29,4 +29,18 @@
font-weight: normal;
font-size 1.2em;
}
}
\ No newline at end of file
}
.customize-partial-edit-shortcuts-shown .postlist {
.customize-partial-edit-shortcut button {
top: 0;
left: 0;
}
}
.postlist-style-block .customize-partial-edit-shortcuts-shown .postlist {
.customize-partial-edit-shortcut button {
top: 0;
left: 0;
}
}
......@@ -19,7 +19,7 @@
display: block;
padding: 1em;
text-decoration: none;
border-top: 1px solid rgba(0,0,0,.12);
border-top: 1px solid rgba(0,0,0,.08);
}
......@@ -102,4 +102,4 @@
}
\ No newline at end of file
}
......@@ -2,9 +2,9 @@
overflow: hidden;
position relative
background-color: inherit
border-top 1px solid rgba(128,128,128,0.2);
//border-top 1px solid rgba(128,128,128,0.2);
&__body {
gutter( padding-top );
}
}
\ No newline at end of file
}
$app-layout-use-escape = true;
.app-layout {
background-color: inherit;
background: inherit;
background-attachment fixed;
background-size: cover;
&__header {
background-color: #FFF;
-webkit-overflow-scrolling: touch;
position: fixed;
left: 0;
......@@ -36,35 +37,41 @@ $app-layout-use-escape = true;
}
z-index: 2;
pointer-events: visible;
overflow: hidden;
a,
button {
pointer-events: auto;
}
width: 100%;
box-shadow:
0 1px 2px 0 rgba(51, 51, 51, .14),
0 3px 1px -2px rgba(51, 51, 51, .2),
0 0px 5px 0 rgba(51, 51, 51, .12);
transition-delay: 0ms;
transition-duration: .24s;
transition-duration: .3s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-property: transform, height, box-shadow;
transition-property: transform, height;
}
.admin-bar &__spacer {
padding-top: 64px;
}
.navbar-transparent & {
&__spacer {
padding-top: 0 !important;
}
}
&__content {
box-sizing: border-box;
//flex-grow: 1;
background-color: inherit;
background: inherit;
}
& &__header {
if $app-layout-use-escape {
&--escape {
//transform: translateY(-100%);
transform: translateY(-100%);
}
}
......
......@@ -40,11 +40,13 @@ grid-sizer($size) {
}
@media $small-up {
for $cols in $colslist {
for $i in (1..$cols) {
&__u--small--{$i}_{$cols} {
$width = $i/$cols;
grid-sizer(percentage($width));
& {
for $cols in $colslist {
for $i in (1..$cols) {
&__u--small--{$i}_{$cols} {
$width = $i/$cols;
grid-sizer(percentage($width));
}
}
}
}
......@@ -52,22 +54,26 @@ grid-sizer($size) {
@media $medium-up {
for $cols in $colslist {
for $i in (1..$cols) {
&__u--medium--{$i}_{$cols} {
$width = $i/$cols;
grid-sizer(percentage($width));
& {
for $cols in $colslist {
for $i in (1..$cols) {
&__u--medium--{$i}_{$cols} {
$width = $i/$cols;
grid-sizer(percentage($width));
}
}
}
}
}
@media $large-up {
for $cols in $colslist {
for $i in (1..$cols) {
&__u--large--{$i}_{$cols} {
$width = $i/$cols;
grid-sizer(percentage($width));
& {
for $cols in $colslist {
for $i in (1..$cols) {
&__u--large--{$i}_{$cols} {
$width = $i/$cols;
grid-sizer(percentage($width));
}
}
}
}
......
This diff is collapsed.
......@@ -81,16 +81,6 @@ add_action( 'after_setup_theme', 'vanilla_content_width', 0 );
*/
function vanilla_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'The tail of site main area', 'vanilla' ),
'id' => 'site-main-tail-widget',
'description' => '',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h4 class="widget-title widget__title">',
'after_title' => '</h4>',
) );
register_sidebar( array(
'name' => esc_html__( 'Footer primary widget area', 'vanilla' ),
'id' => 'footer-primary-widget',
......@@ -121,6 +111,16 @@ function vanilla_widgets_init() {
'before_title' => '<h4 class="widget-title widget__title">',
'after_title' => '</h4>',
) );
register_sidebar( array(
'name' => esc_html__( 'The tail of site main area', 'vanilla' ),
'id' => 'site-main-tail-widget',
'description' => '',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h4 class="widget-title widget__title">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'vanilla_widgets_init' );
......
......@@ -25,22 +25,25 @@
<div id="page" class="site app-layout" data-app-layout-header=".app-layout__header" data-app-layout-spacer=".app-layout__spacer" data-app-layout-scroll-area="window">
<header class="app-layout__header <?php echo ( ! is_front_page() ) ? 'app-layout__header--static' : ''; ?>" aria-hidden="false" role="banner">
<div class="navbar container">
<div class="navbar__branding">
<div class="site-branding">
<div class="site-branding__logo"><?php the_custom_logo(); ?></div>
<?php if ( is_front_page() ) : ?>
<h1 class="site-branding__name site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-branding__name site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>
<div class="navbar">
<div class="navbar__container">
<div class="navbar__branding">
<div class="site-branding">
<div class="site-branding__logo"><?php the_custom_logo(); ?></div>
<?php if ( is_front_page() ) : ?>
<h1 class="site-branding__name site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-branding__name site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>
</div>
</div>
<button class="navbar__drawer-button" aria-controls="primary-menu" aria-expanded="false" >
<span class="hamburger-button"><span class="hamburger-button__bars"></span></span>
<span class="screen-reader-text">menu</span>
</button>
</div>
<button class="navbar__drawer-button" aria-controls="primary-menu" aria-expanded="false" >
<span class="hamburger-button"><span class="hamburger-button__bars"></span></span>
<span class="screen-reader-text">menu</span>
</button>
</div>
</header>
......
......@@ -26,13 +26,13 @@ function vanilla_get_customize_color_settings() {
),
'navbar_textcolor' => array(
'label' => __( 'Navigation bar text color', 'vanilla' ),
'selector' => '.app-layout__header',
'selector' => '.navbar',
'property' => 'color',
'default' => '#000000',
),
'navbar_background_color' => array(
'label' => __( 'Navigation bar background color', 'vanilla' ),
'selector' => '.app-layout__header',
'selector' => '.navbar',
'property' => 'background-color',
'default' => '#ffffff',
),
......@@ -50,7 +50,7 @@ function vanilla_get_customize_color_settings() {
),
'post_thumbnail_background_color' => array(
'label' => __( 'Post thumbnail background color', 'vanilla' ),
'selector' => '.post-thumbnail',
'selector' => '.post-thumbnail,.gallery-icon',
'property' => 'background-color',
'default' => '#eeeeee',
),
......@@ -120,13 +120,32 @@ add_action( 'customize_register', 'vanilla_customize_register', 11 );
*
* @param WP_Customize_Manager $wp_customize The Customizer object.
*/
function vanilla_setup_theme_options_section( WP_Customize_Manager $wp_customize ) {
function vanilla_setup_theme_options_panel( WP_Customize_Manager $wp_customize ) {
$wp_customize->add_panel( 'theme_options', array(
'title' => __( 'Theme Options', 'vanilla' ),
'priority' => 130, // Before Additional CSS.
) );
vanilla_setup_theme_options_front_page_section( $wp_customize );
vanilla_setup_theme_options_navbar_section( $wp_customize );
}
add_action( 'customize_register', 'vanilla_setup_theme_options_panel', 12 );
/**
* Add front page panel section.
*
* @param WP_Customize_Manager $wp_customize The Customizer object.
*/
function vanilla_setup_theme_options_front_page_section( WP_Customize_Manager $wp_customize ) {
/**
* Theme options.
*/
$wp_customize->add_section( 'theme_options', array(
'title' => __( 'Theme Options', 'vanilla' ),
'priority' => 130, // Before Additional CSS.
$wp_customize->add_section( 'front_page', array(
'title' => __( 'Front Page', 'vanilla' ),
'panel' => 'theme_options',
) );
/**
......@@ -146,11 +165,12 @@ function vanilla_setup_theme_options_section( WP_Customize_Manager $wp_customize
'transport' => 'postMessage',
) );
/* @noinspection SqlNoDataSourceInspection */
$wp_customize->add_control( 'panel_' . $i, array(
/* translators: %d is the front page section number */
'label' => sprintf( __( 'Front Page Section %d Content', 'vanilla' ), $i ),
'description' => ( 1 !== $i ? '' : __( 'Select pages to feature in each area from the dropdowns. Add an image to a section by setting a featured image in the page editor. Empty sections will not be displayed.', 'vanilla' ) ),
'section' => 'theme_options',
'section' => 'front_page',
'type' => 'dropdown-pages',
'allow_addition' => true,
'active_callback' => 'vanilla_is_static_front_page',
......@@ -172,7 +192,7 @@ function vanilla_setup_theme_options_section( WP_Customize_Manager $wp_customize
$wp_customize->add_control( 'posts_layout_on_front_page', array(
'label' => __( 'Posts Layout on Front Page', 'vanilla' ),
'description' => __( 'Select style for posts list', 'vanilla' ),
'section' => 'theme_options',
'section' => 'front_page',
'type' => 'radio',
'choices' => array(
'list' => __( 'list', 'vanilla' ),
......@@ -180,10 +200,89 @@ function vanilla_setup_theme_options_section( WP_Customize_Manager $wp_customize
),
'active_callback' => 'vanilla_is_static_front_page',
) );
}
/**
* Add body class for customizer.
*
* @param String $classes body_class parts.
*
* @return array
*/
function vanilla_customizer_postlist_body_class( $classes ) {
if ( 'block' == get_theme_mod( 'posts_layout_on_front_page' ) ) {
$classes[] = 'postlist-style-block';
} else {
$classes[] = 'postlist-style-list';
}
return $classes;
}
add_filter( 'body_class', 'vanilla_customizer_postlist_body_class' );
/**
* Add Navbar section.
*
* @param WP_Customize_Manager $wp_customize The Customizer object.
*/
function vanilla_setup_theme_options_navbar_section( WP_Customize_Manager $wp_customize ) {
$wp_customize->add_section( 'navbar', array(
'title' => __( 'Navbar', 'vanilla' ),
'panel' => 'theme_options',
) );
$wp_customize->add_setting( 'navbar_transparent_at_front_page', array(
'default' => 0,
'sanitize_callback' => 'absint',
'transport' => 'postMessage',
) );
$wp_customize->add_control( 'navbar_transparent_at_front_page', array(
'label' => __( 'Transparent Navbar at Front Page', 'vanilla' ),
'section' => 'navbar',
'type' => 'checkbox',
) );
$wp_customize->add_setting( 'navbar_transparent_at_post_with_thumbnail',