tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-06-26 06:29:27 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #37 from scott1702/userform-styles

Browse Source 
clean up userform styles
This commit is contained in:
Damian Mooyman 2015-08-18 10:15:26 +12:00
commit 864ce0f5b7
7 changed files with 86 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/UserForm.css
View File

@ -19,12 +19,13 @@
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
} }
.userform-progress .step-button-wrapper.current .step-button-jump { .userform-progress .step-button-wrapper.viewed .step-button-jump {
background: #666; opacity: 1;
} }
.userform-progress .step-button-jump { .userform-progress .step-button-jump {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: .7;
} }
.step-navigation .step-buttons { .step-navigation .step-buttons {
@ -40,3 +41,17 @@
width: 100%; width: 100%;
max-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;
}

35
css/UserForm_cms.css
View File

@ -6,7 +6,7 @@
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td {
border-right-width: 0; 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 { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td:last-child {
border-right-width: 1px; border-right-width: 1px;
@ -15,16 +15,20 @@
background: #f2f9fd; background: #f2f9fd;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup td { .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 { .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; 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 { .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; 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 { .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; 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 { .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; background: #dae2e7;
@ -34,27 +38,30 @@
color: black; color: black;
font-size: 1.1em; 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 { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] td {
border-top: 1px inset #c9e6f9; border-top: 1px solid #a8d7f5;
}
.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;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] label { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] label {
font-weight: bold; font-weight: bold;
color: #444; color: #444;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] td { .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 { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
border-bottom-color: #a8d7f5; border-top: 0;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-3 td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] .col-buttons .action {
border-bottom-color: #94cef3; display: none;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label {
color: #777; color: #777;

BIN
docs/en/_images/fieldgroups.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

7
docs/en/user-documentation.md
View File

@ -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. 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. 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) ![Multi-page forms](_images/multi-page-forms.png)
## Adding fieldgroups ## 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. 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.
<!---
TODO: ![Adding fieldgroups](_images/fieldgroups.png)
Include screenshots of fieldgroups in action
-->
## Viewing form submissions ## Viewing form submissions

3
javascript/UserForm.js
View File

@ -431,14 +431,13 @@ jQuery(function ($) {
buttonOffset = -1 * ($button.innerWidth() / 2); buttonOffset = -1 * ($button.innerWidth() / 2);
$button.css({left: leftPercent, marginLeft: buttonOffset}); $button.css({left: leftPercent, marginLeft: buttonOffset});
// First and last buttons are kept within userform-progress container // First and last buttons are kept within userform-progress container
if (index === self.$jsAlign.length - 1) { if (index === self.$jsAlign.length - 1) {
$button.css({marginLeft: buttonOffset * 2}); $button.css({marginLeft: buttonOffset * 2});
} else if (index === 0) { } else if (index === 0) {
$button.css({marginLeft: 0}); $button.css({marginLeft: 0});
} }
}); });
this.update(1); this.update(1);

22
scss/UserForm.scss
View File

@ -24,16 +24,15 @@
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
&.current { &.viewed .step-button-jump {
.step-button-jump { opacity: 1;
background: #666;
}
} }
} }
.step-button-jump { .step-button-jump {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: .7;
} }
} }
@ -53,3 +52,18 @@
width: 100%; width: 100%;
max-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;
}
}

48
scss/UserForm_cms.scss
View File

@ -3,12 +3,10 @@
*/ */
.cms { .cms {
.uf-field-editor { .uf-field-editor {
// Row styles // Row styles
table.ss-gridfield-table { table.ss-gridfield-table {
// Standard rows // Standard rows
.ss-gridfield-item { .ss-gridfield-item {
&, &:hover { &, &:hover {
@ -17,7 +15,7 @@
td { td {
border-right-width: 0; border-right-width: 0;
border-bottom: 1px solid #EEE; border-top: 1px solid #EEE;
&:last-child { &:last-child {
border-right-width: 1px; border-right-width: 1px;
@ -31,24 +29,26 @@
} }
td { td {
// border style for darker background border-bottom: 0;
border-bottom: 1px solid #CCC; border-top: 1px solid #eee;
} }
.col-reorder, .handle { .col-reorder, .handle {
// level 1
background: #BEE0F8; background: #BEE0F8;
border-top: 0;
} }
&.inFieldGroup-level-2 { &.inFieldGroup-level-2 {
.col-reorder, .handle { .col-reorder, .handle {
background: #99CEF4; background: #99CEF4;
border-top: 0;
} }
} }
&.inFieldGroup-level-3 { &.inFieldGroup-level-3 {
.col-reorder, .handle { .col-reorder, .handle {
background: #89BEF4; background: #89BEF4;
border-top: 0;
} }
} }
} }
@ -63,19 +63,23 @@
color: black; color: black;
font-size: 1.1em; 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'] { .ss-gridfield-item[data-class='EditableFieldGroup'] {
td { td {
border-top: 1px inset #c9e6f9; border-top: 1px solid #a8d7f5;
}
&.inFieldGroup-level-2 td {
border-top-color: #a8d7f5;
}
&.inFieldGroup-level-3 td {
border-top-color: #94cef3;
} }
label { label {
@ -86,15 +90,15 @@
.ss-gridfield-item[data-class='EditableFieldGroupEnd'] { .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
td { td {
border-bottom: 1px outset #c9e6f9; border-bottom: 1px solid #a8d7f5;
} }
&.inFieldGroup-level-2 td { + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
border-bottom-color: #a8d7f5; border-top: 0;
} }
&.inFieldGroup-level-3 td { .col-buttons .action{
border-bottom-color: #94cef3; display: none;
} }
label { label {