responsive self service

lam/lib/html.inc

@@ -878,7 +878,7 @@ class htmlHelpLink extends htmlElement {
 		}
 		// print link
 		$helpEntry = getHelp($module, $this->helpID, $scope);
-		printHelpLink($helpEntry, $this->helpID, $module, $scope);
+		printHelpLink($helpEntry, $this->helpID, $module, $scope, $this->cssClasses);
 		return array();
 	}
 
@@ -3308,9 +3308,10 @@ class htmlResponsiveRow extends htmlElement {
 	 * Adds the content as a typical field with 12/6/6 columns and CSS class "responsiveField".
 	 *
 	 * @param htmlElement $content field
+	 * @param $cssClasses CSS class names separated by space
 	 */
-	public function addField($content) {
+	public function addField($content, $cssClasses = '') {
-		$this->add($content, 12, 6, 6, 'responsiveField');
+		$this->add($content, 12, 6, 6, 'responsiveField ' . $cssClasses);
 	}
 
 	/**

lam/lib/modules.inc

@@ -652,8 +652,9 @@ function lamCompareDescriptiveOptions(&$a, &$b) {
  * @param String $number help number
  * @param String $module module name
  * @param String $scope account scope
+ * @param array $classes CSS classes
  */
-function printHelpLink($entry, $number, $module='', $scope='') {
+function printHelpLink($entry, $number, $module = '', $scope = '', $classes = array()) {
 	$helpPath = "../";
 	if (is_file("./help.php")) $helpPath = "";
 	$title = $entry['Headline'];
@@ -664,7 +665,7 @@ function printHelpLink($entry, $number, $module='', $scope='') {
 	// replace special characters
 	$message = htmlspecialchars($message);
 	$title = htmlspecialchars($title);
-	echo "<a class=\"margin2\" href=\"" . $helpPath . "help.php?module=$module&amp;HelpNumber=". $number . "&amp;scope=" . $scope . "\" ";
+	echo "<a class=\"margin2 " . implode(" ", $classes) . "\" href=\"" . $helpPath . "help.php?module=$module&amp;HelpNumber=". $number . "&amp;scope=" . $scope . "\" ";
 		echo "target=\"help\">";
 		echo "<img helptitle=\"" . $title . "\" helpdata=\"" . $message . "\" class=\"align-middle\" width=16 height=16 src=\"../${helpPath}graphics/help.png\" alt=\"" . _('Help') . "\">";
 	echo "</a>";

lam/lib/modules/inetOrgPerson.inc

@@ -2773,23 +2773,22 @@ class inetOrgPerson extends baseModule implements passwordService {
 				$userCertificates = $attributes['userCertificate;binary'];
 			}
 			$_SESSION[self::SESS_CERTIFICATES_LIST] = $userCertificates;
-			$certTable = new htmlTable();
+			$certTable = new htmlResponsiveRow();
-			$certTable->addElement(new htmlDiv('userCertificateDiv', $this->getSelfServiceUserCertificates()), true);
+			$certTable->add(new htmlDiv('userCertificateDiv', $this->getSelfServiceUserCertificates()), 12);
 			// JavaScript functions
-			$certTable->addElement($this->getSelfServiceUserCertificatesJSBlock(), true);
+			$certTable->add($this->getSelfServiceUserCertificatesJSBlock(), 12);
 			// upload button
 			$uploadButtons = new htmlGroup();
 			$uploadButtons->addElement(new htmlDiv('inetOrgPersonCertUploadId', new htmlOutputText('')), true);
 			$certUpload = new htmlJavaScript('inetOrgPersonUploadCert(\'inetOrgPersonCertUploadId\');');
 			$uploadButtons->addElement($certUpload);
-			$certTable->addElement($uploadButtons, true);
+			$certTable->add($uploadButtons, 12);
 			// upload status
 			$uploadStatus = new htmlDiv('inetOrgPerson_upload_status_cert', new htmlOutputText(''));
 			$uploadStatus->setCSSClasses(array('qq-upload-list'));
 			$uploadStatus->colspan = 7;
-			$certTable->addElement($uploadStatus, true);
+			$certTable->add($uploadStatus, 12);
 			$certLabel = new htmlOutputText($this->getSelfServiceLabel('userCertificate', _('User certificates')));
-			$certLabel->alignment = htmlElement::ALIGN_TOP;
 			$return['userCertificate'] = new htmlResponsiveRow($certLabel, $certTable);
 		}
 		// ou
@@ -2858,10 +2857,11 @@ class inetOrgPerson extends baseModule implements passwordService {
 	 */
 	private function getSelfServiceUserCertificates() {
 		$userCertificates = $_SESSION[self::SESS_CERTIFICATES_LIST];
-		$content = new htmlTable();
+		$content = new htmlGroup();
 		if (sizeof($userCertificates) > 0) {
-			$certTable = new htmlTable();
+			$certTable = new htmlResponsiveRow();
 			for ($i = 0; $i < sizeof($userCertificates); $i++) {
+				$group = new htmlGroup();
 				$filename = 'userCertificate' . getRandomNumber() . '.der';
 				$out = @fopen(dirname(__FILE__) . '/../../tmp/' . $filename, "wb");
 				fwrite($out, $userCertificates[$i]);
@@ -2880,21 +2880,22 @@ class inetOrgPerson extends baseModule implements passwordService {
 							$data[] = $pemData['name'];
 						}
 						if (sizeof($data) > 0) {
-							$certTable->addElement(new htmlOutputText(implode(': ', $data)));
+							$group->addElement(new htmlOutputText(implode(': ', $data)));
+							$group->addElement(new htmlSpacer('5px', null));
 						}
 					}
 				}
 				$saveLink = new htmlLink('', $path, '../../graphics/save.png');
 				$saveLink->setTitle(_('Save'));
 				$saveLink->setTargetWindow('_blank');
-				$certTable->addElement($saveLink);
+				$group->addElement($saveLink);
 				$delLink = new htmlLink('', '#', '../../graphics/del.png');
 				$delLink->setTitle(_('Delete'));
 				$delLink->setOnClick('inetOrgPersonDeleteCertificate(' . $i . '); return false;');
-				$certTable->addElement($delLink);
+				$group->addElement($delLink);
-				$certTable->addNewLine();
+				$certTable->add($group, 12);
 			}
-			$content->addElement($certTable, true);
+			$content->addElement($certTable);
 		}
 		return $content;
 	}

lam/style/500_layout.css

@@ -128,6 +128,10 @@ input {
 	vertical-align: middle;
 }
 
+.align-top {
+	vertical-align: top;
+}
+
 table.lamHeader {
   background-image: url(lam-images/headerLine.png);
   padding: 0px;
@@ -672,10 +676,22 @@ h4.schema_oclass_sub {
 
 /** responsive styles */
 
+.row {
+	margin-top: 5px;
+}
+
 .row input {
 	width: 100%;
 }
 
+.row input[type="checkbox"] {
+	width: auto;
+}
+
+.row input[type="radio"] {
+	width: auto;
+}
+
 div.dialog-page {
 	float: left;
 }