tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

FIX Allowed text length fields now align correctly with each other

Browse Source
This commit is contained in:
Robbie Averill 2019-05-17 15:09:50 +12:00
parent d141c83e0a
commit d0e937a588
3 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/dist/styles/userforms-cms.css vendored
View File

@ -1 +1 @@
.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{-webkit-animation:flash-background 2s linear;-o-animation:flash-background 2s linear;animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] label{font-weight:700;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] .form__field-label{font-weight:700;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:1;background:#f7f8fa;border-bottom:1px solid #dbe0e9;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}.cms .grid-field__table .grid-field__uf-filter-header{padding:0}.cms .grid-field__table .grid-field__uf-filter-header .form__fieldgroup-label{color:#fff}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger),.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger):hover{background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header table{width:100%}.cms-preview{z-index:2}
.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{-webkit-animation:flash-background 2s linear;-o-animation:flash-background 2s linear;animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{-webkit-box-flex:1;-webkit-flex:auto;flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] label{font-weight:700;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup] .form__field-label{font-weight:700;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:1;background:#f7f8fa;border-bottom:1px solid #dbe0e9;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}.cms .grid-field__table .grid-field__uf-filter-header{padding:0}.cms .grid-field__table .grid-field__uf-filter-header .form__fieldgroup-label{color:#fff}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger),.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger):hover{background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header table{width:100%}.cms-preview{z-index:2}.userform-field__allowed-length .form__fieldgroup-item{margin-top:0}.userform-field__allowed-length .field.text{min-width:auto}.userform-field__allowed-length input.text{width:4rem}.userform-field__allowed-length-separator{display:inline-block;margin:0 .6rem .6rem 0}

23
client/src/styles/userforms-cms.scss
View File

@ -166,3 +166,26 @@
.cms-preview {
z-index: 2;
}
// Custom styles for userforms fields in the CMS
.userform-field {
&__allowed-length {
.form__fieldgroup-item {
// Removing default margin-top from field group, this one already has one in its parent container
margin-top: 0;
}
.field.text {
min-width: auto;
}
input.text {
width: 4rem;
}
}
&__allowed-length-separator {
display: inline-block;
margin: 0 .6rem .6rem 0;
}
}

14
code/Model/EditableFormField/EditableTextField.php
View File

@ -131,12 +131,18 @@ class EditableTextField extends EditableFormField
FieldGroup::create(
_t(__CLASS__.'.TEXTLENGTH', 'Allowed text length'),
[
NumericField::create('MinLength', false),
LiteralField::create('RangeLength', _t(__CLASS__.".RANGE_TO", "to")),
NumericField::create('MinLength', false)
->setAttribute('aria-label', _t(__CLASS__ . '.MIN_LENGTH', 'Minimum text length')),
LiteralField::create(
'RangeLength',
'<span class="userform-field__allowed-length-separator">'
. _t(__CLASS__ . '.RANGE_TO', 'to')
. '</span>'
),
NumericField::create('MaxLength', false)
->setAttribute('aria-label', _t(__CLASS__ . '.MAX_LENGTH', 'Maximum text length')),
]
)
)->addExtraClass('userform-field__allowed-length')
]);
return $fields;