Skip to content

[4.0] Field layout utility classes #32422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilsonge merged 3 commits into from
Feb 17, 2021
Merged

[4.0] Field layout utility classes #32422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d4587e
[4.0] Field layout attribute
ciar4n Feb 14, 2021
b1e13e1
revert display attribute
ciar4n Feb 15, 2021
06fddc9
inc joomla.content.options_default
ciar4n Feb 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion administrator/components/com_content/tmpl/article/edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@
<?php echo HTMLHelper::_('uitab.addTab', 'myTab', 'editor', Text::_('COM_CONTENT_SLIDER_EDITOR_CONFIG')); ?>
<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">
<div class="form-grid">
<?php echo $this->form->renderFieldset('editorConfig'); ?>
</div>
</fieldset>
Expand Down
2 changes: 1 addition & 1 deletion administrator/components/com_messages/tmpl/config/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
?>

<form action="<?php echo Route::_('index.php?option=com_messages&view=config'); ?>" method="post" name="adminForm" id="message-form" class="form-validate">
<div class="col-lg-8 col-xl-6">
<div class="form-grid">
<div class="card">
<div class="card-body">
<?php echo $this->form->renderField('lock'); ?>
Expand Down
2 changes: 1 addition & 1 deletion administrator/components/com_users/tmpl/group/edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-8 col-xl-6">
<div class="form-grid">
<?php echo $this->form->renderField('title'); ?>
<?php echo $this->form->renderField('parent_id'); ?>
</div>
Expand Down
2 changes: 1 addition & 1 deletion administrator/components/com_users/tmpl/note/edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<div class="card mt-4">
<div class="card-body">
<div class="row">
<div class="col-lg-8 col-xl-6">
<div class="form-grid">
<?php echo $this->form->renderField('subject'); ?>
<?php echo $this->form->renderField('user_id'); ?>
<?php echo $this->form->renderField('catid'); ?>
Expand Down
2 changes: 1 addition & 1 deletion administrator/components/com_users/tmpl/user/edit.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-8 col-xl-6">
<div class="form-grid">
<?php echo $this->form->renderFieldset('user_details'); ?>
</div>
</div>
Expand Down
125 changes: 88 additions & 37 deletions administrator/templates/atum/scss/blocks/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,64 +24,115 @@
display: table-row;
}

// Column Count
// Form Grid

.form-grid {
--span-1: span 1;
--span-2: span 1;
--span-3: span 1;
--span-4: span 1;
--span-5: span 1;

display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 1rem;

@include media-breakpoint-up(sm) {
--span-2: span 2;
--span-3: span 2;
--span-4: span 2;
--span-5: span 2;

grid-template-columns: repeat(2, 1fr);
}

[class^="column-"],
[class*=" column-"] {
padding-bottom: 1rem;
column-gap: 2rem;
@include media-breakpoint-up(md) {
--span-3: span 3;
--span-4: span 4;
--span-5: span 4;

> div {
display: inline-flex;
flex-direction: column;
width: 100%;
break-inside: avoid;
page-break-inside: avoid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem 2rem;
}

&.hidden {
display: none;
}
@include media-breakpoint-up(lg) {
--span-5: span 5;

.control-label {
width: 100%;
}
grid-template-columns: repeat(6, 1fr);
}

.form-no-columns & {
column-count: auto;
> * {
grid-column: 1 / -1;
}
}

@include media-breakpoint-up(sm) {
.column-count-sm-2 {
column-count: 2;
.stack {
flex-direction: column;
}

.column-count-sm-3 {
column-count: 3;
.span-1 {
grid-column: 1 / var(--span-1);

&-inline {
grid-column: var(--span-1);
}
}
}

@include media-breakpoint-up(md) {
.column-count-md-2 {
column-count: 2;
.span-2 {
grid-column: 1 / var(--span-2);

&-inline {
grid-column: var(--span-2);
}
}

.column-count-md-3 {
column-count: 3;
.span-3 {
grid-column: 1 / var(--span-3);

&-inline {
grid-column: var(--span-3);
}
}
}

@include media-breakpoint-up(lg) {
.column-count-lg-2 {
column-count: 2;
.span-4 {
grid-column: 1 / var(--span-4);

&-inline {
grid-column: var(--span-4);
}
}

.column-count-lg-3 {
column-count: 3;
.span-5 {
grid-column: 1 / var(--span-5);

&-inline {
grid-column: var(--span-5);
}
}

@include media-breakpoint-up(lg) {
.offset-1 {
grid-column-start: 2;
}

.offset-2 {
grid-column-start: 3;
}

.offset-3 {
grid-column-start: 4;
}

.offset-4 {
grid-column-start: 5;
}

.offset-5 {
grid-column-start: 6;
}
}
}


// Sizing

.w-1 {
Expand Down
2 changes: 1 addition & 1 deletion layouts/joomla/content/options_default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<p><?php echo $displayData->description; ?></p>
<?php endif; ?>
<?php $fieldsnames = explode(',', $displayData->fieldsname); ?>
<div>
<div class="form-grid">
<?php foreach ($fieldsnames as $fieldname) : ?>
<?php foreach ($displayData->form->getFieldset($fieldname) as $field) : ?>
<?php $datashowon = ''; ?>
Expand Down
4 changes: 2 additions & 2 deletions layouts/joomla/edit/params.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@
echo '</div>';
}

echo '<div class="column-count-md-2 column-count-lg-3">';
echo '<div class="form-grid">';
}
// Tabs
elseif (!$hasParent)
Expand Down Expand Up @@ -165,7 +165,7 @@
echo '</div>';
}

echo '<div class="column-count-md-2 column-count-lg-3">';
echo '<div class="form-grid">';

$opentab = 2;
}
Expand Down