responsive design

lam/lib/html.inc

@@ -3647,15 +3647,8 @@ class htmlResponsiveInputField extends htmlInputField {
 	}
 
 	/**
-	 * Prints the HTML code for this element.
+	 * {@inheritDoc}
-	 *
+	 * @see htmlInputField::generateHTML()
-	 * @param string $module Name of account module
-	 * @param array $input List of meta-HTML elements
-	 * @param array $values List of values which override the defaults in $input (name => value)
-	 * @param boolean $restricted If true then no buttons will be displayed
-	 * @param integer $tabindex Start value of tabulator index for input fields
-	 * @param string $scope Account type
-	 * @return array List of input field names and their type (name => type)
 	 */
 	function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
 		if ($this->renderParentHtml) {
@@ -3685,5 +3678,153 @@ class htmlResponsiveInputField extends htmlInputField {
 
 }
 
+/**
+ * Responsive text area with label and help link.
+ *
+ * @package metaHTML
+ */
+class htmlResponsiveInputTextarea extends htmlInputTextarea {
+
+	/** descriptive label */
+	private $label;
+	/** help ID */
+	private $helpID;
+	/** required field */
+	private $required = false;
+	/** render HTML of parent class */
+	private $renderParentHtml = false;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param String $name unique name
+	 * @param String $value value
+	 * @param int $colCount number of characters per line
+	 * @param int $rowCount number of rows
+	 * @param String $label descriptive label
+	 * @param String $helpID help ID
+	 */
+	function __construct($name, $value, $colCount, $rowCount, $label, $helpID = null) {
+		parent::__construct($name, $value, $colCount, $rowCount);
+		$this->label = htmlspecialchars($label);
+		$this->helpID = $helpID;
+		$this->alignment = htmlElement::ALIGN_TOP;
+	}
+
+	/**
+	 * {@inheritDoc}
+	 * @see htmlInputField::generateHTML()
+	 */
+	function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
+		if ($this->renderParentHtml) {
+			return parent::generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
+		}
+		// HTML of parent class is rendered on second call (done by htmlResponsiveRow)
+		$this->renderParentHtml = true;
+		$row = new htmlResponsiveRow();
+		// label text
+		$labelGroup = new htmlGroup();
+		$labelGroup->addElement(new htmlOutputText($this->label));
+		if ($this->required) {
+			$graphicsPath = "../../graphics";
+			if (is_dir("../graphics")) $graphicsPath = "../graphics";
+			$labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required')));
+		}
+		if (!empty($this->helpID)) {
+			$helpLinkLabel = new htmlHelpLink($this->helpID);
+			$helpLinkLabel->setCSSClasses(array('hide-on-tablet', 'margin-left5'));
+			$labelGroup->addElement($helpLinkLabel);
+		}
+		$row->add($labelGroup, 12, 6, 6, 'responsiveLabel');
+		// input field
+		$fieldGroup = new htmlGroup();
+		$fieldGroup->addElement($this);
+		if (!empty($this->helpID)) {
+			$helpLink = new htmlHelpLink($this->helpID);
+			$helpLink->setCSSClasses(array('align-top', 'hide-on-mobile'));
+			$fieldGroup->addElement($helpLink);
+		}
+		$row->add($fieldGroup, 12, 6, 6, 'responsiveField nowrap');
+		return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
+	}
+
+	/**
+	 * Specifies if this input field must be filled.
+	 *
+	 * @param boolean $required required or not
+	 */
+	public function setRequired($required = true) {
+		$this->required = $required;
+	}
+
+}
+
+/**
+ * Responsive select with label and help link.
+ *
+ * @package metaHTML
+ */
+class htmlResponsiveSelect extends htmlSelect {
+
+	/** descriptive label */
+	private $label;
+	/** help ID */
+	private $helpID;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param String $name element name
+	 * @param array $elements list of elememts
+	 * @param array $selectedElements list of selected elements
+	 * @param String $label descriptive label
+	 * @param String $helpID help ID (optional, default none)
+	 * @param int $size size (optional, default = 1)
+	 */
+	function __construct($name, $elements, $selectedElements, $label, $helpID = null, $size = 1) {
+		parent::__construct($name, $elements, $selectedElements, $size);
+		$this->label = htmlspecialchars($label);
+		$this->helpID = $helpID;
+	}
+
+	/**
+	 * {@inheritDoc}
+	 * @see htmlInputField::generateHTML()
+	 */
+	function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
+		if ($this->renderParentHtml) {
+			return parent::generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
+		}
+		// HTML of parent class is rendered on second call (done by htmlResponsiveRow)
+		$this->renderParentHtml = true;
+		$row = new htmlResponsiveRow();
+		// label text
+		$labelGroup = new htmlGroup();
+		$labelGroup->addElement(new htmlOutputText($this->label));
+		if ($this->required) {
+			$graphicsPath = "../../graphics";
+			if (is_dir("../graphics")) $graphicsPath = "../graphics";
+			$labelGroup->addElement(new htmlImage($graphicsPath . '/required.png', 16, 16, _('required'), _('required')));
+		}
+		if (!empty($this->helpID)) {
+			$helpLinkLabel = new htmlHelpLink($this->helpID);
+			$helpLinkLabel->setCSSClasses(array('hide-on-tablet', 'margin-left5'));
+			$labelGroup->addElement($helpLinkLabel);
+		}
+		$row->add($labelGroup, 12, 6, 6, 'responsiveLabel');
+		// input field
+		$fieldGroup = new htmlGroup();
+		$fieldGroup->addElement($this);
+		if (!empty($this->helpID)) {
+			$helpLink = new htmlHelpLink($this->helpID);
+			$helpLink->setCSSClasses(array('hide-on-mobile'));
+			$fieldGroup->addElement($helpLink);
+		}
+		$row->add($fieldGroup, 12, 6, 6, 'responsiveField nowrap');
+		return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
+	}
+
+}
+
 
 ?>

lam/style/500_layout.css

@@ -3,7 +3,7 @@ $Id$
 
   This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/)
   Copyright (C) 2003  Leonhard Walchshaeusl
-  Copyright (C) 2005 - 2016  Roland Gruber
+  Copyright (C) 2005 - 2017  Roland Gruber
 
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
@@ -139,6 +139,10 @@ input {
 	margin: 20px;
 }
 
+.margin-left5 {
+	margin-left: 5px;
+}
+
 .padding05 {
 	padding: 0.5em;
 }
@@ -791,6 +795,10 @@ div.lam-dialog-msg {
 	text-align: left;
 }
 
+.hide-on-mobile {
+	display: none !important;
+}
+
 }
 
 /* tablet */
@@ -804,6 +812,10 @@ div.lam-dialog-msg {
 	text-align: left;
 }
 
+.hide-on-tablet {
+	display: none !important;
+}
+
 }
 
 /* desktop */
@@ -817,4 +829,12 @@ div.lam-dialog-msg {
 	text-align: left;
 }
 
+.hide-on-tablet {
+	display: none !important;
+}
+
+.hide-on-desktop {
+	display: none !important;
+}
+
 }

lam/style/responsive/120_lam.css

@@ -0,0 +1,26 @@
+/*
+
+  This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/)
+  Copyright (C) 2017  Roland Gruber
+
+  This program is free software; you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation; either version 2 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  GNU General Public License for more detaexils.
+
+  You should have received a copy of the GNU General Public License
+  along with this program; if not, write to the Free Software
+  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+
+*/
+
+/* CSS layout for LAM */
+
+textarea {
+	width: 100%;
+}