Modèle:Filtre : Différence entre versions
| [version vérifiée] | [version vérifiée] |
| (6 révisions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{LoadJavascript|Script=element}} {{LoadJavascript|Script=filter}} | {{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: | + | {{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 | {{FiltreModule | ||
|placeholder={{{placeholder|}}} | |placeholder={{{placeholder|}}} | ||
|Type=Text | |Type=Text | ||
}} | }} | ||
| − | {{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> | + | {{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="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: | + | <div style="display: flex; flex-direction: column; gap: 10px; max-height: inherit; overflow-y: auto; padding-right: 5px;"> |
{{#if:{{{Niveau|}}}| | {{#if:{{{Niveau|}}}| | ||
{{FiltreModule | {{FiltreModule | ||
| Ligne 48 : | Ligne 48 : | ||
|Type=Checkbox | |Type=Checkbox | ||
| − | |text1=[[Image:Elementfeu.png|25px|link=]]<span | + | |text1=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementfeu.png|25px|link=]] <span>Feu</span></span> |
|value1=feu | |value1=feu | ||
| − | |text2=[[Image:Elementglace.png|25px|link=]]<span | + | |text2=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementglace.png|25px|link=]] <span>Glace</span></span> |
|value2=glace | |value2=glace | ||
| − | |text3=[[Image:Elementfoudre.png|25px|link=]]<span | + | |text3=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementfoudre.png|25px|link=]] <span>Foudre</span></span> |
|value3=foudre | |value3=foudre | ||
| − | |text4=[[Image:Elementvent.png|25px|link=]]<span | + | |text4=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementvent.png|25px|link=]] <span>Vent</span></span> |
|value4=vent | |value4=vent | ||
| − | |text5=[[Image:Elementobscurite.png|25px|link=]]<span | + | |text5=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementobscurite.png|25px|link=]] <span>Obscurité</span></span> |
|value5=obscurite | |value5=obscurite | ||
| − | |text6=[[Image:Elementterre.png|25px|link=]]<span | + | |text6=<span style="text-overflow: ellipsis; overflow: hidden;>[[Image:Elementterre.png|25px|link=]] <span>Terre</span></span> |
|value6=terre | |value6=terre | ||
| Ligne 113 : | Ligne 113 : | ||
|Type=Checkbox | |Type=Checkbox | ||
| − | |text1= | + | |text1=<span style="text-overflow: ellipsis; overflow: hidden;>🗡️ <span>Mêlée</span></span> |
|value1=melee | |value1=melee | ||
| − | |text2= | + | |text2=<span style="text-overflow: ellipsis; overflow: hidden;>🏹 <span>Flèche</span></span> |
|value2=fleche | |value2=fleche | ||
| − | |text3= | + | |text3=<span style="text-overflow: ellipsis; overflow: hidden;>🧙 <span>Magique</span></span> |
|value3=magique | |value3=magique | ||
| − | |text4= | + | |text4=<span style="text-overflow: ellipsis; overflow: hidden;>✨ <span>Compétence</span></span> |
|value4=dc | |value4=dc | ||
}} | }} | ||
Version actuelle datée du 22 décembre 2024 à 15:51
Filtrer les monstres
