bn8/ldapsaisie
1
0
Fork 0
mirror of https://gitlab.easter-eggs.com/ee/ldapsaisie.git synced 2024-11-22 18:09:06 +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>
@ -118,5 +119,13 @@
</listitem>
</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>
</sect4>

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

@ -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);
}
}

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

@ -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);
}

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

@ -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');

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}
<li>{include file="ls:$fieldTemplate"}</li>
{foreachelse}