|
|
Ligne 1 : |
Ligne 1 : |
− | {{LoadJavascript|Script=element}}
| |
− | <div style="position: relative; display: flex; gap: 20px; align-items: center; flex-wrap: nowrap; height: 35px; font-size: 1.1em;">
| |
− | {{Input|id=filter-name|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 monstre|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|title=Rechercher un monstre}}}}
| |
− | {{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>
| |
− | }}
| |
− | <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;">
| |
− | <div>Intervalle de niveau</div>
| |
− | <div style="display: flex; gap: 20px; padding: 5px;">{{Input|type=number|value=1|style=padding: 0; width: 60px; height: 24px;|labelStyle=padding: 0;}} <span>≤</span> <span>Niveau</span> <span>≤</span> {{Input|type=number|value=135|style=padding: 0; width: 60px; height: 24px;|labelStyle=padding: 0;}}</div>
| |
− | <div style="margin-top: 5px;">Rang</div>
| |
− | <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 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>
| |
− | <div style="margin-top: 5px;">Élément</div>
| |
− | <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 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>
| |
− |
| |
− | {{Form|style=display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; user-select: none;|id=filter-form|content=
| |
− | <div style="position: relative;">
| |
− | {{FiltreModule
| |
− | |Type=Text
| |
− | |id=filter-name
| |
− | |placeholder=Rechercher un monstre
| |
− | }}
| |
− | </div>
| |
− | <div style="position: relative;">
| |
− | {{FiltreModule
| |
− | |Type=Range
| |
− | |id={{FiltreCorrespondance|Niveau}}
| |
− | |Nom=Niveau
| |
− | |min=1
| |
− | |max=135
| |
− | |param=levels
| |
− | }}
| |
− | </div>
| |
− | <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>
| |
− | <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 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 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>
| |
− | {{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}}
| |
− | }}
| |
− |
| |
| {{Subpage3}} | | {{Subpage3}} |
| {{Attention|1= | | {{Attention|1= |