Modèle:Filtre : Différence entre versions

[version vérifiée][version non vérifiée]
(Annulation des modifications 105521 de Ankhseram (discussion))
(Balise : Annuler)
Ligne 1 : Ligne 1 :
 
{{LoadJavascript|Script=element}} {{LoadJavascript|Script=filter}}
 
{{LoadJavascript|Script=element}} {{LoadJavascript|Script=filter}}
−
{{Form|style=display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; user-select: none;|id=filter-form|content=
+
{{Form|style=position: relative; display: flex; align-items: center; flex-wrap: nowrap; height: 35px; font-size: 1.1em; margin: 15px auto; width: 500px; max-width: 100%;|id=filter-form|content=
−
{{#if:{{{Nom|}}}|
+
{{Input|id=filter-name|name=filterName|style=grid-area: 1 / -1; width: 100%; height: 100%; padding: 3px 20px 3px 46px; margin: 0; border-radius: 999px 0 0 999px;|labelStyle=height: 100%; flex-grow: 1; padding: 0; margin: 0; display: grid; align-items: center;|placeholder={{{placeholder|}}}|text={{Svg|style=grid-area: 1 / -1; z-index: 10; padding-left: 12px;|height=24|viewBox=0 -960 960 960|width=24|data=search}}}}
−
<div style="position: relative;">
+
{{Button|id=open-filter|style=height: 100%; padding: 0 10px; border-bottom-width: 1px; margin-left: -1px;|text=<div style="display: flex; align-items: flex-end; gap: 5px;">{{Svg|class=svg-icon|height=24|viewBox=0 -960 960 960|width=24|data=filter|title=Filtrer les monstres}} Filtrer</div>
−
{{FiltreModule
 
−
|Type=Text
 
−
|id=filter-name
 
−
|placeholder=Rechercher un monstre
 
 
}}
 
}}
−
</div>
+
<div style="position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: white; border: 1px solid #ccc; padding: 10px 0 10px 10px; border-radius: 8px; text-align: left; z-index: 10; max-height: 400px;">
−
}} {{#if:{{{Niveau|}}}|
+
<div style="display: flex;  flex-direction: column; gap: 10px; max-height: inherit; overflow-y: auto; padding-right: 10px;">
−
<div style="position: relative;">
+
{{#if:{{{Niveau|}}}|<div style="font-weight: bold;">Intervalle de niveau</div>
 +
<div style="display: flex; align-items: center; gap: 3px 0;">
 +
{{Input|id=level-min|name=levelMin|type=number|min=1|max={{{maxLevel|135}}}|value=1|style=margin-right: 0;|labelStyle=display: block; padding-left: 0;|data=filter+level|data2=value+min}}
 +
<div style="font-family: system-ui; padding: 0 10px;">&mdash;</div>
 +
{{Input|id=level-max|name=levelMax|type=number|min=1|max={{{maxLevel|135}}}|value={{{maxLevel|135}}}|labelStyle=display: block; padding-left: 0;|data=filter+level|data2=value+max}}
 +
</div>}} {{#if:{{{Rang|}}}|<div style="font-weight: bold;">Rang</div>
 +
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
 
{{FiltreModule
 
{{FiltreModule
−
|Type=Range
+
|id=rank
−
|id={{FiltreCorrespondance|Niveau}}
+
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
−
|Nom=Niveau
+
|Type=Checkbox2
−
|min=1
+
 
−
|max=135
+
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>1</span>
−
|param=levels
+
|value1=1
 +
 
 +
|text2=<span style="text-overflow: ellipsis; overflow: hidden;>2</span>
 +
|value2=2
 +
 
 +
|text3=<span style="text-overflow: ellipsis; overflow: hidden;>3</span>
 +
|value3=3
 +
 
 +
|text4=<span style="text-overflow: ellipsis; overflow: hidden;>4</span>
 +
|value4=4
 +
 
 +
|text5=<span style="text-overflow: ellipsis; overflow: hidden;>Boss 🌟</span>
 +
|value5=boss
 +
 
 +
|text6=<span style="text-overflow: ellipsis; overflow: hidden;>5 🌟🌟</span>
 +
|value6=5
 
}}
 
}}
−
</div>
+
</div>}} {{#if:{{{Élément|}}}|<div style="font-weight: bold;">Élément</div>
−
}} {{#if:{{{Rang|}}}|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
−
<div style="position: relative;">
 
 
{{FiltreModule
 
{{FiltreModule
−
|Type=Checkbox
+
|id=elem
−
|id={{FiltreCorrespondance|Rang}}
+
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
−
|Nom=Rang
+
|Type=Checkbox2
−
|param=levels
+
 
 +
|text1=[[Image:Elementfeu.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Feu</span>
 +
|value1=feu
  
−
|Checkbox1=1
+
|text2=[[Image:Elementglace.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Glace</span>
−
|Checkbox2=2
+
|value2=glace
−
|Checkbox3=3
+
 
−
|Checkbox4=4
+
|text3=[[Image:Elementfoudre.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Foudre</span>
−
|Checkbox5=Boss
+
|value3=foudre
−
|Checkbox6=5
+
 
 +
|text4=[[Image:Elementvent.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Vent</span>
 +
|value4=vent
 +
 
 +
|text5=[[Image:Elementobscurite.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Obscurité</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
 +
|value5=obscurite
 +
 
 +
|text6=[[Image:Elementterre.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Terre</span>
 +
|value6=terre
 +
 
 +
|text7=<span style="text-overflow: ellipsis; overflow: hidden;>Aucun</span>
 +
|value7=aucun
 
}}
 
}}
−
</div>
+
</div>}} {{#if:{{{Type|}}}|<div style="font-weight: bold;">Type</div>
−
}} {{#if:{{{Élément|}}}|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
−
<div style="position: relative;">
 
 
{{FiltreModule
 
{{FiltreModule
−
|Type=Checkbox
+
|id=type
−
|id={{FiltreCorrespondance|Élément}}
+
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
−
|Nom=Élément
+
|Type=Checkbox2
−
|param=elem
+
 
 +
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>Demi-humain</span>
 +
|value1=demi-humain
  
−
|Checkbox1=Feu
+
|text2=<span style="text-overflow: ellipsis; overflow: hidden;>Mal</span>
−
|Checkbox2=Glace
+
|value2=mal
−
|Checkbox3=Foudre
 
−
|Checkbox4=Vent
 
−
|Checkbox5=Obscurité
 
−
|Checkbox6=Terre
 
−
|Checkbox7=Aucun
 
  
−
|id5=obscurite
+
|text3=<span style="text-overflow: ellipsis; overflow: hidden;>Désert</span>
 +
|value3=desert
  
−
}}
+
|text4=<span style="text-overflow: ellipsis; overflow: hidden;>Animal</span>
−
</div>
+
|value4=animal
−
}} {{#if:{{{Type|}}}|
+
 
−
<div style="position: relative;">
+
|text5=<span style="text-overflow: ellipsis; overflow: hidden;>Orc</span>
−
{{FiltreModule
+
|value5=orc
−
|Type=Checkbox
+
 
−
|id={{FiltreCorrespondance|Type}}
+
|text6=<span style="text-overflow: ellipsis; overflow: hidden;>Mystique</span>
−
|Nom=Type
+
|value6=mystique
−
|param=replace__type
+
 
 +
|text7=<span style="text-overflow: ellipsis; overflow: hidden;>Mort-vivant</span>
 +
|value7=mort-vivant
  
−
|Checkbox1=Demi-humain
+
|text8=<span style="text-overflow: ellipsis; overflow: hidden;>Insecte</span>
−
|Checkbox2=Mal
+
|value8=insecte
−
|Checkbox3=Désert
 
−
|Checkbox4=Animal
 
−
|Checkbox5=Orc
 
−
|Checkbox6=Mystique
 
−
|Checkbox7=Mort-vivant
 
−
|Checkbox8=Insecte
 
−
|Checkbox9=Zodiaque
 
−
|Checkbox10=Aucun
 
  
−
|id3=desert
+
|text9=<span style="text-overflow: ellipsis; overflow: hidden;>Zodiaque</span>
 +
|value9=zodiaque
  
 +
|text10=<span style="text-overflow: ellipsis; overflow: hidden;>Aucun</span>
 +
|value10=aucun
 
}}
 
}}
−
</div>
+
</div>}} {{#if:{{{Dégâts|}}}|<div style="font-weight: bold;">Dégâts</div>
−
}} {{#if:{{{Dégât|}}}|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
−
<div style="position: relative;">
 
 
{{FiltreModule
 
{{FiltreModule
−
|Type=Checkbox
+
|id=damage
−
|id={{FiltreCorrespondance|Dégât}}
+
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
−
|Nom=Dégât
+
|Type=Checkbox2
−
|param=replace_+_
+
 
 +
|text1=🗡️<span style="text-overflow: ellipsis; overflow: hidden;>Mêlée</span>
 +
|value1=melee
  
−
|Checkbox1=Mêlée
+
|text2=🏹<span style="text-overflow: ellipsis; overflow: hidden;>Flèche</span>
−
|Checkbox2=Flèche
+
|value2=fleche
−
|Checkbox3=Magique
 
−
|Checkbox4=Compétence
 
  
−
|id1=melee
+
|text3=🧙<span style="text-overflow: ellipsis; overflow: hidden;>Magique</span>
−
|id2=fleche
+
|value3=magique
−
|id4=dc
 
  
 +
|text4=✨<span style="text-overflow: ellipsis; overflow: hidden;>Compétence</span>
 +
|value4=dc
 
}}
 
}}
 +
</div>}}
 +
</div>
 
</div>
 
</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>
 
}}<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>

Version du 20 décembre 2024 à 23:58

Filtrer les monstres
Filtrer
Récupérée de « https://fr-wiki.metin2.gameforge.com/index.php?title=Modèle:Filtre&oldid=105877 »