responsive design

This commit is contained in:
Roland Gruber 2019-08-15 14:13:10 +02:00
parent bb32bb6424
commit febba5803a
7 changed files with 28 additions and 11 deletions

View File

@ -1280,7 +1280,7 @@ abstract class baseModule {
public abstract function display_html_attributes(); public abstract function display_html_attributes();
/** /**
* Adds a simple text input field to the given htmlTable. * Adds a simple text input field to the given htmlTable/htmlResponsiveRow.
* The field name will be the same as the attribute name. There must also be a help entry with the attribute name as ID. * The field name will be the same as the attribute name. There must also be a help entry with the attribute name as ID.
* A new line will also be added after this entry so multiple calls will show the fields one below the other. * A new line will also be added after this entry so multiple calls will show the fields one below the other.
* *

View File

@ -1092,11 +1092,11 @@ class accountContainer {
echo '<div id="lamVerticalTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-bottom ui-helper-clearfix">'; echo '<div id="lamVerticalTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-bottom ui-helper-clearfix">';
echo '<table>'; echo '<table>';
echo '<tr><td>'; echo '<tr><td style="vertical-align: top;">';
// tab menu // tab menu
$this->printModuleTabs(); $this->printModuleTabs();
echo '</td><td>'; echo '</td><td style="vertical-align: top;">';
echo "<div class=\"lamEqualHeightTabContent ui-tabs-panel ui-widget-content ui-corner-bottom\">\n"; echo "<div class=\"ui-tabs-panel ui-widget-content ui-corner-bottom\">\n";
// content area // content area
// display html-code from modules // display html-code from modules
$return = call_user_func(array($this->module[$this->order[$this->current_page]], 'display_html_'.$this->subpage)); $return = call_user_func(array($this->module[$this->order[$this->current_page]], 'display_html_'.$this->subpage));
@ -1478,7 +1478,7 @@ class accountContainer {
private function printModuleTabs() { private function printModuleTabs() {
// $x is used to count up tabindex // $x is used to count up tabindex
$x=1; $x=1;
echo '<ul class="lamEqualHeightTabContent ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">'; echo '<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">';
// Loop for each module // Loop for each module
for ($i = 0; $i < count($this->order); $i++) { for ($i = 0; $i < count($this->order); $i++) {
$buttonStatus = $this->module[$this->order[$i]]->getButtonStatus(); $buttonStatus = $this->module[$this->order[$i]]->getButtonStatus();
@ -1494,8 +1494,7 @@ class accountContainer {
} }
// print button // print button
echo '<li class="ui-state-default ui-corner-left' . $activatedClass . '">'; echo '<li class="ui-state-default ui-corner-left' . $activatedClass . '">';
$buttonStyle = 'background-color:transparent;;border:0px solid;min-width: 200px;'; echo "<button class=\"lam-account-type\" name=\"form_main_".$this->order[$i]."\"";
echo "<button style=\"" . $buttonStyle . "\" name=\"form_main_".$this->order[$i]."\"";
echo " tabindex=$x"; echo " tabindex=$x";
if ($buttonStatus == 'disabled') { if ($buttonStatus == 'disabled') {
echo " disabled"; echo " disabled";
@ -1507,7 +1506,9 @@ class accountContainer {
} }
echo "<img height=32 width=32 class=\"align-middle\" style=\"padding: 3px;\" alt=\"\" src=\"$buttonImage\">&nbsp;"; echo "<img height=32 width=32 class=\"align-middle\" style=\"padding: 3px;\" alt=\"\" src=\"$buttonImage\">&nbsp;";
} }
echo '<span class="hide-on-mobile">';
echo $alias; echo $alias;
echo '<span>';
echo "&nbsp;</button>\n"; echo "&nbsp;</button>\n";
echo "</li>\n"; echo "</li>\n";
$x++; $x++;

View File

@ -1,10 +1,9 @@
<?php <?php
/* /*
$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 - 2006 Tilo Lutz Copyright (C) 2003 - 2006 Tilo Lutz
2005 - 2017 Roland Gruber 2005 - 2019 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
@ -209,7 +208,7 @@ class account extends baseModule {
* @return htmlElement HTML meta data * @return htmlElement HTML meta data
*/ */
function display_html_attributes() { function display_html_attributes() {
$container = new htmlTable(); $container = new htmlResponsiveRow();
// user name if no posixAccount // user name if no posixAccount
if (!$this->isUnixActive()) { if (!$this->isUnixActive()) {
$title = _('User name'); $title = _('User name');

View File

@ -575,11 +575,16 @@ tr.account {
color: #555555; color: #555555;
} }
button.lam-account-type {
background-color:transparent;
border:0px solid;
}
/* --- end of workaround for vertical tabs --- */ /* --- end of workaround for vertical tabs --- */
/* title bar */ /* title bar */
.titleBar { .titleBar {
background: #AAAAAA url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) repeat-x scroll 50% 50%; background: #AAAAAA url(images/ui-bg_highlight-soft_75_cccccc_1x150.png) repeat-x scroll 50% 50%;
border-top: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA; border-right: 1px solid #AAAAAA;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 360 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 B

View File

@ -167,6 +167,10 @@ table.responsive-table td {
overflow: hidden; overflow: hidden;
} }
button.lam-account-type {
min-width: 20px;
}
} }
/* tablet */ /* tablet */
@ -188,6 +192,10 @@ table.responsive-table td {
background-color:rgba(0, 0, 0, 0.05); background-color:rgba(0, 0, 0, 0.05);
} }
button.lam-account-type {
min-width: 200px;
}
} }
/* desktop */ /* desktop */
@ -213,4 +221,8 @@ table.responsive-table td {
background-color:rgba(0, 0, 0, 0.05); background-color:rgba(0, 0, 0, 0.05);
} }
button.lam-account-type {
min-width: 200px;
}
} }