29
0
mirror of https://github.com/joomla/joomla-cms.git synced 2024-07-02 18:13:43 +00:00

[4.0] Flex based control-group fields (#27684)

* Flex fields

* add form-vertical class

* switcher

* full width note

* reduce label padding

* Update switcher.scss

* increase vertical spacing between fields

* remove top margin from first field

* add table-responsive class to global filters

Co-authored-by: infograf768 <infografjms@gmail.com>
This commit is contained in:
Ciaran Walsh 2020-01-30 10:47:10 +00:00 committed by GitHub
parent 456a1d2630
commit a9f80d608f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 77 additions and 293 deletions

View File

@ -60,7 +60,7 @@ HTMLHelper::_('script', 'com_contenthistory/admin-history-versions.js', ['versio
<?php echo HTMLHelper::_('uitab.endTab'); ?>
<?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'otherparams', Text::_('COM_BANNERS_GROUP_LABEL_BANNER_DETAILS')); ?>
<fieldset id="fieldset-otherparams" class="form-no-margin options-form">
<fieldset id="fieldset-otherparams" class="options-form">
<legend><?php echo Text::_('COM_BANNERS_GROUP_LABEL_BANNER_DETAILS'); ?></legend>
<div>
<?php echo $this->form->renderFieldset('otherparams'); ?>

View File

@ -92,7 +92,7 @@ class FiltersField extends FormField
$html = array();
// Open the table.
$html[] = '<table id="filter-config" class="table">';
$html[] = '<table id="filter-config" class="table table-responsive">';
// The table heading.
$html[] = ' <thead>';

View File

@ -15,7 +15,7 @@ defined('_JEXEC') or die;
$this->name = Text::_('COM_CONFIG_PERMISSION_SETTINGS');
$this->description = '';
$this->fieldsname = 'permissions';
$this->formclass = 'form-no-margin form-no-columns options-form';
$this->formclass = 'form-no-columns options-form';
$this->showlabel = false;
echo LayoutHelper::render('joomla.content.options_default', $this);

View File

@ -151,7 +151,7 @@ $tmpl = $isModal || $input->get('tmpl', '', 'cmd') === 'component' ? '&tmpl=c
<?php if ($this->canDo->get('core.admin') && $params->get('show_configure_edit_options', 1) == 1) : ?>
<?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'editor', Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG')); ?>
<fieldset id="fieldset-editor" class="form-no-margin options-form">
<fieldset id="fieldset-editor" class="options-form">
<legend><?php echo Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG'); ?></legend>
<div class="column-count-md-2 column-count-lg-3">
<?php echo $this->form->renderFieldset('editorConfig'); ?>

View File

@ -50,7 +50,7 @@ if ($clientId === 1)
<?php // Add the translation of the menu item title when client is administrator ?>
<?php if ($clientId === 1 && $this->item->id != 0) : ?>
<div class="row title-alias form-vertical form-no-margin mb-3">
<div class="row title-alias form-vertical mb-3">
<div class="col-12">
<div class="control-group">
<div class="control-label">

View File

@ -47,7 +47,7 @@ $tmpl = $isModal || $input->get('tmpl', '', 'cmd') === 'component' ? '&tmpl=c
<div class="col-lg-3">
<div class="card card-block">
<div class="card-body">
<fieldset class="form-vertical form-no-margin">
<fieldset class="form-vertical">
<?php echo $this->form->renderField('published'); ?>
<?php echo $this->form->renderField('default'); ?>
</fieldset>

View File

@ -39,7 +39,7 @@ $tmpl = $isModal || $input->get('tmpl', '', 'cmd') === 'component' ? '&tmpl=c
<div class="row">
<div class="col-lg-9">
<div class="card card-block">
<div class="card-body form-vertical form-no-margin">
<div class="card-body form-vertical">
<?php echo $this->form->renderField('description'); ?>
</div>
</div>
@ -47,7 +47,7 @@ $tmpl = $isModal || $input->get('tmpl', '', 'cmd') === 'component' ? '&tmpl=c
<div class="col-lg-3">
<div class="card card-block">
<div class="card-body">
<fieldset class="form-vertical form-no-margin">
<fieldset class="form-vertical">
<?php echo $this->form->renderField('published'); ?>
<?php echo $this->form->renderField('default'); ?>
</fieldset>

View File

@ -18,9 +18,6 @@
}
.layout-edit {
.control-group {
min-width: (100% / 3);
}
.title-alias {
box-shadow: $atum-box-shadow;

View File

@ -6,7 +6,9 @@
}
.control-group {
margin-bottom: 18px;
display: flex;
flex-wrap: wrap;
margin: 0 0 1rem 0;
> .form-check {
display: inline-block;
@ -19,24 +21,25 @@
}
.control-label {
float: left;
width: 220px;
padding-top: 5px;
padding-right: 5px;
text-align: left;
width: 240px;
padding: .3rem 0;
}
.controls {
margin-left: 220px;
position: relative;
flex: 1;
min-width: 210px;
@include media-breakpoint-down(sm) {
margin-left: 0;
[dir=rtl] & {
margin-right: 0;
}
}
+ div {
width: 100%;
margin: 5px 0 10px;
}
}
.form-vertical & {
flex-direction: column;
}
}
.control-group {
@ -45,38 +48,6 @@
}
}
.col-md-9 .control-group .switcher__legend,
.col-md-12 .control-group .switcher__legend {
@include media-breakpoint-down(sm) {
margin-left: 0;
float: none;
[dir=rtl] & {
margin-right: 0;
}
}
}
.form-no-margin {
.control-group {
.controls {
margin-left: 0;
.switcher__legend {
float: none;
margin-left: 0;
}
}
.control-label {
float: none;
}
}
}
.spacer {
hr {
width: 380px;
@ -136,12 +107,6 @@ legend {
opacity: 0.3;
}
// Search Input Tooltip
/* make the containers relative */
.control-group > .controls {
position: relative;
}
/* set up hidden tooltip */
[role="tooltip"]:not(.show) {
display: none;

View File

@ -30,7 +30,8 @@
padding-bottom: 1rem;
> div {
display: inline-block;
display: inline-flex;
flex-direction: column;
break-inside: avoid;
width: 100%;

View File

@ -20,12 +20,6 @@ body {
}
}
.control-group {
.custom-select {
float: right;
}
}
.dropdown-menu-right {
&::after {
@ -49,10 +43,6 @@ body {
float: right;
}
.form-no-margin .control-group .controls .switcher__legend {
text-align: right;
}
// Alerts
.notify-alerts {
margin-left: 0;

View File

@ -4,73 +4,6 @@ label {
margin-bottom: 0;
}
.control-group {
margin-bottom: 18px;
> .form-check {
display: inline-block;
}
&::after {
display: table;
clear: both;
content: "";
}
.control-label {
float: left;
width: 220px;
padding-top: 5px;
padding-right: 5px;
text-align: left;
[dir=rtl] & {
float: right;
text-align: right;
}
@include media-breakpoint-down(sm) {
float: none;
width: 100%;
}
}
.controls {
margin-left: 220px;
[dir=rtl] & {
margin-right: 220px;
margin-left: 0;
}
@include media-breakpoint-down(sm) {
margin-left: 0;
[dir=rtl] & {
margin-right: 0;
}
}
}
}
.form-no-margin {
.control-group {
.controls {
margin-left: 0;
[dir=rtl] & {
margin-right: auto;
}
}
.control-label {
float: none;
}
}
}
.spacer {
hr {
width: 380px;
@ -125,7 +58,7 @@ legend {
display: block;
}
[aria-grabbed='true'] {
[aria-grabbed="true"] {
box-shadow: 0 0 2px 1px var(--atum-bg-dark);
}
@ -133,15 +66,6 @@ select.form-control {
background-color: $custom-select-bg;
}
@include media-breakpoint-down(xs) {
.control-group {
.control-label {
float: none;
max-width: 100%;
}
}
}
.field-media-wrapper {
max-width: calc(50vw - 5rem);
width: 100%;

View File

@ -1,13 +1,13 @@
$off-background-colour: lightgrey;
$on-background-colour: #2f7d32;
$switcher-width: 62px;
$switcher-width: 62px;
$switcher-height: 28px;
.switcher {
position: relative;
width: 18rem;
height: 28px;
float: left;
margin: 0;
}
.switcher input {
@ -41,7 +41,7 @@ $switcher-height: 28px;
.switcher input:focus ~ .toggle-outside {
border-color: var(--focus);
box-shadow: 0 0 0 .2rem rgba(26,70,107,.25);
box-shadow: 0 0 0 .2rem rgba(26, 70, 107, .25);
}
.switcher label {
@ -74,7 +74,7 @@ $switcher-height: 28px;
position: absolute;
width: 58px;
box-sizing: border-box;
border: 1px solid rgba(0,0,0,.18);
border: 1px solid rgba(0, 0, 0, .18);
left: 0;
[dir=rtl] & {
@ -83,7 +83,7 @@ $switcher-height: 28px;
}
}
.switcher input ~ input:checked ~ .toggle-outside{
.switcher input ~ input:checked ~ .toggle-outside {
background: $on-background-colour;
}
@ -104,32 +104,5 @@ $switcher-height: 28px;
margin-bottom: 1rem;
font-size: 1rem;
font-weight: 400;
float: left;
width: 220px;
padding-top: 5px;
padding-right: 5px;
text-align: left;
[dir=rtl] & {
padding-left: 5px;
padding-right: 0;
float: right;
text-align: right;
}
}
.col-md-9 .control-group .switcher__legend,
.col-md-12 .control-group .switcher__legend {
margin-left: -220px;
[dir=rtl] & {
margin-left: 0;
margin-right: -220px;
float: right;
text-align: right;
}
}
.col-md-3 .switcher__legend {
margin-left: 0;
padding: 5px 0;
}

View File

@ -3,6 +3,7 @@
body {
direction: rtl;
}
// Javascript Warning
#javascript-warning {
font-size: 16px;
@ -52,14 +53,6 @@ textarea.noResize {
}
}
.form-no-margin {
.control-group {
.controls {
margin-right: 0;
}
}
}
.checkboxes {
.checkbox input {
margin-right: 0;
@ -92,7 +85,8 @@ textarea.noResize {
.j-install-step-header span {
margin-left: 5px;
margin-right: auto; }
margin-right: auto;
}
#jform_db_prefix {
direction: ltr;

View File

@ -20,7 +20,9 @@ body {
background: var(--atum-bg-light);
}
*, *::after, *::before {
*,
*::after,
*::before {
box-sizing: border-box;
}
@ -28,8 +30,9 @@ body {
display: flex;
flex-direction: column;
min-height: 100vh;
.logo {
width: auto;
width: auto;
}
}
@ -38,6 +41,7 @@ body {
width: 100%;
max-width: 40rem;
margin: 0 auto;
h1 {
color: $dark-blue;
text-align: center;
@ -49,13 +53,16 @@ body {
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 0 2px rgba(52, 58, 67, .1), 0 2px 5px rgba(52, 58, 67, .08), 0 5px 15px rgba(52, 58, 67, .08);
&.active {
display: block;
}
select {
width: 100%;
margin-left: 0 !important;
}
.btn-block {
margin-top: 40px;
}
@ -79,6 +86,7 @@ body {
.j-install-step-form {
padding: 0.65rem 1.2rem 0.65rem;
.btn-block + .btn-block {
margin-top: .5rem;
}
@ -87,6 +95,7 @@ body {
.languageForm {
padding: 0 0 30px;
.custom-select {
width: 100%;
}
@ -101,12 +110,14 @@ body {
display: flex;
margin: 0 0 20px;
background: #fafafa;
border: 1px solid rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.05);
border: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .05);
p {
margin-bottom: 0;
}
}
.alert-icon {
display: flex;
align-items: center;
@ -115,6 +126,7 @@ body {
margin-bottom: 0;
font-size: 3rem;
opacity: .6;
.fa {
width: 100%;
text-align: center;
@ -126,7 +138,8 @@ body {
padding: 10px 20px;
}
.hidden, [hidden="hidden"] {
.hidden,
[hidden="hidden"] {
display: none;
}
@ -165,22 +178,6 @@ body {
}
}
.form-no-margin {
.control-group {
.controls {
margin-left: 0;
}
.control-label {
float: none;
}
}
}
.spacer hr {
width: 380px;
}
@ -229,28 +226,34 @@ legend {
caption {
caption-side: top;
}
.badge-warning {
color: #292b2c;
}
.fa-eye:before, .icon-eye-open:before, .icon-eye:before {
font-family:"Font Awesome 5 Free";
.fa-eye:before,
.icon-eye-open:before,
.icon-eye:before {
font-family: "Font Awesome 5 Free";
cursor: pointer;
content: "\f06e";
}
.fa-eye-slash:before, .icon-eye-close:before, .icon-eye-blocked:before, .icon-eye-2:before {
font-family:"Font Awesome 5 Free";
.fa-eye-slash:before,
.icon-eye-close:before,
.icon-eye-blocked:before,
.icon-eye-2:before {
font-family: "Font Awesome 5 Free";
cursor: pointer;
content: "\f070";
}
// footer
.footer {
position: absolute;
bottom: 0;
left: 0;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .25);
z-index: $zindex-header;
background-color: $white;
position: absolute;
bottom: 0;
left: 0;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .25);
z-index: $zindex-header;
background-color: $white;
}

View File

@ -38,7 +38,7 @@ if (!ModuleHelper::isAdminMultilang())
}
$html = array();
$html[] = '<fieldset class="form-vertical form-no-margin">';
$html[] = '<fieldset class="form-vertical">';
foreach ($fields as $field)
{

View File

@ -57,7 +57,7 @@ if (!Multilanguage::isEnabled())
}
$html = array();
$html[] = '<fieldset class="form-vertical form-no-margin">';
$html[] = '<fieldset class="form-vertical">';
foreach ($fields as $field)
{

View File

@ -116,7 +116,7 @@ foreach ($fieldSets as $name => $fieldSet)
if (!$isGrandchild && $hasParent)
{
echo '<fieldset id="fieldset-' . $name . '" class="form-no-margin options-form ' . (!empty($fieldSet->class) ? $fieldSet->class : '') . '">';
echo '<fieldset id="fieldset-' . $name . '" class="options-form ' . (!empty($fieldSet->class) ? $fieldSet->class : '') . '">';
echo '<legend>' . $label . '</legend>';
echo '<div class="column-count-md-2 column-count-lg-3">';
}
@ -143,7 +143,7 @@ foreach ($fieldSets as $name => $fieldSet)
// Directly add a fieldset if we have no children
if (!$hasChildren)
{
echo '<fieldset id="fieldset-' . $name . '" class="form-no-margin options-form ' . (!empty($fieldSet->class) ? $fieldSet->class : '') . '">';
echo '<fieldset id="fieldset-' . $name . '" class="options-form ' . (!empty($fieldSet->class) ? $fieldSet->class : '') . '">';
echo '<legend>' . $label . '</legend>';
echo '<div class="column-count-md-2 column-count-lg-3">';

View File

@ -14,7 +14,7 @@ $form = $displayData->getForm();
$title = $form->getField('title') ? 'title' : ($form->getField('name') ? 'name' : '');
?>
<div class="row title-alias form-vertical form-no-margin mb-3">
<div class="row title-alias form-vertical mb-3">
<div class="col-12 col-md-6">
<?php echo $title ? $form->renderField($title) : ''; ?>
</div>

View File

@ -65,7 +65,7 @@ $attr .= $onchange ? ' onchange="' . $onchange . '"' : '';
?>
<fieldset <?php echo $attr; ?>>
<legend class="switcher__legend">
<legend class="switcher__legend sr-only">
<?php echo $label; ?>
</legend>
<div class="switcher">

View File

@ -58,7 +58,6 @@ class RadioField extends ListField
// The layout for Switcher
if (!$element['layout'] && strpos(trim($this->class), 'switcher') === 0)
{
$this->hiddenLabel = true;
$this->layout = 'joomla.form.field.radio.switcher';
}

View File

@ -18,51 +18,6 @@
}
.control-group::after {
display: table;
clear: both;
content: "";
}
form:not(.form-no-margin) {
.control-group {
margin-bottom: 18px;
.control-label {
float: left;
width: auto;
padding-top: 5px;
padding-right: 5px;
text-align: left;
}
.controls {
margin-left: 220px;
}
}
}
.form-no-margin {
.control-group {
.controls {
margin-left: 0;
.switcher__legend {
float: none;
}
}
.control-label {
float: none;
}
}
}
.spacer hr {
width: 380px;
}

View File

@ -13,23 +13,6 @@ body,
float: right !important;
}
.control-group,
form:not(.form-no-margin) .control-group {
.control-label {
float: right;
text-align: right;
}
.controls {
margin-right: 220px;
margin-left: 0;
}
.custom-select {
float: right;
}
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,