responsive design

lam/lib/baseModule.inc

@@ -1280,7 +1280,7 @@ abstract class baseModule {
 	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.
 	 * A new line will also be added after this entry so multiple calls will show the fields one below the other.
 	 *

lam/lib/modules.inc

@@ -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 '<table>';
-			echo '<tr><td>';
+			echo '<tr><td style="vertical-align: top;">';
 			// tab menu
 			$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
 			// display html-code from modules
 			$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() {
 		// $x is used to count up tabindex
 		$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
 		for ($i = 0; $i < count($this->order); $i++) {
 			$buttonStatus = $this->module[$this->order[$i]]->getButtonStatus();
@@ -1494,8 +1494,7 @@ class accountContainer {
 			}
 			// print button
 			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";
 			if ($buttonStatus == '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 '<span class="hide-on-mobile">';
 			echo $alias;
+			echo '<span>';
 			echo "&nbsp;</button>\n";
 			echo "</li>\n";
 			$x++;

lam/lib/modules/account.inc

@@ -1,10 +1,9 @@
 <?php
 /*
-$Id$
 
   This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/)
   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
   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
 	 */
 	function display_html_attributes() {
-		$container = new htmlTable();
+		$container = new htmlResponsiveRow();
 		// user name if no posixAccount
 		if (!$this->isUnixActive()) {
 			$title = _('User name');

lam/style/500_layout.css

@@ -575,11 +575,16 @@ tr.account {
 	color: #555555;
 }
 
+button.lam-account-type {
+	background-color:transparent;
+	border:0px solid;
+}
+
 /* --- end of workaround for vertical tabs --- */
 
 /* title bar */
 .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-left: 1px solid #AAAAAA;
 	border-right: 1px solid #AAAAAA;

lam/style/responsive/120_lam.css

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