Modèle:Filtre : Différence entre versions

[version non vérifiée][version vérifiée]
(Page créée avec « <div data-element="form" data-id="filter-form"> {{#if:{{{Range1|}}}| <div style="position: relative; display: inline-block;"> <div data-element="button" data-type="button"... »)
 
(Annulation des modifications 105521 de Ankhseram (discussion))
(Balise : Annuler)
 
(95 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
<div data-element="form" data-id="filter-form">
+
{{LoadJavascript|Script=element}} {{LoadJavascript|Script=filter}}
{{#if:{{{Range1|}}}|
+
{{Form|style=display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; user-select: none;|id=filter-form|content=
<div style="position: relative; display: inline-block;">
+
{{#if:{{{Nom|}}}|
<div data-element="button" data-type="button" data-aria-controls="level-range" data-aria-haspopup="true" data-aria-expanded="false" data-style="padding: 10px 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; cursor: pointer; user-select: none; display: inline-block;">Filtrer par niveau</div>
+
<div style="position: relative;">
<div id="level-range" class="container tabber-noactive dropdown-menu" style="position: absolute; z-index: 10; top: 100%; left: 0; min-width: max-content; width: 170px; padding: 5px 0; margin: 0; list-style: none; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; flex-direction: column; gap: 5px;">
+
{{FiltreModule
<div data-element="label-input" data-id="level-min" data-type="number" data-min="0" data-max="135" data-value="0" data-style="display: inline-block; vertical-align: middle; margin-right: 10px; width: 40px; height: 20px; border: 1px solid #ccc; border-radius: 3px; appearance: none;">Niveau min.</div>
+
|Type=Text
<div data-element="label-input" data-id="level-max" data-type="number" data-min="0" data-max="135" data-value="135" data-style="display: inline-block; vertical-align: middle; margin-right: 10px; width: 40px; height: 20px; border: 1px solid #ccc; border-radius: 3px; appearance: none;">Niveau max.</div>
+
|id=filter-name
 +
|placeholder=Rechercher un monstre
 +
}}
 
</div>
 
</div>
 +
}} {{#if:{{{Niveau|}}}|
 +
<div style="position: relative;">
 +
{{FiltreModule
 +
|Type=Range
 +
|id={{FiltreCorrespondance|Niveau}}
 +
|Nom=Niveau
 +
|min=1
 +
|max=135
 +
|param=levels
 +
}}
 
</div>
 
</div>
 +
}} {{#if:{{{Rang|}}}|
 +
<div style="position: relative;">
 +
{{FiltreModule
 +
|Type=Checkbox
 +
|id={{FiltreCorrespondance|Rang}}
 +
|Nom=Rang
 +
|param=levels
 +
 +
|Checkbox1=1
 +
|Checkbox2=2
 +
|Checkbox3=3
 +
|Checkbox4=4
 +
|Checkbox5=Boss
 +
|Checkbox6=5
 
}}
 
}}
<div style="position: relative; display: inline-block;">
 
<div data-element="button" data-type="button" data-aria-controls="level-range" data-aria-haspopup="true" data-aria-expanded="false" data-style="padding: 10px 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; cursor: pointer; user-select: none; display: inline-block;">Filtrer par niveau</div>
 
<div id="element" class="container tabber-noactive dropdown-menu" style="position: absolute; z-index: 10; top: 100%; left: 0; min-width: max-content; width: 170px; padding: 5px 0; margin: 0; list-style: none; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; flex-direction: column; gap: 5px;">
 
<div data-element="label-input" data-id="feu" data-type="checkbox" data-style="display: inline-block; vertical-align: middle; margin-right: 10px; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 3px; margin-left: 0;">Feu</div>
 
<div data-element="label-input" data-id="glace" data-type="checkbox" data-style="display: inline-block; vertical-align: middle; margin-right: 10px; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 3px; margin-left: 0;">Glace</div>
 
 
</div>
 
</div>
 +
}} {{#if:{{{Élément|}}}|
 +
<div style="position: relative;">
 +
{{FiltreModule
 +
|Type=Checkbox
 +
|id={{FiltreCorrespondance|Élément}}
 +
|Nom=Élément
 +
|param=elem
 +
 +
|Checkbox1=Feu
 +
|Checkbox2=Glace
 +
|Checkbox3=Foudre
 +
|Checkbox4=Vent
 +
|Checkbox5=Obscurité
 +
|Checkbox6=Terre
 +
|Checkbox7=Aucun
 +
 +
|id5=obscurite
 +
 +
}}
 
</div>
 
</div>
 +
}} {{#if:{{{Type|}}}|
 +
<div style="position: relative;">
 +
{{FiltreModule
 +
|Type=Checkbox
 +
|id={{FiltreCorrespondance|Type}}
 +
|Nom=Type
 +
|param=replace__type
 +
 +
|Checkbox1=Demi-humain
 +
|Checkbox2=Mal
 +
|Checkbox3=Désert
 +
|Checkbox4=Animal
 +
|Checkbox5=Orc
 +
|Checkbox6=Mystique
 +
|Checkbox7=Mort-vivant
 +
|Checkbox8=Insecte
 +
|Checkbox9=Zodiaque
 +
|Checkbox10=Aucun
 +
 +
|id3=desert
 +
 +
}}
 
</div>
 
</div>
 +
}} {{#if:{{{Dégât|}}}|
 +
<div style="position: relative;">
 +
{{FiltreModule
 +
|Type=Checkbox
 +
|id={{FiltreCorrespondance|Dégât}}
 +
|Nom=Dégât
 +
|param=replace_+_
 +
 +
|Checkbox1=Mêlée
 +
|Checkbox2=Flèche
 +
|Checkbox3=Magique
 +
|Checkbox4=Compétence
 +
 +
|id1=melee
 +
|id2=fleche
 +
|id4=dc
 +
 +
}}
 +
</div>
 +
}} {{#if:{{{Inverser|}}}|
 +
{{Input|id=filter-reverse|type=checkbox|style=width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 3px; margin-left: 0;|labelStyle=flex-direction: row; align-items: center; gap: 5px;|text=Inverser la sélection}}
 +
}}
 +
}}<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>

Version actuelle datée du 8 décembre 2024 à 02:20