Skip to content

Commit

Permalink
#52 Adding the ability to center single columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronware
aaronware committed May 16, 2018
1 parent 3996d74 commit 22c2f9e
Show file tree
Hide file tree
Showing 14 changed files with 525 additions and 203 deletions.
2 changes: 1 addition & 1 deletion admin/controls.php
View file
Expand Up @@ -23,7 +23,7 @@
?>
<ul class="inline-block-list space-left">
<li><span class="spinner mesh-reorder-spinner"></span></li>
<?php do_action( 'mesh_controls_before' ); ?>
<?php do_action( 'mesh_controls_before' ); ?>
<li><a href="#" class="mesh-section-reorder plain-link"><?php esc_html_e( 'Reorder Sections', 'mesh' ); ?></a></li>
<li><a href="#" class="mesh-section-expand plain-link"><?php esc_html_e( 'Expand All', 'mesh' ); ?></a></li>
<li><a href="#" class="mesh-section-collapse plain-link"><?php esc_html_e( 'Collapse All', 'mesh' ); ?></a></li>
Expand Down
80 changes: 61 additions & 19 deletions admin/section-blocks.php
View file
Expand Up @@ -15,30 +15,40 @@
$mesh_controls = new Mesh_Controls();
$block_settings = $mesh_controls->get_block_settings();

?>
<div class="mesh-row">
<?php
global $post;
global $post;

$reference_template = has_term( 'reference', 'mesh_template_types', $post );

if ( ! $reference_template ) {
include LINCHPIN_MESH___PLUGIN_DIR . 'admin/section-column-resize.php';
}

$reference_template = has_term( 'reference', 'mesh_template_types', $post );
// If the template doesn't have any blocks make sure it has 1.
if ( ! $section_blocks = (int) $templates[ $selected_template ]['blocks'] ) {
$section_blocks = 1;
$multiple_child_blocks_class = '';
} else {
$multiple_child_blocks_class = ' multiple-blocks';
}

if ( ! $reference_template ) {
include LINCHPIN_MESH___PLUGIN_DIR . 'admin/section-column-resize.php';
}
if ( 1 === $section_blocks ) {
$multiple_child_blocks_class = '';
} else {
$multiple_child_blocks_class = ' multiple-blocks';
}

// If the template doesn't have any blocks make sure it has 1.
if ( ! $section_blocks = (int) $templates[ $selected_template ]['blocks'] ) {
$section_blocks = 1;
}
$offsets_available = 9;

$offsets_available = 9;
$default_block_columns = $block_settings['max_columns'] / $section_blocks;

$default_block_columns = $block_settings['max_columns'] / $section_blocks;
// Loop through the blocks needed for this template.
$block_increment = 0;

// Loop through the blocks needed for this template.
$block_increment = 0;
$remaining_columns = $block_settings['max_columns'];

$remaining_columns = $block_settings['max_columns'];
?>
<div class="mesh-row<?php echo esc_attr( $multiple_child_blocks_class ); ?>" data-section-blocks="<?php echo esc_attr( $section_blocks ); ?>">
<?php

while ( $block_increment < $section_blocks ) :

Expand Down Expand Up @@ -99,20 +109,52 @@
</div>

<div class="mesh-columns-12 mesh-block-meta-dropdown mesh-block-meta-dropdown-<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?> hide">
<div class="left mesh-columns-12">
<div class="left mesh-columns-9">
<?php mesh_block_controls( $blocks[ $block_increment ], $section_blocks ); ?>
</div>
<div class="mesh-columns-3 mesh-table">
<div class="mesh-row mesh-table-footer">
<?php
if ( ! has_term( 'reference', 'mesh_template_types', $post ) ) :

$featured_image_id = get_post_thumbnail_id( $blocks[ $block_increment ]->ID );
$section_background_class = 'mesh-section-background';
$section_background_class = ( ! empty( $featured_image_id ) ) ? $section_background_class . ' has-background-set' : $section_background_class;
?>

<div class="<?php echo esc_attr( $section_background_class ); ?>">
<div class="choose-image">
<?php if ( empty( $featured_image_id ) ) : ?>
<a class="mesh-featured-image-choose"><?php esc_attr_e( 'Set Background Image', 'mesh' ); ?></a>
<?php else : ?>
<?php
$featured_image = wp_get_attachment_image_src( $featured_image_id, array( 160, 60 ) );
?>
<a class="mesh-featured-image-choose right"
data-mesh-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"><img
src="<?php echo esc_attr( $featured_image[ 0 ] ); ?>"/></a>
<a class="mesh-featured-image-trash dashicons-before dashicons-dismiss"
data-mesh-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"></a>
<?php endif; ?>
<input type="hidden"
name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][blocks][<?php echo esc_attr( $blocks[ $block_increment ]->ID ); ?>][<?php echo esc_attr( 'featured_image' ); ?>]"
value="<?php echo esc_attr( $featured_image_id ); ?>"/>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>

<?php
$block_content_classes = array(
'block-content',
'mesh-has-offset',
);

if ( 4 !== $section_blocks && $block_offset ) {
$block_content_classes[] = 'mesh-has-offset';
$block_content_classes[] = 'mesh-offset-' . $block_offset;
}
?>
Expand Down
48 changes: 28 additions & 20 deletions admin/section-controls.php
View file
Expand Up @@ -22,10 +22,13 @@
<?php endif; ?>
</div>

<a href="#" class="slide-toggle-element slide-toggle-meta-dropdown mesh-more-section-options" data-toggle=".mesh-section-meta-dropdown-<?php echo esc_attr( $section->ID ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'More Options', 'mesh' ); ?></span></a>
<a href="#" class="slide-toggle-element slide-toggle-meta-dropdown mesh-more-section-options"
data-toggle=".mesh-section-meta-dropdown-<?php echo esc_attr( $section->ID ); ?>"><span
class="screen-reader-text"><?php esc_html_e( 'More Options', 'mesh' ); ?></span></a>
</div>

<div class="mesh-section-meta-dropdown mesh-section-meta-dropdown-<?php echo esc_attr( $section->ID ); ?> mesh-row hide">

<div class="mesh-columns-9 mesh-table">
<div class="mesh-row mesh-table-footer">
<?php
Expand All @@ -36,39 +39,44 @@
*/

if ( ! has_term( 'reference', 'mesh_template_types', $post ) ) :
?>
<?php mesh_section_controls( $section, $blocks, false ); ?>
?>
<?php mesh_section_controls( $section, $blocks, false ); ?>
<?php endif; ?>
</div>
</div>

<div class="mesh-columns-3 mesh-table">
<div class="mesh-row mesh-table-footer">
<div class="mesh-columns-3 mesh-table">
<div class="mesh-row mesh-table-footer">
<?php
if ( ! has_term( 'reference', 'mesh_template_types', $post ) ) : ?>
if ( ! has_term( 'reference', 'mesh_template_types', $post ) ) :

<?php
$featured_image_id = get_post_thumbnail_id( $section->ID );
$section_background_class = 'mesh-section-background';
$section_background_class = ( ! empty( $featured_image_id ) ) ? $section_background_class . ' has-background-set' : $section_background_class;
?>
?>

<div class="<?php esc_attr_e( $section_background_class ); ?>">
<div class="choose-image">
<div class="<?php echo esc_attr( $section_background_class ); ?>">
<div class="choose-image">
<?php if ( empty( $featured_image_id ) ) : ?>
<a class="mesh-featured-image-choose"><?php esc_attr_e( 'Set Background Image', 'mesh' ); ?></a>
<a class="mesh-featured-image-choose"><?php esc_attr_e( 'Set Background Image', 'mesh' ); ?></a>
<?php else : ?>
<?php $featured_image = wp_get_attachment_image_src( $featured_image_id, array( 160, 60 ) ); ?>
<a class="mesh-featured-image-choose right" data-mesh-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"><img src="<?php echo esc_attr( $featured_image[0] ); ?>" /></a>
<a class="mesh-featured-image-trash dashicons-before dashicons-dismiss" data-mesh-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"></a>
<?php
$featured_image = wp_get_attachment_image_src( $featured_image_id, array( 160, 60 ) );
?>
<a class="mesh-featured-image-choose right"
data-mesh-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"><img
src="<?php echo esc_attr( $featured_image[ 0 ] ); ?>"/></a>
<a class="mesh-featured-image-trash dashicons-before dashicons-dismiss"
data-mesh-featured-image="<?php echo esc_attr( $featured_image_id ); ?>"></a>
<?php endif; ?>
<input type="hidden" name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][<?php echo esc_attr( 'featured_image' ); ?>]" value="<?php echo esc_attr( $featured_image_id ); ?>" />
</div>
</div>

<input type="hidden"
name="mesh-sections[<?php echo esc_attr( $section->ID ); ?>][<?php echo esc_attr( 'featured_image' ); ?>]"
value="<?php echo esc_attr( $featured_image_id ); ?>"/>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php

/**
Expand Down
2 changes: 1 addition & 1 deletion assets/css/admin-mesh.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/images/icon-columns.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/js/admin-mesh.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/admin-mesh.min.js
View file

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions assets/scss/mesh/_admin.scss
View file
Expand Up @@ -431,6 +431,16 @@
float: none;
}
.mesh-tab {
background-color: #f5f5f5;
border: 1px solid #dedede;
border-bottom: none;
color: #666;
line-height: 16px;
padding: 8px;
text-decoration: none;
}
// UPDATE Notification
.mesh-update-notice {
padding: 10px 38px;
Expand Down
4 changes: 4 additions & 0 deletions assets/scss/mesh/_block-grid.scss
View file
Expand Up @@ -19,6 +19,10 @@
float: left;
height: auto;
padding: 0 0.55556rem 1.11111rem;

&.hidden {
display:none;
}
}
}

Expand Down
5 changes: 5 additions & 0 deletions assets/scss/mesh/_structure.scss
View file
Expand Up @@ -645,6 +645,11 @@
&.notice {
margin: 5px -7px 0 -7px;
}

// Do not show column controls when dealing with multiple blocks
&.multiple-blocks .mesh-section-control-columns {
display:none;
}
}

.columns {
Expand Down

0 comments on commit 22c2f9e

Please sign in to comment.