|
|
| Ligne 1 : |
Ligne 1 : |
| − | {{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: 500px; max-width: 100%;|id=filter-form|content=
| |
| − | {{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}}}}
| |
| − | {{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>
| |
| − | }}
| |
| − | <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: 10px;">
| |
| − | {{#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;">—</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
| |
| − | |id=rank
| |
| − | |span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
| |
| − | |Type=Checkbox2
| |
| | | | |
| − | |text1=<span style="text-overflow: ellipsis; overflow: hidden;>1</span>
| |
| − | |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>}} {{#if:{{{Élément|}}}|<div style="font-weight: bold;">Élément</div>
| |
| − | <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
| |
| − | {{FiltreModule
| |
| − | |id=elem
| |
| − | |span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
| |
| − | |Type=Checkbox2
| |
| − |
| |
| − | |text1=[[Image:Elementfeu.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Feu</span>
| |
| − | |value1=feu
| |
| − |
| |
| − | |text2=[[Image:Elementglace.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Glace</span>
| |
| − | |value2=glace
| |
| − |
| |
| − | |text3=[[Image:Elementfoudre.png|25px|link=]]<span style="text-overflow: ellipsis; overflow: hidden;>Foudre</span>
| |
| − | |value3=foudre
| |
| − |
| |
| − | |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>}} {{#if:{{{Type|}}}|<div style="font-weight: bold;">Type</div>
| |
| − | <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
| |
| − | {{FiltreModule
| |
| − | |id=type
| |
| − | |span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
| |
| − | |Type=Checkbox2
| |
| − |
| |
| − | |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
| |
| − | }}
| |
| − | </div>}} {{#if:{{{Dégâts|}}}|<div style="font-weight: bold;">Dégâts</div>
| |
| − | <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 0 5px;">
| |
| − | {{FiltreModule
| |
| − | |id=damage
| |
| − | |span=<span class="counter" style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></span>
| |
| − | |Type=Checkbox2
| |
| − |
| |
| − | |text1=🗡️<span style="text-overflow: ellipsis; overflow: hidden;>Mêlée</span>
| |
| − | |value1=melee
| |
| − |
| |
| − | |text2=🏹<span style="text-overflow: ellipsis; overflow: hidden;>Flèche</span>
| |
| − | |value2=fleche
| |
| − |
| |
| − | |text3=🧙<span style="text-overflow: ellipsis; overflow: hidden;>Magique</span>
| |
| − | |value3=magique
| |
| − |
| |
| − | |text4=✨<span style="text-overflow: ellipsis; overflow: hidden;>Compétence</span>
| |
| − | |value4=dc
| |
| − | }}
| |
| − | </div>}}
| |
| − | </div>
| |
| − | </div>
| |
| − | }}<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>
| |
