From ab78756094971cb56513daa5afcdd4efabf4881d Mon Sep 17 00:00:00 2001 From: Roland Gruber Date: Sun, 5 Nov 2017 18:47:15 +0100 Subject: [PATCH] responsive layout --- lam/style/120_jquery-ui-1.10.1.custom.css | 1 + lam/style/500_layout.css | 6 ++ lam/style/responsive/120_lam.css | 4 + lam/templates/config/confmodules.php | 98 +++++++++-------------- lam/templates/config/index.php | 14 ++-- 5 files changed, 54 insertions(+), 69 deletions(-) diff --git a/lam/style/120_jquery-ui-1.10.1.custom.css b/lam/style/120_jquery-ui-1.10.1.custom.css index b70345b9..2612a60c 100644 --- a/lam/style/120_jquery-ui-1.10.1.custom.css +++ b/lam/style/120_jquery-ui-1.10.1.custom.css @@ -72,6 +72,7 @@ text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; + margin-top: 7px; } diff --git a/lam/style/500_layout.css b/lam/style/500_layout.css index b341e5b4..47af0d89 100644 --- a/lam/style/500_layout.css +++ b/lam/style/500_layout.css @@ -416,6 +416,12 @@ td.loginRightBox { max-width: 580px; } +.size16 { + height: 16px; + width: 16px; + max-width: 16px; +} + div.centeredTable { display: table; width: 100%; diff --git a/lam/style/responsive/120_lam.css b/lam/style/responsive/120_lam.css index 36835c8b..60e8aa7f 100644 --- a/lam/style/responsive/120_lam.css +++ b/lam/style/responsive/120_lam.css @@ -119,6 +119,10 @@ table.responsive-table td { border-bottom: 0; } + .margin-right5-mobile-only { + margin-right: 5px; + } + } /* tablet */ diff --git a/lam/templates/config/confmodules.php b/lam/templates/config/confmodules.php index 355d6de2..46e42823 100644 --- a/lam/templates/config/confmodules.php +++ b/lam/templates/config/confmodules.php @@ -11,9 +11,9 @@ use \htmlImage; use \htmlSortableList; use \htmlSubTitle; use \htmlDiv; +use \htmlResponsiveRow; +use \htmlGroup; /* -$Id$ - This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/) Copyright (C) 2004 - 2017 Roland Gruber @@ -108,40 +108,10 @@ if (isset($_POST['saveSettings']) || isset($_POST['editmodules']) } echo $_SESSION['header']; - -echo "" . _("LDAP Account Manager Configuration") . "\n"; - -// include all CSS files -$cssDirName = dirname(__FILE__) . '/../../style'; -$cssDir = dir($cssDirName); -$cssFiles = array(); -$cssEntry = $cssDir->read(); -while ($cssEntry !== false) { - if (substr($cssEntry, strlen($cssEntry) - 4, 4) == '.css') { - $cssFiles[] = $cssEntry; - } - $cssEntry = $cssDir->read(); -} -sort($cssFiles); -foreach ($cssFiles as $cssEntry) { - echo "\n"; -} - -echo "\n"; -echo "\n"; -echo "\n"; +printHeaderContents(_("LDAP Account Manager Configuration"), '../..'); +echo "\n"; // include all JavaScript files -$jsDirName = dirname(__FILE__) . '/../lib'; -$jsDir = dir($jsDirName); -$jsFiles = array(); -while ($jsEntry = $jsDir->read()) { - if (substr($jsEntry, strlen($jsEntry) - 3, 3) != '.js') continue; - $jsFiles[] = $jsEntry; -} -sort($jsFiles); -foreach ($jsFiles as $jsEntry) { - echo "\n"; -} +printJsIncludes('../..'); ?> @@ -150,7 +120,7 @@ foreach ($jsFiles as $jsEntry) { @@ -178,24 +148,24 @@ echo '
'; echo ''; @@ -223,16 +193,17 @@ jQuery(document).ready(function() { $typeManager = new \LAM\TYPES\TypeManager($conf); $types = $typeManager->getConfiguredTypes(); -$container = new htmlTable(); +$container = new htmlResponsiveRow(); foreach ($types as $type) { config_showAccountModules($type, $container); } -$legendContainer = new htmlTable(); +$legendContainer = new htmlGroup(); $legendContainer->addElement(new htmlOutputText("(*) " . _("Base module"))); +$legendContainer->addElement(new \htmlSpacer('2rem', null)); $legendContainer->addElement(new htmlHelpLink('237')); -$container->addElement($legendContainer); -$container->addElement(new htmlHiddenInput('postAvailable', 'yes')); +$container->add($legendContainer, 12); +$container->add(new htmlHiddenInput('postAvailable', 'yes'), 12); $tabindex = 1; parseHtml(null, $container, array(), false, $tabindex, 'user'); @@ -269,7 +240,7 @@ echo "\n"; * Displays the module selection boxes and checks if dependencies are fulfilled. * * @param \LAM\TYPES\ConfiguredType $type account type -* @param htmlTable $container meta HTML container +* @param htmlResponsiveRow $container meta HTML container */ function config_showAccountModules($type, &$container) { // account modules @@ -306,41 +277,44 @@ function config_showAccountModules($type, &$container) { } // add account module selection - $container->addElement(new htmlSubTitle($type->getAlias(), '../../graphics/' . $type->getIcon()), true); - $container->addElement(new htmlOutputText(_("Selected modules"))); - $container->addElement(new htmlOutputText('')); - $container->addElement(new htmlOutputText(_("Available modules")), true); - $container->addVerticalSpace('10px'); - $container->addNewLine(); + $container->add(new htmlSubTitle($type->getAlias(), '../../graphics/' . $type->getIcon()), 12); + $container->add(new htmlOutputText(_("Selected modules")), 12, 6); + $container->add(new htmlOutputText(_("Available modules")), 0, 6); + $container->addVerticalSpacer('1rem'); // selected modules if (sizeof($selOptions) > 0) { $listElements = array(); foreach ($selOptions as $key => $value) { $el = new htmlTable('100%'); $mod = new $value($type->getScope()); - $el->addElement(new htmlImage('../../graphics/' . $mod->getIcon(), '16px', '16px')); + $availModImage = new htmlImage('../../graphics/' . $mod->getIcon()); + $availModImage->setCSSClasses(array('size16', 'margin-right5-mobile-only')); + $el->addElement($availModImage); $el->addElement(new htmlOutputText($key)); $delButton = new htmlButton('del_' . $type->getId() . '_' . $value, 'del.png', true); $delButton->alignment = htmlElement::ALIGN_RIGHT; $el->addElement($delButton); $listElements[] = $el; } - $selSortable = new htmlSortableList($listElements, $type->getId() . '_selected', '350px'); + $selSortable = new htmlSortableList($listElements, $type->getId() . '_selected', null); $selSortable->alignment = htmlElement::ALIGN_TOP; $selSortable->setOnUpdate('updateModulePositions(\'positions_' . $type->getId() . '\', ui.item.data(\'posOrig\'), ui.item.index());'); - $container->addElement($selSortable); + $container->add($selSortable, 12, 6); } else { - $container->addElement(new htmlOutputText('')); + $container->add(new htmlOutputText(''), 12, 6); } - // space - $container->addSpace('20px'); // available modules if (sizeof($availOptions) > 0) { + $container->add(new htmlSpacer(null, '2rem'), 12, 0, 0, 'hide-on-tablet'); + $container->add(new htmlOutputText(_("Available modules")), 12, 0, 0, 'hide-on-tablet'); + $container->add(new htmlSpacer(null, '1rem'), 12, 0, 0, 'hide-on-tablet'); $availTable = new htmlTable(); foreach ($availOptions as $text => $key) { $mod = new $key($type->getScope()); - $availTable->addElement(new htmlImage('../../graphics/' . $mod->getIcon(), '16px', '16px')); + $availModImage = new htmlImage('../../graphics/' . $mod->getIcon()); + $availModImage->setCSSClasses(array('size16', 'margin10')); + $availTable->addElement($availModImage); $availTable->addElement(new htmlOutputText($text)); $addButton = new htmlButton('add_' . $type->getId() . '_' . $key, 'add.png', true); $addButton->alignment = htmlElement::ALIGN_RIGHT; @@ -349,15 +323,15 @@ function config_showAccountModules($type, &$container) { $availDiv = new htmlDiv(null, $availTable); $availDiv->alignment = htmlElement::ALIGN_TOP; $availDiv->setCSSClasses(array('confModList')); - $container->addElement($availDiv, true); + $container->add($availDiv, 12, 6); } $positions = array(); for ($i = 0; $i < sizeof($selOptions); $i++) { $positions[] = $i; } - $container->addElement(new htmlHiddenInput('positions_' . $type->getId(), implode(',', $positions)), true); + $container->add(new htmlHiddenInput('positions_' . $type->getId(), implode(',', $positions)), 12); // spacer to next account type - $container->addElement(new htmlSpacer(null, '30px'), true); + $container->addVerticalSpacer('2rem'); } /** diff --git a/lam/templates/config/index.php b/lam/templates/config/index.php index 0c5c416b..9f373f35 100644 --- a/lam/templates/config/index.php +++ b/lam/templates/config/index.php @@ -3,7 +3,7 @@ $Id$ This code is part of LDAP Account Manager (http://www.ldap-account-manager.org/) - Copyright (C) 2003 - 2016 Roland Gruber + Copyright (C) 2003 - 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 @@ -69,10 +69,10 @@ printHeaderContents(_("Configuration overview"), '../..'); general settings -
@@ -81,10 +81,10 @@ printHeaderContents(_("Configuration overview"), '../..'); server settings - \n"; echo "\n"; echo "\n"; - echo "\n"; echo "\n"; }
- getName(); ?> + ' . _('Server profile') . ': ' . $conf->getName(); ?>   
+ - +
+ - +
\n"; + echo "\n"; echo "\n"; echo _("Edit self service"); - echo "\n"; + echo "\n"; echo "