Skip to content

[com_fields] Responsive subform.repeatable-table #13769

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
rdeutz merged 5 commits into from
Jan 27, 2017
Merged

[com_fields] Responsive subform.repeatable-table #13769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5f18b54
Responsive table subforms
ciar4n Jan 25, 2017
5e45b3a
RTL support
ciar4n Jan 25, 2017
7e9c9f9
Wrap in media query
ciar4n Jan 26, 2017
a615922
Final tweaks
ciar4n Jan 26, 2017
6527898
Query fix
ciar4n Jan 26, 2017
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
94 changes: 94 additions & 0 deletions administrator/templates/isis/css/template-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8803,6 +8803,84 @@ textarea.noResize {
margin-bottom: 10px;
}
}
.subform-table-layout .control-group,
.subform-table-layout .control-group:last-of-type {
margin-bottom: 0;
}
.subform-table-layout .controls {
padding-right: 20px;
}
.subform-table-layout input {
width: 100%;
max-width: 206px;
}
.subform-table-layout table .btn-group {
margin: 0 7px;
}
@media (max-width: 1024px) {
.subform-table-layout .subform-repeatable {
padding-right: 0;
}
.subform-table-layout .subform-repeatable tbody td:last-of-type {
text-align: right;
padding-bottom: 15px;
}
.subform-table-layout table,
.subform-table-layout thead,
.subform-table-layout tbody,
.subform-table-layout th,
.subform-table-layout td,
.subform-table-layout tr {
display: block;
}
.subform-table-layout table {
border: 1px solid #ddd;
}
.subform-table-layout thead th {
position: absolute;
top: -9999px;
left: -9999px;
}
.subform-table-layout thead th:last-of-type {
position: static;
width: 100% !important;
text-align: right;
box-sizing: border-box;
border-left: 0;
}
.subform-table-layout tr {
margin: 0;
padding: 0;
border: 0;
}
.subform-table-layout td {
border: none;
position: relative;
padding-left: 50%;
}
.subform-table-layout tbody td:first-of-type {
padding-top: 15px;
border-top: 1px solid #ddd;
}
.subform-table-layout tbody td:first-of-type:before {
top: 18px;
}
.subform-table-layout td:before {
content: attr(data-column);
position: absolute;
top: 13px;
left: 10px;
padding-right: 10px;
}
}
@media (max-width: 979px) {
.com_fields .row-fluid [class*="span"] {
margin-left: 2.12766%;
}
.com_fields .row-fluid [class*="span"]:first-of-type {
margin-left: 0;
}
}
.popover-content {
min-height: 33px;
}
Expand Down Expand Up @@ -9761,3 +9839,19 @@ a.grid_true {
left: auto;
right: 0;
}
.subform-table-layout td {
padding-left: 10px;
}
.subform-table-layout td::before {
content: attr(data-column);
left: auto;
right: 10px;
padding-left: 10px;
padding-right: 0;
}
.subform-table-layout .subform-repeatable tbody td:last-of-type {
text-align: left;
}
.subform-table-layout .form-horizontal .controls {
margin-top: 0;
}
78 changes: 78 additions & 0 deletions administrator/templates/isis/css/template.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8803,6 +8803,84 @@ textarea.noResize {
margin-bottom: 10px;
}
}
.subform-table-layout .control-group,
.subform-table-layout .control-group:last-of-type {
margin-bottom: 0;
}
.subform-table-layout .controls {
padding-right: 20px;
}
.subform-table-layout input {
width: 100%;
max-width: 206px;
}
.subform-table-layout table .btn-group {
margin: 0 7px;
}
@media (max-width: 1024px) {
.subform-table-layout .subform-repeatable {
padding-right: 0;
}
.subform-table-layout .subform-repeatable tbody td:last-of-type {
text-align: right;
padding-bottom: 15px;
}
.subform-table-layout table,
.subform-table-layout thead,
.subform-table-layout tbody,
.subform-table-layout th,
.subform-table-layout td,
.subform-table-layout tr {
display: block;
}
.subform-table-layout table {
border: 1px solid #ddd;
}
.subform-table-layout thead th {
position: absolute;
top: -9999px;
left: -9999px;
}
.subform-table-layout thead th:last-of-type {
position: static;
width: 100% !important;
text-align: right;
box-sizing: border-box;
border-left: 0;
}
.subform-table-layout tr {
margin: 0;
padding: 0;
border: 0;
}
.subform-table-layout td {
border: none;
position: relative;
padding-left: 50%;
}
.subform-table-layout tbody td:first-of-type {
padding-top: 15px;
border-top: 1px solid #ddd;
}
.subform-table-layout tbody td:first-of-type:before {
top: 18px;
}
.subform-table-layout td:before {
content: attr(data-column);
position: absolute;
top: 13px;
left: 10px;
padding-right: 10px;
}
}
@media (max-width: 979px) {
.com_fields .row-fluid [class*="span"] {
margin-left: 2.12766%;
}
.com_fields .row-fluid [class*="span"]:first-of-type {
margin-left: 0;
}
}
.popover-content {
min-height: 33px;
}
Expand Down
20 changes: 20 additions & 0 deletions administrator/templates/isis/less/template-rtl.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,4 +384,24 @@ a.grid_true {
border-width: 1px 0 0 1px;
left: auto;
right: 0;
}

/* SubForms (Table) */
.subform-table-layout {
td {
padding-left: 10px;
&::before {
content: attr(data-column);
left: auto;
right: 10px;
padding-left: 10px;
padding-right: 0;
}
}
.subform-repeatable tbody td:last-of-type {
text-align: left;
}
.form-horizontal .controls {
margin-top: 0;
}
}
85 changes: 85 additions & 0 deletions administrator/templates/isis/less/template.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1836,6 +1836,91 @@ textarea.noResize {
}
}

.subform-table-layout {
.control-group, .control-group:last-of-type {
margin-bottom: 0;
}
.controls {
padding-right: 20px;
}
.btn-group {

}
input {
width: 100%;
max-width: 206px;
}
table .btn-group {
margin: 0 7px;
}
}
@media (max-width: 1024px) {
.subform-table-layout {
.subform-repeatable {
padding-right: 0;
tbody td:last-of-type {
text-align: right;
padding-bottom: 15px;
}
}
table, thead, tbody, th, td, tr {
display: block;
}
table {
border: 1px solid #ddd;
}
thead {

th {
position: absolute;
top: -9999px;
left: -9999px;
&:last-of-type {
position: static;
width: 100% !important;
text-align: right;
box-sizing: border-box;
border-left: 0;
}
}
}
tr {
margin: 0;
padding: 0;
border: 0;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
tbody {
td:first-of-type {
padding-top: 15px;
border-top: 1px solid #ddd;
&:before {top:18px;}
}
}

td:before {
content: attr(data-column);
position: absolute;
top: 13px;
left: 10px;
padding-right: 10px;
}
}
}
// Following can be removed if a solution is found for #13768
@media (max-width: 979px) {
.com_fields .row-fluid [class*="span"] {
margin-left: 2.12766%;
&:first-of-type {
margin-left: 0;
}
}
}

/* Popover minimum height - overwrite bootstrap default */
.popover-content {
min-height: 33px;
Expand Down
2 changes: 1 addition & 1 deletion layouts/joomla/form/field/subform/repeatable-table/section.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

<tr class="subform-repeatable-group" data-base-name="<?php echo $basegroup; ?>" data-group="<?php echo $group; ?>">
<?php foreach ($form->getGroup('') as $field) : ?>
<td>
<td data-column="<?php echo strip_tags($field->label); ?>">
<?php echo $field->renderField(array('hiddenLabel' => true)); ?>
</td>
<?php endforeach; ?>
Expand Down