From c6501d479bce44e44802fbe942914953200688d3 Mon Sep 17 00:00:00 2001 From: Benjamin Renard Date: Wed, 2 Dec 2020 17:43:55 +0100 Subject: [PATCH] LSattr_html::jsonCompositeAttribute: Add fullWidth parameter and improve responsive display --- ...LSattr_html_jsonCompositeAttribute.docbook | 15 ++++++++++--- .../LSformElement_jsonCompositeAttribute.css | 21 +++++++++++++------ src/css/light-blue.css | 16 ++++++++++++-- ...s.LSformElement_jsonCompositeAttribute.php | 1 + .../LSformElement_jsonCompositeAttribute.tpl | 2 +- 5 files changed, 43 insertions(+), 12 deletions(-) diff --git a/doc/conf/LSattribute/LSattr_html/LSattr_html_jsonCompositeAttribute.docbook b/doc/conf/LSattribute/LSattr_html/LSattr_html_jsonCompositeAttribute.docbook index 1eeb58a8..a9494e9e 100644 --- a/doc/conf/LSattribute/LSattr_html/LSattr_html_jsonCompositeAttribute.docbook +++ b/doc/conf/LSattribute/LSattr_html/LSattr_html_jsonCompositeAttribute.docbook @@ -2,7 +2,7 @@ LSattr_html_jsonCompositeAttribute Ce type est utilisé pour la gestion des attributs dont les valeurs sont des dictionnaires de valeurs encodées aux formats JSON. - + Exemple de valeur gérée @@ -12,7 +12,7 @@ par leur clé et stockant une valeur dont le type peut être un texte libre ou bien être issue d'une liste déroulante configurable selon le même principe que le type d'attribut &LSattr_html_select_list;. - + Structure... array ( @@ -37,6 +37,7 @@ ), [...] ), + 'fullWidth' => [booléen], ),]]> ... @@ -108,7 +109,7 @@ Tableau associatif contenant les règles de vérification syntaxique des données du composant. Ces règles sont configurables de la même manière - que les celles des valeurs attributs. + que les celles des valeurs attributs. Voir la section concernée. @@ -118,5 +119,13 @@ + + fullWidth + + Booléen permettant de définir si l'affichage dans le formulaire doit se faire + sur toute la largeur disponible de la page (Défaut : Faux). + + + diff --git a/src/css/default/LSformElement_jsonCompositeAttribute.css b/src/css/default/LSformElement_jsonCompositeAttribute.css index fd40d644..e6d6e971 100644 --- a/src/css/default/LSformElement_jsonCompositeAttribute.css +++ b/src/css/default/LSformElement_jsonCompositeAttribute.css @@ -1,6 +1,7 @@ ul.LSformElement_jsonCompositeAttribute li { border: 1px dotted #CCC; padding: 2px; + overflow: auto; } ul.LSformElement_jsonCompositeAttribute li.noValue { @@ -21,6 +22,10 @@ ul.LSformElement_jsonCompositeAttribute div label { color: #666; } +ul.LSformElement_jsonCompositeAttribute_fullWidth div label { + width: 16em; +} + ul.LSformElement_jsonCompositeAttribute div ul { display: inline-block; list-style-type: none; @@ -55,8 +60,12 @@ ul.LSformElement_jsonCompositeAttribute div select { margin: 2px; } +ul.LSformElement_jsonCompositeAttribute_fullWidth, ul.LSformElement_jsonCompositeAttribute_fullWidth > li { + width: 100%; +} + @media (max-width: 1024px) { - ul.LSformElement_jsonCompositeAttribute { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) { width: 40vw; } @@ -64,26 +73,26 @@ ul.LSformElement_jsonCompositeAttribute div select { width: auto; } - ul.LSformElement_jsonCompositeAttribute div input[type=text], ul.LSformElement_jsonCompositeAttribute div select { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div input[type=text], ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div select { width: calc(40vw - 10px); box-sizing: border-box; } } @media (max-width: 400px) { - ul.LSformElement_jsonCompositeAttribute { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth), ul.LSformElement_jsonCompositeAttribute_fullWidth { width: calc(100% - 1em); } - ul.LSformElement_jsonCompositeAttribute div ul { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div ul, ul.LSformElement_jsonCompositeAttribute_fullWidth div ul { width: 100%; } - ul.LSformElement_jsonCompositeAttribute div ul input[type=text] { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div ul input[type=text], ul.LSformElement_jsonCompositeAttribute_fullWidth div ul input[type=text] { width: 100%; } - ul.LSformElement_jsonCompositeAttribute div select { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div select, ul.LSformElement_jsonCompositeAttribute_fullWidth div select { width: calc(100% - 4px); } } diff --git a/src/css/light-blue.css b/src/css/light-blue.css index b9d3d225..ea4e1655 100644 --- a/src/css/light-blue.css +++ b/src/css/light-blue.css @@ -198,15 +198,27 @@ td.LSobject-list, tr.LSobject-list { padding: 2px; } - .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit, div.LSformElement_wysiwyg_container, ul.LSformElement_jsonCompositeAttribute, dd.LSform-errors { + .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit, div.LSformElement_wysiwyg_container, ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth), dd.LSform-errors { width: 32vw; } ul.LSformElement_jsonCompositeAttribute div label { width: 10rem; } + ul.LSformElement_jsonCompositeAttribute_fullWidth div label { + width: 16rem; + } + ul.LSformElement_jsonCompositeAttribute_fullWidth div ul, ul.LSformElement_jsonCompositeAttribute_fullWidth div select { + width: calc(100% - 16rem - 1em); + } + ul.LSformElement_jsonCompositeAttribute_fullWidth div ul li { + width: 100%; + } + ul.LSformElement_jsonCompositeAttribute_fullWidth div ul li input[type=text] { + width: 100%; + } - ul.LSformElement_jsonCompositeAttribute div input[type=text], ul.LSformElement_jsonCompositeAttribute div select { + ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div input[type=text], ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) div select { width: calc(32vw - 10rem - 16px); } diff --git a/src/includes/class/class.LSformElement_jsonCompositeAttribute.php b/src/includes/class/class.LSformElement_jsonCompositeAttribute.php index 24b5102b..eaa164ae 100644 --- a/src/includes/class/class.LSformElement_jsonCompositeAttribute.php +++ b/src/includes/class/class.LSformElement_jsonCompositeAttribute.php @@ -95,6 +95,7 @@ class LSformElement_jsonCompositeAttribute extends LSformElement { $return['html'] = $this -> fetchTemplate(NULL, array( 'parseValues' => $parseValues, + 'fullWidth' => $this -> getParam('html_options.fullWidth', false, 'bool'), ) ); LStemplate :: addCssFile('LSformElement_jsonCompositeAttribute.css'); diff --git a/src/templates/default/LSformElement_jsonCompositeAttribute.tpl b/src/templates/default/LSformElement_jsonCompositeAttribute.tpl index 8a5f3d8a..562bbefd 100644 --- a/src/templates/default/LSformElement_jsonCompositeAttribute.tpl +++ b/src/templates/default/LSformElement_jsonCompositeAttribute.tpl @@ -1,4 +1,4 @@ -