Afform - use core flex styles

diff --git a/css/civicrm.css b/css/civicrm.css
index 519289821c46585722be4789082fec994770f8b8..b4d3a785a2ea79007a8061b8728a4526ea647559 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -36,6 +36,9 @@
 .crm-container .crm-flex-box > .crm-flex-4 {
   flex: 4;
 }
+.crm-container .crm-flex-box > .crm-flex-5 {
+  flex: 5;
+}
 
 .crm-container .crm-draggable {
   cursor: move;

diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css
index 3cc94c35b11b70c6efa7b0d09f89fb73673a1bce..ccacca1d671ecfbaa33ed9c385d67dc27bd1c848 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor.css
+++ b/ext/afform/admin/ang/afGuiEditor.css
@@ -1,14 +1,8 @@
-#afGuiEditor {
-  display: flex;
-}
-
 #afGuiEditor #afGuiEditor-palette {
-  flex: 1;
   margin-right: 5px;
 }
 
 #afGuiEditor #afGuiEditor-canvas {
-  flex: 1.5;
   margin-left: 5px;
 }
 
@@ -42,12 +36,9 @@
 }
 
 #afGuiEditor .af-gui-columns {
-  display: flex;
   position: relative;
-  flex-wrap: wrap;
 }
 #afGuiEditor .af-gui-columns > * {
-  flex: 1;
   min-width: 200px;
 }
 

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html
index 49a4208b1dd8f23d6fb9cb93ca121c9010b54c81..acd32c00562e140f6d9a8f58244a2773bcf5bb7a 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.html
@@ -1,4 +1,4 @@
-<div id="afGuiEditor">
-  <div id="afGuiEditor-palette" ng-include="'~/afGuiEditor/afGuiEditorPalette.html'"></div>
-  <div id="afGuiEditor-canvas" ng-include="'~/afGuiEditor/afGuiEditorCanvas.html'"></div>
+<div id="afGuiEditor" class="crm-flex-box">
+  <div id="afGuiEditor-palette" class="crm-flex-3" ng-include="'~/afGuiEditor/afGuiEditorPalette.html'"></div>
+  <div id="afGuiEditor-canvas" class="crm-flex-5" ng-include="'~/afGuiEditor/afGuiEditorCanvas.html'"></div>
 </div>

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
index 833f31be72634704ab263c851120a670f6403f62..f7c8e823573a44c98b78b04583dd7e2b59158067 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
@@ -1,4 +1,4 @@
-<div class="af-gui-columns">
+<div class="af-gui-columns crm-flex-box">
   <fieldset class="af-gui-entity-values">
     <legend>{{:: ts('Values:') }}</legend>
     <div class="form-inline" ng-if="getMeta().fields[fieldName]" ng-repeat="(fieldName, value) in $ctrl.entity.data">