bn8/ldapsaisie
1
0
Fork 0
mirror of https://gitlab.easter-eggs.com/ee/ldapsaisie.git synced 2024-11-26 19:54:46 +01:00
Code Issues Projects Releases Wiki Activity

LSattr_html::jsonCompositeAttribute: Add fullWidth parameter and improve responsive display

Browse source
This commit is contained in:
Benjamin Renard 2020-12-02 17:43:55 +01:00
parent 2161cc701a
commit c6501d479b
5 changed files with 43 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
doc/conf/LSattribute/LSattr_html/LSattr_html_jsonCompositeAttribute.docbook
View file

@ -37,6 +37,7 @@
), ),
[...] [...]
), ),
'fullWidth' => [booléen],
),]]> ),]]>
... ...
</programlisting> </programlisting>
@ -118,5 +119,13 @@
</listitem> </listitem>
</varlistentry> </varlistentry>
<varlistentry>
<term>fullWidth</term>
<listitem>
<simpara>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 : <emphasis>Faux</emphasis>).</simpara>
</listitem>
</varlistentry>
</variablelist> </variablelist>
</sect4> </sect4>

21
src/css/default/LSformElement_jsonCompositeAttribute.css
View file

@ -1,6 +1,7 @@
ul.LSformElement_jsonCompositeAttribute li { ul.LSformElement_jsonCompositeAttribute li {
border: 1px dotted #CCC; border: 1px dotted #CCC;
padding: 2px; padding: 2px;
overflow: auto;
} }
ul.LSformElement_jsonCompositeAttribute li.noValue { ul.LSformElement_jsonCompositeAttribute li.noValue {
@ -21,6 +22,10 @@ ul.LSformElement_jsonCompositeAttribute div label {
color: #666; color: #666;
} }
ul.LSformElement_jsonCompositeAttribute_fullWidth div label {
width: 16em;
}
ul.LSformElement_jsonCompositeAttribute div ul { ul.LSformElement_jsonCompositeAttribute div ul {
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
@ -55,8 +60,12 @@ ul.LSformElement_jsonCompositeAttribute div select {
margin: 2px; margin: 2px;
} }
ul.LSformElement_jsonCompositeAttribute_fullWidth, ul.LSformElement_jsonCompositeAttribute_fullWidth > li {
width: 100%;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
ul.LSformElement_jsonCompositeAttribute { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth) {
width: 40vw; width: 40vw;
} }
@ -64,26 +73,26 @@ ul.LSformElement_jsonCompositeAttribute div select {
width: auto; 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); width: calc(40vw - 10px);
box-sizing: border-box; box-sizing: border-box;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
ul.LSformElement_jsonCompositeAttribute { ul.LSformElement_jsonCompositeAttribute:not(.LSformElement_jsonCompositeAttribute_fullWidth), ul.LSformElement_jsonCompositeAttribute_fullWidth {
width: calc(100% - 1em); 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%; 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%; 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); width: calc(100% - 4px);
} }
} }

16
src/css/light-blue.css
View file

@ -198,15 +198,27 @@ td.LSobject-list, tr.LSobject-list {
padding: 2px; 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; width: 32vw;
} }
ul.LSformElement_jsonCompositeAttribute div label { ul.LSformElement_jsonCompositeAttribute div label {
width: 10rem; 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); width: calc(32vw - 10rem - 16px);
} }

1
src/includes/class/class.LSformElement_jsonCompositeAttribute.php
View file

@ -95,6 +95,7 @@ class LSformElement_jsonCompositeAttribute extends LSformElement {
$return['html'] = $this -> fetchTemplate(NULL, $return['html'] = $this -> fetchTemplate(NULL,
array( array(
'parseValues' => $parseValues, 'parseValues' => $parseValues,
'fullWidth' => $this -> getParam('html_options.fullWidth', false, 'bool'),
) )
); );
LStemplate :: addCssFile('LSformElement_jsonCompositeAttribute.css'); LStemplate :: addCssFile('LSformElement_jsonCompositeAttribute.css');

2
src/templates/default/LSformElement_jsonCompositeAttribute.tpl
View file

@ -1,4 +1,4 @@
<ul class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_jsonCompositeAttribute' id='{$attr_name|escape:"quotes"}' data-fieldType='{$fieldType|escape:"quotes"}'> <ul class='LSform {if $multiple && !$freeze} LSformElement_multiple{/if} LSformElement_jsonCompositeAttribute{if $fullWidth} LSformElement_jsonCompositeAttribute_fullWidth{/if}' id='{$attr_name|escape:"quotes"}' data-fieldType='{$fieldType|escape:"quotes"}'>
{foreach from=$parseValues item=parseValue} {foreach from=$parseValues item=parseValue}
<li>{include file="ls:$fieldTemplate"}</li> <li>{include file="ls:$fieldTemplate"}</li>
{foreachelse} {foreachelse}