Skip to content

Commit 60a0f05

Browse files
FedikFedik
authored
[4.0] Subform styling for non table layout (#35142)
* btn sizes * Subform styling for non table layout * scss cs * scss cs * scss cs * Highlight draggable section * Highlight same color as other site
1 parent 2a1c34b commit 60a0f05

File tree

6 files changed

+62
-13
lines changed

6 files changed

+62
-13
lines changed

‎administrator/templates/atum/scss/blocks/_form.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,52 @@ td .form-control {
140140
.form-group {
141141
@extend .mb-3;
142142
}
143+
144+
// Subform - non table layout
145+
div.subform-repeatable-group {
146+
position: relative;
147+
padding: 32px 32px 16px 28px;
148+
margin-top: 20px;
149+
border: $input-border;
150+
border-radius: $border-radius;
151+
152+
> .btn-toolbar {
153+
154+
.btn-group {
155+
position: static;
156+
}
157+
158+
.btn {
159+
position: absolute;
160+
161+
&.group-add {
162+
right: -1px;
163+
bottom: -1px;
164+
border-radius: $border-radius 0 $border-radius 0;
165+
}
166+
&.group-remove {
167+
top: -1px;
168+
right: -1px;
169+
border-radius: 0 $border-radius 0 $border-radius;
170+
}
171+
&.group-move {
172+
top: 50%;
173+
right: 100%;
174+
margin-top: -27px;
175+
line-height: 52px;
176+
border-radius: $border-radius 0 0 $border-radius;
177+
}
178+
}
179+
}
180+
}
181+
182+
// Highlight draggable section
183+
.subform-repeatable-group[draggable="true"] {
184+
// For non table layout
185+
background-color: $teal;
186+
187+
// For table layout
188+
> td {
189+
background-color: $teal;
190+
}
191+
}

‎layouts/joomla/form/field/subform/repeatable-table.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<td style="width:8%;">
9797
<?php if (!empty($buttons['add'])) : ?>
9898
<div class="btn-group">
99-
<button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
99+
<button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
100100
<span class="icon-plus" aria-hidden="true"></span>
101101
</button>
102102
</div>

‎layouts/joomla/form/field/subform/repeatable-table/section-byfieldsets.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,17 @@
3535
<td>
3636
<div class="btn-group">
3737
<?php if (!empty($buttons['add'])) : ?>
38-
<button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
38+
<button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
3939
<span class="icon-plus" aria-hidden="true"></span>
4040
</button>
4141
<?php endif; ?>
4242
<?php if (!empty($buttons['remove'])) : ?>
43-
<button type="button" class="group-remove btn btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
43+
<button type="button" class="group-remove btn btn-sm btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
4444
<span class="icon-minus" aria-hidden="true"></span>
4545
</button>
4646
<?php endif; ?>
4747
<?php if (!empty($buttons['move'])) : ?>
48-
<button type="button" class="group-move btn btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
48+
<button type="button" class="group-move btn btn-sm btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
4949
<span class="icon-arrows-alt" aria-hidden="true"></span>
5050
</button>
5151
<?php endif; ?>

‎layouts/joomla/form/field/subform/repeatable-table/section.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@
3333
<td>
3434
<div class="btn-group">
3535
<?php if (!empty($buttons['add'])) : ?>
36-
<button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
36+
<button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>">
3737
<span class="icon-plus" aria-hidden="true"></span>
3838
</button>
3939
<?php endif; ?>
4040
<?php if (!empty($buttons['remove'])) : ?>
41-
<button type="button" class="group-remove btn btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
41+
<button type="button" class="group-remove btn btn-sm btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>">
4242
<span class="icon-minus" aria-hidden="true"></span>
4343
</button>
4444
<?php endif; ?>
4545
<?php if (!empty($buttons['move'])) : ?>
46-
<button type="button" class="group-move btn btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
46+
<button type="button" class="group-move btn btn-sm btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>">
4747
<span class="icon-arrows-alt" aria-hidden="true"></span>
4848
</button>
4949
<?php endif; ?>

‎layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
<?php if (!empty($buttons)) : ?>
2828
<div class="btn-toolbar text-end">
2929
<div class="btn-group">
30-
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
31-
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
32-
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
30+
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
31+
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn btn-sm btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
32+
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn btn-sm btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
3333
</div>
3434
</div>
3535
<?php endif; ?>

‎layouts/joomla/form/field/subform/repeatable/section.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
<?php if (!empty($buttons)) : ?>
2828
<div class="btn-toolbar text-end">
2929
<div class="btn-group">
30-
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
31-
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
32-
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
30+
<?php if (!empty($buttons['add'])) : ?><button type="button" class="group-add btn btn-sm btn-success" aria-label="<?php echo Text::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
31+
<?php if (!empty($buttons['remove'])) : ?><button type="button" class="group-remove btn btn-sm btn-danger" aria-label="<?php echo Text::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus icon-white" aria-hidden="true"></span> </button><?php endif; ?>
32+
<?php if (!empty($buttons['move'])) : ?><button type="button" class="group-move btn btn-sm btn-primary" aria-label="<?php echo Text::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-arrows-alt icon-white" aria-hidden="true"></span> </button><?php endif; ?>
3333
</div>
3434
</div>
3535
<?php endif; ?>

0 commit comments

Comments
 (0)