more grid control improvements

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Fix: Removed google-plus from list of social networks.
 * Fix: Styling fixes for the header-search grid-part.
 * Fix: Size of video embeds.
+* Fix: Various improvements to the Grid control.
 
 ## 1.1.16
 

assets/css/customizer/gridd-grid-control.scss

@@ -13,6 +13,12 @@
 		display: grid;
 		grid-template-columns: 1fr 46px;
 		grid-gap: 7px;
+
+		&.editing-parts {
+			+.gridd-grid-part-move-helper {
+				display: block;
+			}
+		}
 	}
 
 	// The add/remove row/column buttons.
@@ -98,6 +104,14 @@
 		}
 	}
 
+	.gridd-grid-part-move-helper {
+		display: none;
+		margin-top: -20px;
+		padding: 5px 12px;
+		background: #fff;
+		border-left: 5px solid #46B450;
+	}
+
 	&.fixed-position {
 		position: fixed;
 		top: 19px;

assets/js/customizer-gridd-grid-control.js

@@ -299,7 +299,7 @@ wp.customize.controlConstructor.gridd_grid = wp.customize.Control.extend({
 				control.gridVal.gridTemplate.columns[ i ] = 'auto';
 				control.save();
 			}
-			container.append( '<input type="text" data-column-css="' + i + '" value="' + control.gridVal.gridTemplate.columns[ i ] + '"><span class="whatis">' + griddGridControl.l10n.whatis.columnWidth.replace( '%d', i + 1 ) + '</span>' );
+			container.append( '<input type="text" data-column-css="' + i + '" value="' + control.gridVal.gridTemplate.columns[ i ] + '">' );
 		}
 		container.css( 'grid-template-columns', 'repeat(' + control.gridVal.columns + ', 1fr)' );
 
@@ -329,7 +329,7 @@ wp.customize.controlConstructor.gridd_grid = wp.customize.Control.extend({
 				control.gridVal.gridTemplate.rows[ i ] = 'auto';
 				control.save();
 			}
-			container.append( '<input type="text" data-row-css="' + i + '" value="' + control.gridVal.gridTemplate.rows[ i ] + '"><span class="whatis">' + griddGridControl.l10n.whatis.rowHeight.replace( '%d', i + 1 ) + '</span>' );
+			container.append( '<input type="text" data-row-css="' + i + '" value="' + control.gridVal.gridTemplate.rows[ i ] + '">' );
 		}
 		container.css( 'grid-template-rows', 'repeat(' + control.gridVal.rows + ', 1fr)' );
 
@@ -405,11 +405,13 @@ wp.customize.controlConstructor.gridd_grid = wp.customize.Control.extend({
 		if ( control.editingPart ) {
 
 			control.container.find( '.gridd-grid-builder-grids' ).addClass( 'editing-parts' );
+			control.container.find( '.gridd-grid-builder-grids-wrapper' ).addClass( 'editing-parts' );
 
 			// Add .editing class to the preview in the grid.
 			control.container.find( '.grid-selected-part.selected-part-' + control.editingPart ).addClass( 'editing' );
 		} else {
 			control.container.find( '.gridd-grid-builder-grids' ).removeClass( 'editing-parts' );
+			control.container.find( '.gridd-grid-builder-grids-wrapper' ).removeClass( 'editing-parts' );
 		}
 
 		selectedContainer.css( 'grid-template-columns', 'repeat(' + control.gridVal.columns + ', 1fr)' );
@@ -574,6 +576,7 @@ wp.customize.controlConstructor.gridd_grid = wp.customize.Control.extend({
 			// Add .editing class to the preview in the grid.
 			control.container.find( '.grid-selected-part' ).removeClass( 'editing' );
 			control.container.find( '.gridd-grid-builder-grids' ).removeClass( 'editing-parts' );
+			control.container.find( '.gridd-grid-builder-grids-wrapper' ).removeClass( 'editing-parts' );
 
 			// Toggle class to hide the advanced options.
 			control.dragSelect.clearSelection();