Skip to content

Commit

Permalink
[com_fields] Responsive subform.repeatable-table (#13769)
Browse files Browse the repository at this point in the history 
* Responsive table subforms

* RTL support

* Wrap in media query

* Final tweaks

* Query fix
  • Loading branch information
@ciar4n @rdeutz
ciar4n authored and rdeutz committed Jan 27, 2017
1 parent 67a6071 commit 7c1cc9d
Show file tree
Hide file tree
Showing 5 changed files with 278 additions and 1 deletion.
94 changes: 94 additions & 0 deletions administrator/templates/isis/css/template-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8804,6 +8804,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 @@ -9762,3 +9840,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
Original file line number Diff line number Diff line change
Expand Up @@ -8804,6 +8804,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
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
Original file line number Diff line number Diff line change
Expand Up @@ -1837,6 +1837,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
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

0 comments on commit 7c1cc9d

Please sign in to comment.