Fix block chooser going under the sidebar; Add icon for full-width co…

…lumn layout
eea · Oct 9, 2020 · 1517b37 · 1517b37
1 parent 7fcc967
commit 1517b37
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/src/ColumnsBlock/ColumnVariations.jsx b/src/ColumnsBlock/ColumnVariations.jsx
@@ -6,11 +6,11 @@ export default ({ data, onChange, children, variants }) => {
   return (
     <Segment>
       <h4>Select layout:</h4>
-      <Card.Group centered itemsPerRow={6}>
+      <Card.Group centered itemsPerRow={7}>
         {variants.map(({ icon, defaultData, title }, index) => (
           <Card key={index} onClick={() => onChange(defaultData)}>
             <Card.Content>
-              <Icon name={icon} size="45" />
+              <Icon name={icon} size="55" />
               {title ? <p>{title}</p> : ''}
             </Card.Content>
           </Card>

diff --git a/src/ColumnsBlock/icons/full-column.svg b/src/ColumnsBlock/icons/full-column.svg
diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -6,6 +6,12 @@
     // }
   }
 
+  .block-column .ui.block.inner {
+    .block {
+      margin-bottom: 0;
+    }
+  }
+
   .column-grid {
     margin-left: -0.2rem!important;
     margin-right: -0.2rem!important;
@@ -107,10 +113,18 @@
   margin-bottom: 8px;
   position: absolute;
   margin-top: -34px;
-  z-index: 10;
+  z-index: 160;
   right: 0px;
 
-  .ui.basic.button {
+  .wrapper-column-block {
+    > .ui.basic.button {
+      &:hover {
+        background-color: transparent!important;
+      }
+    }
+  }
+
+  >.ui.basic.button {
     &:hover {
       background-color: transparent!important;
     }

diff --git a/src/grid.js b/src/grid.js
@@ -4,6 +4,7 @@ import iconC from './ColumnsBlock/icons/one-third-right.svg';
 import iconD from './ColumnsBlock/icons/three-third-columns.svg';
 import iconE from './ColumnsBlock/icons/three-columns.svg';
 import iconF from './ColumnsBlock/icons/four-quarter-columns.svg';
+import iconG from './ColumnsBlock/icons/full-column.svg';
 
 export const gridSizes = {
   full: {
@@ -93,7 +94,7 @@ export const variants = [
     title: '25 / 25 / 25 / 25',
   },
   {
-    icon: iconF,
+    icon: iconG,
     defaultData: {
       gridSize: 12,
       gridCols: ['full'],