commit every changes

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -38,6 +38,14 @@ export default class GridEditModal extends React.PureComponent {
     return cols;
   }
 
+  editBgCols() {
+    const cols = [];
+    for (let i = 0; i < 12; i++) {
+      cols.push(<div className="bg-dark grid-editable-col col-1"></div>);
+    }
+    return cols;
+  }
+
   render() {
     return (
       <Modal isOpen={this.state.show} toggle={this.cancel} size="xl">
@@ -45,7 +53,24 @@ export default class GridEditModal extends React.PureComponent {
           Edit Grid
         </ModalHeader>
         <ModalBody>
-          <div className="container">
+          <div className="container bg-wrapper p-4">
+            <div className="row">
+              <div className="col-3">
+                <h5>Phone</h5>
+                <div className="device-container"></div>
+                <h5>Tablet</h5>
+                <div className="device-container"></div>
+                <h5>Desktop</h5>
+                <div className="device-container"></div>
+                <h5>Large Desktop</h5>
+                <div className="device-container"></div>
+              </div>
+              <div className="col-9">
+                <div className="row h-100 flex-nowrap overflow-auto">{this.showBgCols()}</div>
+              </div>
+            </div>
+          </div>
+          <div className="container edit-wrapper p-4">
             <div className="row">
               <div className="col-3">
                 <h5>Phone</h5>
@@ -57,9 +82,14 @@ export default class GridEditModal extends React.PureComponent {
                 <h5>Large Desktop</h5>
                 <div className="device-container"></div>
               </div>
-              <div className="row col-9 flex-nowrap overflow-auto">{this.showBgCols()}</div>
+              <div className="col-9">
+                <div className="row h-100 flex-nowrap overflow-auto">
+                  {this.editBgCols()}
+                </div>
+              </div>
             </div>
           </div>
+
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
           <div className="ml-auto">

src/client/styles/scss/_on-edit.scss

@@ -317,6 +317,24 @@ body.on-edit {
 }
 
 .grid-bg-col {
-  border-right: 5px solid white;
-  border-left: 5px solid white;
+  border-right: 5px solid yellow;
+  border-left: 5px solid yellow;
+}
+
+.grid-editable-col {
+  border-right: 5px solid purple;
+  border-left: 5px solid purple;
+}
+
+.bg-wrapper {
+  position: absolute;
+}
+
+.edit-wrapper {
+  position: relative;
+  opacity: 0.5;
+}
+
+.modal-body {
+  padding: 0 !important;
 }