diff --git a/lam/lib/html.inc b/lam/lib/html.inc
index e14e1a9f..507c65df 100644
--- a/lam/lib/html.inc
+++ b/lam/lib/html.inc
@@ -1,6 +1,5 @@
generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
}
+}
+
+/**
+ * Responsive table.
+ *
+ * @author roland Gruber
+ */
+class htmlResponsiveTable extends htmlElement {
+
+ /** @var string[] row titles */
+ private $titles;
+
+ /** htmlElement[][] data rows */
+ private $data;
+
+ /**
+ * Creates the table.
+ *
+ * @param string[] $titles row titles
+ * @param htmlElement[][] $data data rows
+ */
+ public function __construct($titles, $data) {
+ $this->titles = $titles;
+ $this->data = $data;
+ }
+
+ /**
+ * {@inheritDoc}
+ * @see htmlElement::generateHTML()
+ */
+ public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
+ $return = array();
+ echo '
';
+ echo '';
+ echo '';
+ foreach ($this->titles as $title) {
+ echo '' . htmlspecialchars($title) . ' | ';
+ }
+ echo '
';
+ echo '';
+ echo '';
+ $titleCount = sizeof($this->titles);
+ foreach ($this->data as $row) {
+ echo '';
+ for ($i = 0; $i < $titleCount; $i++) {
+ echo '';
+ $ids = parseHtml($module, $row[$i], $values, $restricted, $tabindex, $scope);
+ $return = array_merge($return, $ids);
+ echo ' | ';
+ }
+ echo '
';
+ }
+ echo '';
+ echo '
';
+ return $return;
+ }
+
+
+
}
diff --git a/lam/style/500_layout.css b/lam/style/500_layout.css
index 3b9ebb6a..b0434a92 100644
--- a/lam/style/500_layout.css
+++ b/lam/style/500_layout.css
@@ -1,5 +1,4 @@
/*
-$Id$
This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/)
Copyright (C) 2003 Leonhard Walchshaeusl
diff --git a/lam/style/responsive/120_lam.css b/lam/style/responsive/120_lam.css
index 817cd76e..36835c8b 100644
--- a/lam/style/responsive/120_lam.css
+++ b/lam/style/responsive/120_lam.css
@@ -57,6 +57,21 @@ div.lam-dialog-msg {
margin: 10px;
}
+table.responsive-table {
+ margin-top: 1rem;
+ table-layout: fixed;
+ width: 100%;
+}
+
+table.responsive-table th {
+ text-align: left;
+ padding: 0;
+}
+
+table.responsive-table td {
+ overflow: hidden;
+}
+
/* mobile */
@media only screen and (max-width: 40.0625em) {
@@ -68,6 +83,42 @@ div.lam-dialog-msg {
display: none !important;
}
+ table.responsive-table thead {
+ border: none;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ }
+
+ table.responsive-table tr {
+ border-bottom: 3px solid #f1f1f1;
+ display: block;
+ margin-bottom: .6rem;
+ }
+
+ table.responsive-table td {
+ border-bottom: 1px solid #f1f1f1;
+ display: block;
+ text-align: right;
+ }
+
+ table.responsive-table td:before {
+ content: attr(data-label);
+ float: left;
+ font-weight: bold;
+ }
+
+ table.responsive-table td:last-child {
+ border-bottom: 0;
+ }
+
+ table.responsive-table tr:last-child {
+ border-bottom: 0;
+ }
+
}
/* tablet */