Modèle:Filtre : Différence entre versions

[version non vérifiée][version vérifiée]
 
(15 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
−
{{LoadJavascript|Script=element}}
+
{{LoadJavascript|Script=element}} {{LoadJavascript|Script=filter}}
 +
{{Form|style=position: relative; display: flex; align-items: center; flex-wrap: nowrap; height: 35px; font-size: 1.1em; margin: 15px auto; width: 520px; max-width: 100%;|id=filter-form|content=
 +
{{FiltreModule
 +
|placeholder={{{placeholder|}}}
 +
|Type=Text
 +
}}
 +
{{Button|type=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<span id="filter-counter" style="color: #007B33;font-size: 12px;"></span></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;">
 +
<div style="display: flex;  flex-direction: column; gap: 10px; max-height: inherit; overflow-y: auto; padding-right: 5px;">
 +
{{#if:{{{Niveau|}}}|
 +
{{FiltreModule
 +
|name=Intervalle de niveau
 +
|id={{FiltreCorrespondance|Niveau}}
 +
|maxLevel={{{maxLevel|135}}}
 +
|Type=Range
 +
}}
 +
}} {{#if:{{{Rang|}}}|
 +
{{FiltreModule
 +
|name=Rang
 +
|id={{FiltreCorrespondance|Rang}}
 +
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
 +
|Type=Checkbox
  
−
{{Form|style=position: relative; display: flex; gap: 20px; align-items: center; flex-wrap: nowrap; height: 35px; font-size: 1.1em;|id=filter-form|content=
+
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>1</span>
−
{{Input|id=filter-name|name=filterName|style=grid-area: 1 / -1; width: 100%; height: 100%; padding: 3px 20px 3px 52px; margin: 0; border-radius: 999px;|labelStyle=height: 100%; flex-grow: 1; padding: 0; margin: 0; display: grid; align-items: center;|placeholder=Rechercher un {{#switch:{{PAGENAME}}|Monstres=un monstre|Pierres Metin=une pierre Metin}}|text={{Svg|style=height: 100%; grid-area: 1 / -1; z-index: 10; padding: 0 10px; background: rgba(0, 0, 0, .16); border-radius: 999px;|height=24|viewBox=0 -960 960 960|width=24|data=search}}}}
+
|value1=1
−
{{Button|style=height: 100%; padding: 0 10px; border-radius: 999px; border-bottom-width: 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>
+
 
 +
|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
 +
}}
 +
}} {{#if:{{{Élément|}}}|
 +
{{FiltreModule
 +
|name=Élément
 +
|id={{FiltreCorrespondance|Élément}}
 +
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
 +
|Type=Checkbox
 +
 
 +
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementfeu.png|25px|link=]] <span>Feu</span></span>
 +
|value1=feu
 +
 
 +
|text2=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementglace.png|25px|link=]] <span>Glace</span></span>
 +
|value2=glace
 +
 
 +
|text3=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementfoudre.png|25px|link=]] <span>Foudre</span></span>
 +
|value3=foudre
 +
 
 +
|text4=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementvent.png|25px|link=]] <span>Vent</span></span>
 +
|value4=vent
 +
 
 +
|text5=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementobscurite.png|25px|link=]] <span>Obscurité</span></span>
 +
|value5=obscurite
 +
 
 +
|text6=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementterre.png|25px|link=]] <span>Terre</span></span>
 +
|value6=terre
 +
 
 +
|text7=<span style="text-overflow: ellipsis; overflow: hidden;>Aucun</span>
 +
|value7=aucun
 +
}}
 +
}} {{#if:{{{Type|}}}|
 +
{{FiltreModule
 +
|name=Type
 +
|id={{FiltreCorrespondance|Type}}
 +
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
 +
|Type=Checkbox
 +
 
 +
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>Demi-humain</span>
 +
|value1=demi-humain
 +
 
 +
|text2=<span style="text-overflow: ellipsis; overflow: hidden;>Mal</span>
 +
|value2=mal
 +
 
 +
|text3=<span style="text-overflow: ellipsis; overflow: hidden;>Désert</span>
 +
|value3=desert
 +
 
 +
|text4=<span style="text-overflow: ellipsis; overflow: hidden;>Animal</span>
 +
|value4=animal
 +
 
 +
|text5=<span style="text-overflow: ellipsis; overflow: hidden;>Orc</span>
 +
|value5=orc
 +
 
 +
|text6=<span style="text-overflow: ellipsis; overflow: hidden;>Mystique</span>
 +
|value6=mystique
 +
 
 +
|text7=<span style="text-overflow: ellipsis; overflow: hidden;>Mort-vivant</span>
 +
|value7=mort-vivant
 +
 
 +
|text8=<span style="text-overflow: ellipsis; overflow: hidden;>Insecte</span>
 +
|value8=insecte
 +
 
 +
|text9=<span style="text-overflow: ellipsis; overflow: hidden;>Zodiaque</span>
 +
|value9=zodiaque
 +
 
 +
|text10=<span style="text-overflow: ellipsis; overflow: hidden;>Aucun</span>
 +
|value10=aucun
 +
}}
 +
}} {{#if:{{{Dégâts|}}}|
 +
{{FiltreModule
 +
|name=Dégâts
 +
|id={{FiltreCorrespondance|Dégât}}
 +
|span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
 +
|Type=Checkbox
 +
 
 +
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>🗡️ <span>Mêlée</span></span>
 +
|value1=melee
 +
 
 +
|text2=<span style="text-overflow: ellipsis; overflow: hidden;>🏹 <span>Flèche</span></span>
 +
|value2=fleche
 +
 
 +
|text3=<span style="text-overflow: ellipsis; overflow: hidden;>🧙 <span>Magique</span></span>
 +
|value3=magique
 +
 
 +
|text4=<span style="text-overflow: ellipsis; overflow: hidden;>✨ <span>Compétence</span></span>
 +
|value4=dc
 +
}}
 
}}
 
}}
−
<div style="position: absolute; top: calc(100% + 5px); right: 0; background: white; border: 1px solid #ccc; padding: 10px; border-radius: 8px; width: 500px; text-align: left; z-index: 10; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;">
+
</div>
−
{{#if:{{{Niveau|}}}|<div>Intervalle de niveau</div>
 
−
<div style="display: flex; align-items: center; gap: 20px; padding: 0 5px;">{{Input|type=number|value=1|style=padding: 0; width: 60px; height: 24px;|labelStyle=padding: 0;}} <span>&le;</span> <span>Niveau</span> <span>&le;</span> {{Input|type=number|value=135|style=padding: 0; width: 60px; height: 24px;|labelStyle=padding: 0;}}</div>}}
 
−
{{#if:{{{Rang|}}}|<div>Rang</div>
 
−
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
 
−
{{Test1|id=rank-1|name=elemFire|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>1 🔹</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=rank-2|name=elemIce|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>2 🔹🔹</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=rank-3|name=elemLightning|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>3 🔹🔹🔹</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=rank-4|name=elemWind|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>4 🔹🔹🔹🔹</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=rank-boss|name=elemDarkness|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>Boss 🌟</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=rank-5|name=elemEarth|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>5 🌟🌟</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
</div>}}
 
−
{{#if:{{{Élément|}}}|<div>Élément</div>
 
−
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
 
−
{{Test1|id=elem-fire|name=elemFire|textAfter=[[Image:Elementfeu.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Feu</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=elem-ice|name=elemIce|textAfter=[[Image:Elementglace.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Glace</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=elem-lightning|name=elemLightning|textAfter=[[Image:Elementfoudre.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Foudre</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=elem-wind|name=elemWind|textAfter=[[Image:Elementvent.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Vent</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=elem-darkness|name=elemDarkness|textAfter=[[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;">(127)</span>}}
 
−
{{Test1|id=elem-earth|name=elemEarth|textAfter=[[Image:Elementterre.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Terre</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
{{Test1|id=elem-none|name=elemNone|textAfter=<span style="text-overflow: ellipsis; overflow: hidden;>Aucun</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;">(127)</span>}}
 
−
</div>}}
 
 
</div>
 
</div>
 
}}<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>
 
}}<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>

Version actuelle datée du 22 décembre 2024 à 15:51

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