responsive design

This commit is contained in:
Roland Gruber 2017-11-01 13:45:20 +01:00
parent aab3658deb
commit c0d146d6e1
3 changed files with 197 additions and 10 deletions

View File

@ -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) { function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
if ($this->renderParentHtml) { 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);
}
}
?> ?>

View File

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

View File

@ -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%;
}