Merge pull request #2549 from weseek/imprv/grid-division-menu-responsive

grid division menu responsive size

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

@@ -182,28 +182,26 @@ export default class GridEditModal extends React.PureComponent {
 function GridDivisionMenu() {
   const gridDivisions = geu.mappingAllGridDivisionPatterns;
   return (
-    <div className="container">
-      <div className="row">
-        {gridDivisions.map((gridDivion, i) => {
-          return (
-            <div className="col-md-4 text-center">
-              <h6 className="dropdown-header">{i + 2}分割</h6>
-              {gridDivion.map((gridOneDivision) => {
-                return (
-                  <a className="dropdown-item" href="#">
-                    <div className="row">
-                      {gridOneDivision.map((gtd) => {
-                        const className = `bg-info col-${gtd} border`;
-                        return <span className={className}>{gtd}</span>;
-                      })}
-                    </div>
-                  </a>
-                );
-              })}
-            </div>
-          );
-        })}
-      </div>
+    <div className="row">
+      {gridDivisions.map((gridDivion, i) => {
+        return (
+          <div className="col-md-4 text-center">
+            <h6 className="dropdown-header">{gridDivion.numberOfGridDivisions}分割</h6>
+            {gridDivion.mapping.map((gridOneDivision) => {
+              return (
+                <a className="dropdown-item" href="#">
+                  <div className="row">
+                    {gridOneDivision.map((gtd) => {
+                      const className = `bg-info col-${gtd} border`;
+                      return <span className={className}>{gtd}</span>;
+                    })}
+                  </div>
+                </a>
+              );
+            })}
+          </div>
+        );
+      })}
     </div>
   );
 }

src/client/js/components/PageEditor/GridEditorUtil.js

@@ -8,15 +8,18 @@ class GridEditorUtil {
     this.lineBeginPartOfGridRE = /^:::(\s.*)editable-row$/;
     this.lineEndPartOfGridRE = /^:::$/;
     this.mappingAllGridDivisionPatterns = [
-      [
-        [2, 10], [4, 8], [6, 6], [8, 4], [10, 2],
-      ],
-      [
-        [2, 5, 5], [5, 2, 5], [5, 5, 2], [4, 4, 4], [3, 3, 6], [3, 6, 3], [6, 3, 3],
-      ],
-      [
-        [2, 2, 4, 4], [4, 4, 2, 2], [2, 4, 2, 4], [4, 2, 4, 2], [3, 3, 3, 3], [2, 2, 2, 6], [6, 2, 2, 2],
-      ],
+      {
+        numberOfGridDivisions: 2,
+        mapping: [[2, 10], [4, 8], [6, 6], [8, 4], [10, 2]],
+      },
+      {
+        numberOfGridDivisions: 3,
+        mapping: [[2, 5, 5], [5, 2, 5], [5, 5, 2], [4, 4, 4], [3, 3, 6], [3, 6, 3], [6, 3, 3]],
+      },
+      {
+        numberOfGridDivisions: 4,
+        mapping: [[2, 2, 4, 4], [4, 4, 2, 2], [2, 4, 2, 4], [4, 2, 4, 2], [3, 3, 3, 3], [2, 2, 2, 6], [6, 2, 2, 2]],
+      },
     ];
     this.isInGridBlock = this.isInGridBlock.bind(this);
     this.replaceGridWithHtmlWithEditor = this.replaceGridWithHtmlWithEditor.bind(this);

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

@@ -325,7 +325,9 @@ body.on-edit {
   }
 
   .grid-division-menu {
-    //[TODO: responsive by gw-3244]
-    width: 1000px;
+    width: 60vw;
+    @include media-breakpoint-down(lg) {
+      width: 80vw;
+    }
   }
 }