diff --git a/administrator/components/com_content/tmpl/article/edit.php b/administrator/components/com_content/tmpl/article/edit.php index f819bd152a9c6..bf6b1dd31abf6 100644 --- a/administrator/components/com_content/tmpl/article/edit.php +++ b/administrator/components/com_content/tmpl/article/edit.php @@ -155,7 +155,7 @@
-
+
form->renderFieldset('editorConfig'); ?>
diff --git a/administrator/components/com_modules/forms/advanced.xml b/administrator/components/com_modules/forms/advanced.xml index 5690a879b6985..e73c6e13f43f5 100644 --- a/administrator/components/com_modules/forms/advanced.xml +++ b/administrator/components/com_modules/forms/advanced.xml @@ -8,6 +8,7 @@ name="style" type="chromestyle" label="COM_MODULES_FIELD_MODULE_STYLE_LABEL" + fieldWidth="large" /> diff --git a/administrator/components/com_modules/forms/module.xml b/administrator/components/com_modules/forms/module.xml index 2111ccb1fa740..6532360e64b42 100644 --- a/administrator/components/com_modules/forms/module.xml +++ b/administrator/components/com_modules/forms/module.xml @@ -7,6 +7,7 @@ label="JGLOBAL_FIELD_ID_LABEL" default="0" readonly="true" + fieldWidth="small" /> @@ -53,6 +57,7 @@ default="1" size="1" validate="options" + fieldWidth="full" > @@ -67,6 +72,7 @@ translateformat="true" showtime="true" size="22" + fieldWidth="medium" /> @@ -153,6 +165,7 @@ component="com_modules" section="module" validate="rules" + fieldWidth="full" /> diff --git a/administrator/components/com_modules/forms/moduleadmin.xml b/administrator/components/com_modules/forms/moduleadmin.xml index fead614973822..0bc94caa214c6 100644 --- a/administrator/components/com_modules/forms/moduleadmin.xml +++ b/administrator/components/com_modules/forms/moduleadmin.xml @@ -7,6 +7,7 @@ label="JGLOBAL_FIELD_ID_LABEL" default="0" readonly="true" + fieldWidth="small" /> @@ -54,6 +58,7 @@ default="1" size="1" validate="options" + fieldWidth="full" > @@ -68,6 +73,7 @@ translateformat="true" showtime="true" size="22" + fieldWidth="medium" /> @@ -129,6 +140,7 @@ buttons="true" filter="JComponentHelper::filterText" hide="readmore,pagebreak,module" + fieldWidth="full" /> @@ -148,6 +160,7 @@ component="com_modules" section="module" validate="rules" + fieldWidth="full" /> diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss index 131f72f48787d..f2ebb7ccc7bdf 100644 --- a/administrator/templates/atum/scss/_variables.scss +++ b/administrator/templates/atum/scss/_variables.scss @@ -226,7 +226,8 @@ $custom-select-bg-size-sm: 75rem; $custom-select-multiple-padding-y: .3rem; //input -$input-padding: .6rem 1rem; +$input-padding-y: .6rem; +$input-padding-x: .6rem; $input-border: solid 1px #c9c9c9; // Modals @@ -266,3 +267,23 @@ $zindex-tooltip: 1070; $zindex-mobile-bottom: 8000; $zindex-mobile-toggle: 9999; $zindex-mobile-menu: 9000; + +$form-field-widths: ( + xs: ( + full: 100%, + large: 100%, + medium: 100%, + small: 100%, + ), + sm: ( + ), + md: ( + medium: 710px, + small: 460px, + ), + lg: ( + ), + xl: ( + large: 910px, + ), +); diff --git a/administrator/templates/atum/scss/blocks/_form.scss b/administrator/templates/atum/scss/blocks/_form.scss index 12ff7f75d390a..5245f1b40fa9e 100644 --- a/administrator/templates/atum/scss/blocks/_form.scss +++ b/administrator/templates/atum/scss/blocks/_form.scss @@ -42,7 +42,6 @@ .controls { position: relative; - flex: 1; min-width: 210px; + div { @@ -54,7 +53,22 @@ .form-vertical & { flex-direction: column; } +} + +@each $breakpoint, $form-field-widths-local in $form-field-widths { + @each $name, $form-field-width in $form-field-widths-local { + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + .control-group.#{$name} .controls { + width: min(#{$form-field-width}, 100%); + } + @if $breakpoint != "sm" and $breakpoint != "xs" { + fieldset:not(.form-vertical) .control-group.#{$name} .control-label + .controls { + width: min(calc(#{$form-field-width} - 240px), 100%); + } + } + } + } } .control-group { diff --git a/layouts/joomla/edit/params.php b/layouts/joomla/edit/params.php index 23fcd308ab3d9..352341debf02b 100644 --- a/layouts/joomla/edit/params.php +++ b/layouts/joomla/edit/params.php @@ -128,7 +128,7 @@ echo ''; } - echo '
'; + echo '
'; } // Tabs elseif (!$hasParent) @@ -165,7 +165,7 @@ echo '
'; } - echo '
'; + echo '
'; $opentab = 2; } diff --git a/layouts/joomla/form/renderfield.php b/layouts/joomla/form/renderfield.php index 8b967b29bc501..dc60adafa73d4 100644 --- a/layouts/joomla/form/renderfield.php +++ b/layouts/joomla/form/renderfield.php @@ -21,6 +21,7 @@ * @var string $label The html code for the label * @var string $input The input field html code * @var string $description An optional description to use in a tooltip + * @var string $fieldWidth A hint for the field width */ if (!empty($options['showonEnabled'])) @@ -35,6 +36,10 @@ $id = $name . '-desc'; $hide = empty($options['hiddenLabel']) ? '' : ' sr-only'; $hideDescription = empty($options['hiddenDescription']) ? false : $options['hiddenDescription']; +$fieldWidth = empty($fieldWidth) ? 'full' : $fieldWidth; + +$class .= ' ' . $fieldWidth; + ?>
>
diff --git a/libraries/src/Form/Field/CalendarField.php b/libraries/src/Form/Field/CalendarField.php index 782878cb9ac82..a078882fe1e6d 100644 --- a/libraries/src/Form/Field/CalendarField.php +++ b/libraries/src/Form/Field/CalendarField.php @@ -81,6 +81,18 @@ class CalendarField extends FormField */ protected $layout = 'joomla.form.field.calendar'; + /** + * Hint for render width + * Possible values are: + * - full + * - large + * - medium + * - small + * + * @var string + */ + protected $fieldWidth = 'small'; + /** * Method to get certain otherwise inaccessible properties from the form field object. * diff --git a/libraries/src/Form/Field/EditorField.php b/libraries/src/Form/Field/EditorField.php index 63e06575c15cf..ea2e64233beac 100644 --- a/libraries/src/Form/Field/EditorField.php +++ b/libraries/src/Form/Field/EditorField.php @@ -101,6 +101,18 @@ class EditorField extends TextareaField */ protected $editorType; + /** + * Hint for render width + * Possible values are: + * - full + * - large + * - medium + * - small + * + * @var string + */ + protected $fieldWidth = 'full'; + /** * Method to get certain otherwise inaccessible properties from the form field object. * diff --git a/libraries/src/Form/Field/MediaField.php b/libraries/src/Form/Field/MediaField.php index 34bb06ddfb48b..cad0b74b43277 100644 --- a/libraries/src/Form/Field/MediaField.php +++ b/libraries/src/Form/Field/MediaField.php @@ -109,6 +109,18 @@ class MediaField extends FormField */ protected $layout = 'joomla.form.field.media'; + /** + * Hint for render width + * Possible values are: + * - full + * - large + * - medium + * - small + * + * @var string + */ + protected $fieldWidth = 'large'; + /** * Method to get certain otherwise inaccessible properties from the form field object. * diff --git a/libraries/src/Form/Field/NumberField.php b/libraries/src/Form/Field/NumberField.php index 2c3b0454733d9..9fd145fd974ba 100644 --- a/libraries/src/Form/Field/NumberField.php +++ b/libraries/src/Form/Field/NumberField.php @@ -65,6 +65,18 @@ class NumberField extends FormField */ protected $layout = 'joomla.form.field.number'; + /** + * Hint for render width + * Possible values are: + * - full + * - large + * - medium + * - small + * + * @var string + */ + protected $fieldWidth = 'small'; + /** * Method to get certain otherwise inaccessible properties from the form field object. * diff --git a/libraries/src/Form/Field/RulesField.php b/libraries/src/Form/Field/RulesField.php index 538cdf4aa4f31..450041941dfd9 100644 --- a/libraries/src/Form/Field/RulesField.php +++ b/libraries/src/Form/Field/RulesField.php @@ -65,6 +65,18 @@ class RulesField extends FormField */ protected $assetField; + /** + * Hint for render width + * Possible values are: + * - full + * - large + * - medium + * - small + * + * @var string + */ + protected $fieldWidth = 'full'; + /** * Method to get certain otherwise inaccessible properties from the form field object. * diff --git a/libraries/src/Form/FormField.php b/libraries/src/Form/FormField.php index f1d4b76d7ec72..7a424c0b61e5a 100644 --- a/libraries/src/Form/FormField.php +++ b/libraries/src/Form/FormField.php @@ -369,6 +369,18 @@ abstract class FormField */ protected $renderLabelLayout = 'joomla.form.renderlabel'; + /** + * Hint for render width + * Possible values are: + * - full + * - large + * - medium + * - small + * + * @var string + */ + protected $fieldWidth = 'medium'; + /** * The data-attribute name and values of the form field. * For example, data-action-type="click" data-action-type="change" @@ -450,6 +462,7 @@ public function __get($name) case 'spellcheck': case 'validationtext': case 'showon': + case 'fieldWidth': return $this->$name; case 'input': @@ -514,6 +527,7 @@ public function __set($name, $value) case 'validationtext': case 'group': case 'showon': + case 'fieldWidth': case 'default': $this->$name = (string) $value; break; @@ -639,10 +653,10 @@ public function setup(\SimpleXMLElement $element, $value, $group = null) // Set the group of the field. $this->group = $group; - $attributes = array( + $attributes = [ 'multiple', 'name', 'id', 'hint', 'class', 'description', 'labelclass', 'onchange', 'onclick', 'validate', 'pattern', 'validationtext', 'default', 'required', 'disabled', 'readonly', 'autofocus', 'hidden', 'autocomplete', 'spellcheck', 'translateHint', 'translateLabel', - 'translate_label', 'translateDescription', 'translate_description', 'size', 'showon'); + 'translate_label', 'translateDescription', 'translate_description', 'size', 'showon']; $this->default = isset($element['value']) ? (string) $element['value'] : $this->default; @@ -680,6 +694,8 @@ public function setup(\SimpleXMLElement $element, $value, $group = null) $this->layout = !empty($this->element['layout']) ? (string) $this->element['layout'] : $this->layout; + $this->fieldWidth = isset($this->element['fieldWidth']) ? (string) $this->element['fieldWidth'] : $this->fieldWidth; + // Add required to class list if field is required. if ($this->required) { @@ -1327,6 +1343,7 @@ protected function getLayoutData() 'value' => $this->value, 'dataAttribute' => $this->renderDataAttributes(), 'dataAttributes' => $this->dataAttributes, + 'fieldWidth' => $this->fieldWidth, ]; }