tonyair
/
silverstripe-userforms
mirror of https://github.com/silverstripe/silverstripe-userforms.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

clean up styles

This commit is contained in:
scott1702 2015-08-17 11:06:56 +12:00
parent bab2f2a074
commit cc67ddb98e
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;
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;
}

35
css/UserForm_cms.css
View File

@ -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;

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

3
javascript/UserForm.js
View File

@ -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);

22
scss/UserForm.scss
View File

@ -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;
}
}

48
scss/UserForm_cms.scss
View File

@ -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 {