responsive self service
This commit is contained in:
Roland Gruber
parent
acb723c752
commit
d7f82c768a
101
lam/lib/html.inc
101
lam/lib/html.inc
|
|
@ -3235,7 +3235,108 @@ class htmlAccordion extends htmlElement {
|
|||
return $result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive row with 12 column layout.
|
||||
*/
|
||||
class htmlResponsiveRow extends htmlElement {
|
||||
|
||||
private $cells = array();
|
||||
|
||||
/**
|
||||
* Adds a responsive cell to the row.
|
||||
*
|
||||
* @param htmlResponsiveCell $cell cell
|
||||
*/
|
||||
public function addCell($cell) {
|
||||
$this->cells[] = $cell;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a cell with the given content and column counts.
|
||||
*
|
||||
* @param htmlElement $content content inside cell
|
||||
* @param int $numMobile number of columns for mobile view
|
||||
* @param int $numTablet number of columns for tablet view
|
||||
* @param int $numDesktop number of columns for desktop view
|
||||
* @param String $classes CSS classes separated by space
|
||||
*/
|
||||
public function add($content, $numMobile, $numTablet, $numDesktop, $classes = '') {
|
||||
$this->addCell(new htmlResponsiveCell($content, $numMobile, $numTablet, $numDesktop, $classes));
|
||||
}
|
||||
|
||||
/**
|
||||
* Prints the HTML code for this element.
|
||||
*
|
||||
* @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)
|
||||
*/
|
||||
public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
|
||||
echo '<div class="row">';
|
||||
foreach ($this->cells as $cell) {
|
||||
$cell->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
|
||||
}
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive cell inside htmlResponsiveRow with 12 column layout.
|
||||
*/
|
||||
class htmlResponsiveCell extends htmlElement {
|
||||
|
||||
private $content = null;
|
||||
private $mobile = null;
|
||||
private $tablet = null;
|
||||
private $desktop = null;
|
||||
private $classes = '';
|
||||
|
||||
/**
|
||||
* Constructs a cell inside a responsive row with 12 columns.
|
||||
*
|
||||
* @param htmlElement $content content inside cell
|
||||
* @param int $numMobile number of columns for mobile view
|
||||
* @param int $numTablet number of columns for tablet view
|
||||
* @param int $numDesktop number of columns for desktop view
|
||||
* @param String $classes CSS classes separated by space
|
||||
*/
|
||||
public function __construct($content, $numMobile, $numTablet, $numDesktop, $classes = '') {
|
||||
$this->content = $content;
|
||||
$this->mobile = $numMobile;
|
||||
$this->tablet = $numTablet;
|
||||
$this->desktop = $numDesktop;
|
||||
$this->classes = $classes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prints the HTML code for this element.
|
||||
*
|
||||
* @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)
|
||||
*/
|
||||
public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
|
||||
$clMobile = ($this->mobile > 0) ? 'small-' . $this->mobile : 'hide-for-small-only';
|
||||
$clTablet = ($this->tablet > 0) ? 'medium-' . $this->tablet : 'hide-for-medium-only';
|
||||
$clDesktop = ($this->desktop > 0) ? 'large-' . $this->desktop : 'hide-for-large-only';
|
||||
|
||||
echo '<div class="' . $clMobile . ' ' . $clTablet . ' ' . $clDesktop . ' columns ' . $this->classes . '">';
|
||||
$this->content->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
|
||||
echo '</div>';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -291,6 +291,23 @@ td.loginLogo {
|
|||
width: 65px;
|
||||
}
|
||||
|
||||
div.roundedShadowBox {
|
||||
border:2px solid #a0a0a4;
|
||||
border-radius:5px;
|
||||
box-shadow: 2px 2px 5px #a0a0a4;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
max-width: 575px;
|
||||
}
|
||||
|
||||
div.centeredTable {
|
||||
display: table;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.lamLogo {
|
||||
background-image: url(../graphics/logo24.png);
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -633,3 +650,42 @@ h4.schema_oclass_sub {
|
|||
.oracleContextType-bright { background:#b6eeff !important; }
|
||||
.oracleContextType-dark { background-color:#80e0e1 !important; }
|
||||
|
||||
/** responsive styles */
|
||||
/* mobile */
|
||||
@media only screen and (max-width: 40.0625em) {
|
||||
|
||||
.mobile-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mobile-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* tablet */
|
||||
@media only screen and (min-width: 40.0625em) and (max-width: 64.0625em) {
|
||||
|
||||
.tablet-align-left,.tabletPlus-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tablet-align-right,.tabletPlus-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
@media only screen and (min-width: 64.0625em) {
|
||||
|
||||
.desktop-align-left,.tabletPlus-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.desktop-align-right,.tabletPlus-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue