diff --git a/administrator/templates/isis/css/template-rtl.css b/administrator/templates/isis/css/template-rtl.css index bb4a05a943c85..1b63be570a365 100644 --- a/administrator/templates/isis/css/template-rtl.css +++ b/administrator/templates/isis/css/template-rtl.css @@ -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; } @@ -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; +} diff --git a/administrator/templates/isis/css/template.css b/administrator/templates/isis/css/template.css index 9aeea5f6e538d..5415619a9e2ad 100644 --- a/administrator/templates/isis/css/template.css +++ b/administrator/templates/isis/css/template.css @@ -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; } diff --git a/administrator/templates/isis/less/template-rtl.less b/administrator/templates/isis/less/template-rtl.less index 6b785b5715f8e..b83cc49d08a26 100644 --- a/administrator/templates/isis/less/template-rtl.less +++ b/administrator/templates/isis/less/template-rtl.less @@ -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; + } } \ No newline at end of file diff --git a/administrator/templates/isis/less/template.less b/administrator/templates/isis/less/template.less index 8e34e2e243c49..afa4b250b2cee 100644 --- a/administrator/templates/isis/less/template.less +++ b/administrator/templates/isis/less/template.less @@ -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; diff --git a/layouts/joomla/form/field/subform/repeatable-table/section.php b/layouts/joomla/form/field/subform/repeatable-table/section.php index 4f7f3919ea156..5b593be11519e 100644 --- a/layouts/joomla/form/field/subform/repeatable-table/section.php +++ b/layouts/joomla/form/field/subform/repeatable-table/section.php @@ -23,7 +23,7 @@