Merge pull request #2458 from weseek/imprv/gw2666-modal-style

Imprv/gw2666 modal style

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

@@ -30,14 +30,36 @@ export default class GridEditModal extends React.PureComponent {
     this.hide();
   }
 
-  render() {
+  showBgCols() {
+    const cols = [];
+    for (let i = 0; i < 12; i++) {
+      cols.push(<div className="bg-light grid-bg-col col-1"></div>);
+    }
+    return cols;
+  }
 
+  render() {
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel}>
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl">
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           Edit Grid
         </ModalHeader>
         <ModalBody>
+          <div className="container">
+            <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="row col-9 flex-nowrap overflow-auto">{this.showBgCols()}</div>
+            </div>
+          </div>
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
           <div className="ml-auto">

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

@@ -308,3 +308,15 @@ body.on-edit {
     border-bottom: 5px solid #ccc;
   }
 }
+
+/*
+ Grid Edit Modal
+*/
+.device-container {
+  height: 135px;
+}
+
+.grid-bg-col {
+  border-right: 5px solid white;
+  border-left: 5px solid white;
+}