diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 986665b..8916a7b 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/src/assets/scss/components/flowBuilder.scss @@ -44,24 +44,39 @@ display: flex; flex-direction: column; width: max-content; + margin: 0 auto; } .flowContainer__level { display: flex; justify-content: center; gap: 20px; - padding: 0 0 60px; /*min-height: 240px;*/ /*margin: 0 auto;*/ + + &.initialLevel { + padding: 0 0 30px; + } + + &.intermediateLevel, &.finalLevel { + padding: 30px 0 30px; + } + + &.intermediateLevel { + border-bottom: 1px solid var(--table-border-color); + border-top: 1px solid var(--table-border-color); + } } .flowContainer__flowItem { + position: relative; display: flex; flex-direction: column; width: 280px; min-width: 280px; padding: 15px; - border: 1px solid var(--panel-content-borderColor); + border: 1px solid var(--table-border-color); + z-index: 9; .flowContainer__flowItemInner > label { border-color: #757575; @@ -76,6 +91,44 @@ color: white; } } + + &.levelForms, &.initialForm { + &:after { + position: absolute; + bottom: -31px; + left: 50%; + content: ''; + width: 1px; + height: 31px; + background-color: var(--table-border-color); + } + } + + &.levelForms, &.finalForm { + &:before { + position: absolute; + top: -31px; + left: 50%; + content: ''; + width: 1px; + height: 31px; + background-color: var(--table-border-color); + } + } +} + +.flowContainer__levelMaskStart, .flowContainer__levelMaskEnd { + position: absolute; + width: 140px; + height: 100% ; + top: -1px; + background-color: white; +} +.flowContainer__levelMaskStart { + left: 0; +} +.flowContainer__levelMaskEnd { + right: 0; } .flowContainer__flowItemInner { diff --git a/src/assets/scss/components/topBar.scss b/src/assets/scss/components/topBar.scss index fc73015..bb9c86d 100644 --- a/src/assets/scss/components/topBar.scss +++ b/src/assets/scss/components/topBar.scss @@ -72,4 +72,10 @@ i { margin-right: 7px; } +} + +@media (max-width: 500px) { + .topBar__endContent { + flex-wrap: wrap; + } } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 5a1b6a0..0f7ffc6 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -210,6 +210,7 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null; if (field) { const options = head(field.settings.filter(o => o.name === 'options')); + console.log('suboptions1', options.value) setMainFieldSubOptions(options.value); } } @@ -291,6 +292,7 @@ const BandoFlowEdit = () => { { label: __('Nessun scelta', 'gepafin'), name: '' }, ...options.value ] + console.log('suboptions2', suboptions) setMainFieldSubOptions(suboptions); const data = { formId: parseInt(initialForm), @@ -333,6 +335,7 @@ const BandoFlowEdit = () => { } storeSet.main.flowData([]); setChosenMainField(''); + console.log('suboptions3', [], initialForm) setMainFieldSubOptions([]); setChosenMainFieldOptions([]); const flowForms = storeGet.main.flowForms(); @@ -411,8 +414,7 @@ const BandoFlowEdit = () => { const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - //console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges); - //console.log('forms:', initialForm, finalForm, chosenMainField, chosenMainFieldOptions) + console.log('mainFieldSuboptions', mainFieldSuboptions); return (