diff --git a/css/UserForm.css b/css/UserForm.css index e9d0c47..8f018eb 100644 --- a/css/UserForm.css +++ b/css/UserForm.css @@ -19,12 +19,13 @@ display: inline-block; list-style-type: none; } -.userform-progress .step-button-wrapper.current .step-button-jump { - background: #666; +.userform-progress .step-button-wrapper.viewed .step-button-jump { + opacity: 1; } .userform-progress .step-button-jump { position: absolute; top: 0; + opacity: .7; } .step-navigation .step-buttons { @@ -40,3 +41,17 @@ width: 100%; max-width: 100%; } + +.userformsgroup { + border: 1px solid #ccc; + border-radius: 4px; + padding: 8px; + margin-top: 12px; + margin-bottom: 12px; +} +.userformsgroup legend { + padding-left: 4px; + padding-right: 4px; + border: 0; + width: auto; +} diff --git a/css/UserForm_cms.css b/css/UserForm_cms.css index 00a77a0..1fa72a5 100644 --- a/css/UserForm_cms.css +++ b/css/UserForm_cms.css @@ -6,7 +6,7 @@ } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td { border-right-width: 0; - border-bottom: 1px solid #EEE; + border-top: 1px solid #EEE; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td:last-child { border-right-width: 1px; @@ -15,16 +15,20 @@ background: #f2f9fd; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup td { - border-bottom: 1px solid #CCC; + border-bottom: 0; + border-top: 1px solid #eee; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle { background: #BEE0F8; + border-top: 0; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .handle { background: #99CEF4; + border-top: 0; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .handle { background: #89BEF4; + border-top: 0; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover { background: #dae2e7; @@ -34,27 +38,30 @@ color: black; font-size: 1.1em; } +.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] td { + border-top: 1px solid #a6b6c1; +} +.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] + .ss-gridfield-item td { + border-top: 1px solid #dae2e7; +} +.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] + .ss-gridfield-item[data-class='EditableFieldGroup'] td { + border-top: 1px solid #a8d7f5; +} .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] td { - border-top: 1px inset #c9e6f9; -} -.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'].inFieldGroup-level-2 td { - border-top-color: #a8d7f5; -} -.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'].inFieldGroup-level-3 td { - border-top-color: #94cef3; + border-top: 1px solid #a8d7f5; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] label { font-weight: bold; color: #444; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] td { - border-bottom: 1px outset #c9e6f9; + border-bottom: 1px solid #a8d7f5; } -.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-2 td { - border-bottom-color: #a8d7f5; +.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] { + border-top: 0; } -.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-3 td { - border-bottom-color: #94cef3; +.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] .col-buttons .action { + display: none; } .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label { color: #777; diff --git a/docs/en/_images/fieldgroups.png b/docs/en/_images/fieldgroups.png new file mode 100644 index 0000000..c6caa35 Binary files /dev/null and b/docs/en/_images/fieldgroups.png differ diff --git a/docs/en/user-documentation.md b/docs/en/user-documentation.md index 744b42d..c734a99 100644 --- a/docs/en/user-documentation.md +++ b/docs/en/user-documentation.md @@ -177,15 +177,14 @@ to determine the size and the number of rows in a text field. To create a multi-page form, simply click the 'Add Page Break' button. This will create a page break field which is used to create a new page in the form. You can drag and drop this page break to separate form fields at the desired location. + ![Multi-page forms](_images/multi-page-forms.png) ## Adding fieldgroups Creating fieldgroups is as simple as clicking the 'Add fieldgroup' button, this create two 'markers' which act as the beginning/end for the fieldgroup. Any fields place between these two markers will be automatically included within the fieldgroup. - + +![Adding fieldgroups](_images/fieldgroups.png) ## Viewing form submissions diff --git a/javascript/UserForm.js b/javascript/UserForm.js index 112f092..2525699 100644 --- a/javascript/UserForm.js +++ b/javascript/UserForm.js @@ -431,14 +431,13 @@ jQuery(function ($) { buttonOffset = -1 * ($button.innerWidth() / 2); $button.css({left: leftPercent, marginLeft: buttonOffset}); - + // First and last buttons are kept within userform-progress container if (index === self.$jsAlign.length - 1) { $button.css({marginLeft: buttonOffset * 2}); } else if (index === 0) { $button.css({marginLeft: 0}); } - }); this.update(1); diff --git a/scss/UserForm.scss b/scss/UserForm.scss index 64d4b01..fc56d45 100644 --- a/scss/UserForm.scss +++ b/scss/UserForm.scss @@ -24,16 +24,15 @@ display: inline-block; list-style-type: none; - &.current { - .step-button-jump { - background: #666; - } + &.viewed .step-button-jump { + opacity: 1; } } .step-button-jump { position: absolute; top: 0; + opacity: .7; } } @@ -53,3 +52,18 @@ width: 100%; max-width: 100%; } + +.userformsgroup { + border: 1px solid #ccc; + border-radius: 4px; + padding: 8px; + margin-top: 12px; + margin-bottom: 12px; + + legend { + padding-left: 4px; + padding-right: 4px; + border: 0; + width: auto; + } +} diff --git a/scss/UserForm_cms.scss b/scss/UserForm_cms.scss index f780fc9..ca1e862 100644 --- a/scss/UserForm_cms.scss +++ b/scss/UserForm_cms.scss @@ -3,12 +3,10 @@ */ .cms { - .uf-field-editor { // Row styles table.ss-gridfield-table { - // Standard rows .ss-gridfield-item { &, &:hover { @@ -17,7 +15,7 @@ td { border-right-width: 0; - border-bottom: 1px solid #EEE; + border-top: 1px solid #EEE; &:last-child { border-right-width: 1px; @@ -31,24 +29,26 @@ } td { - // border style for darker background - border-bottom: 1px solid #CCC; + border-bottom: 0; + border-top: 1px solid #eee; } .col-reorder, .handle { - // level 1 background: #BEE0F8; + border-top: 0; } &.inFieldGroup-level-2 { .col-reorder, .handle { background: #99CEF4; + border-top: 0; } } &.inFieldGroup-level-3 { .col-reorder, .handle { background: #89BEF4; + border-top: 0; } } } @@ -63,19 +63,23 @@ color: black; font-size: 1.1em; } + + td { + border-top: 1px solid #a6b6c1; + } + + + .ss-gridfield-item td { + border-top: 1px solid #dae2e7; + } + + + .ss-gridfield-item[data-class='EditableFieldGroup'] td { + border-top: 1px solid #a8d7f5; + } } .ss-gridfield-item[data-class='EditableFieldGroup'] { td { - border-top: 1px inset #c9e6f9; - } - - &.inFieldGroup-level-2 td { - border-top-color: #a8d7f5; - } - - &.inFieldGroup-level-3 td { - border-top-color: #94cef3; + border-top: 1px solid #a8d7f5; } label { @@ -86,15 +90,15 @@ .ss-gridfield-item[data-class='EditableFieldGroupEnd'] { td { - border-bottom: 1px outset #c9e6f9; + border-bottom: 1px solid #a8d7f5; } - - &.inFieldGroup-level-2 td { - border-bottom-color: #a8d7f5; + + + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] { + border-top: 0; } - - &.inFieldGroup-level-3 td { - border-bottom-color: #94cef3; + + .col-buttons .action{ + display: none; } label {