Modèle:Filtre : Différence entre versions

[version vérifiée][version vérifiée]
 
(7 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: 500px; max-width: 100%;|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: 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</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: 10px;">
+
<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 style="text-overflow: ellipsis; overflow: hidden;>Feu</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 style="text-overflow: ellipsis; overflow: hidden;>Glace</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 style="text-overflow: ellipsis; overflow: hidden;>Foudre</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 style="text-overflow: ellipsis; overflow: hidden;>Vent</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 style="text-overflow: ellipsis; overflow: hidden;>Obscurité</span><span style="color: rgb(159, 159, 159); font-size: 12px; margin-left: auto;"></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 style="text-overflow: ellipsis; overflow: hidden;>Terre</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=🗡️<span style="text-overflow: ellipsis; overflow: hidden;>Mêlée</span>
+
|text1=<span style="text-overflow: ellipsis; overflow: hidden;>🗡️ <span>Mêlée</span></span>
 
|value1=melee
 
|value1=melee
  
|text2=🏹<span style="text-overflow: ellipsis; overflow: hidden;>Flèche</span>
+
|text2=<span style="text-overflow: ellipsis; overflow: hidden;>🏹 <span>Flèche</span></span>
 
|value2=fleche
 
|value2=fleche
  
|text3=🧙<span style="text-overflow: ellipsis; overflow: hidden;>Magique</span>
+
|text3=<span style="text-overflow: ellipsis; overflow: hidden;>🧙 <span>Magique</span></span>
 
|value3=magique
 
|value3=magique
  
|text4=<span style="text-overflow: ellipsis; overflow: hidden;>Compétence</span>
+
|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
Filtrer