Merge pull request #16 from Voog/014-two-cols-on-commonpage

Allow selecting 50-50 split columns on Common page

Author: PeeterPaal

components/block.tpl

@@ -66,7 +66,7 @@
 
 {%- if editmode or block_has_content %}
   <div
-    class="block-wrapper{% if wrapper_class %} {{ wrapper_class }}{% endif %}"
+    class="block-wrapper{% if layout_name == 'split_50_50_full' %} block-wrapper-split{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}"
     data-block-key="{{ id }}"
   >
     {%- if editmode %}

components/template-settings-json.tpl

@@ -50,6 +50,13 @@
       "value": {
         "content_areas": "2"
       }
+    },
+    {
+      "key": "split_50_50_full",
+      "value": {
+        "content_areas": "2",
+        "separate_bg_pickers": true
+      }
     }
   ],
   "categories_page_block_layouts": [

sources/stylesheets/components/_block.scss

@@ -2,6 +2,11 @@
 .category-blocks {
   position: relative;
 
+  &.block-wrapper-split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
   .block-edit-buttons {
     width: 100%;
     height: 100%;
@@ -77,11 +82,6 @@
   }
 }
 
-.category-blocks .block-wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
 .block {
   min-height: calc(100vh - 128px);
   padding: 64px;
@@ -403,7 +403,7 @@
     }
   }
 
-  .category-blocks .block-wrapper {
+  .block-wrapper.block-wrapper-split {
     grid-template-columns: 1fr;
   }
 }

stylesheets/main.css

@@ -3,6 +3,11 @@
 .category-blocks {
   position: relative;
 }
+.block-wrapper.block-wrapper-split,
+.category-blocks.block-wrapper-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
 .block-wrapper .block-edit-buttons,
 .category-blocks .block-edit-buttons {
   width: 100%;
@@ -72,11 +77,6 @@
   display: none;
 }
 
-.category-blocks .block-wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
 .block {
   min-height: calc(100vh - 128px);
   padding: 64px;
@@ -322,7 +322,7 @@
     order: 1;
     height: unset;
   }
-  .category-blocks .block-wrapper {
+  .block-wrapper.block-wrapper-split {
     grid-template-columns: 1fr;
   }
 }