responsive table

lam/lib/html.inc

@@ -1,6 +1,5 @@
 <?php
 /*
-$Id$
 
   This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/)
   Copyright (C) 2010 - 2017  Roland Gruber
@@ -3883,6 +3882,65 @@ class htmlResponsiveInputCheckbox extends htmlInputCheckbox {
 		return $row->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 '<table class="responsive-table">';
+		echo '<thead>';
+		echo '<tr>';
+		foreach ($this->titles as $title) {
+			echo '<th>' . htmlspecialchars($title) . '</th>';
+		}
+		echo '</tr>';
+		echo '</thead>';
+		echo '<tbody>';
+		$titleCount = sizeof($this->titles);
+		foreach ($this->data as $row) {
+			echo '<tr>';
+			for ($i = 0; $i < $titleCount; $i++) {
+				echo '<td data-label="' . $this->titles[$i] . '">';
+				$ids = parseHtml($module, $row[$i], $values, $restricted, $tabindex, $scope);
+				$return = array_merge($return, $ids);
+				echo '</td>';
+			}
+			echo '</tr>';
+		}
+		echo '</tbody>';
+		echo '</table>';
+		return $return;
+	}
+
+
+
 }
 
 

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

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 */