Mudanças entre as edições de "Widget:Conquistas"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 20: | Linha 20: | ||
</div> | </div> | ||
<div class="gla-conquistas-tabs"> | <div class="gla-conquistas-toolbar"> | ||
<div class="gla-conquistas-tabs"> | |||
<span class="gla-conquistas-tab is-active" data-tab="geral">Geral</span> | |||
<span class="gla-conquistas-tab" data-tab="personagens">Personagens</span> | |||
<span class="gla-conquistas-tab" data-tab="missao">Missão</span> | |||
<span class="gla-conquistas-tab" data-tab="bau">Baú</span> | |||
<span class="gla-conquistas-tab" data-tab="navegacao">Navegação</span> | |||
<span class="gla-conquistas-tab" data-tab="pvp">PvP</span> | |||
<span class="gla-conquistas-tab" data-tab="pve">PvE</span> | |||
<span class="gla-conquistas-tab" data-tab="coliseu">Coliseu</span> | |||
<span class="gla-conquistas-tab" data-tab="poneglyph">Poneglyph</span> | |||
<span class="gla-conquistas-tab" data-tab="indicacao">Indicação</span> | |||
<span class="gla-conquistas-tab" data-tab="celular">Celular</span> | |||
<span class="gla-conquistas-tab" data-tab="bossrush">Boss Rush</span> | |||
</div> | |||
<div class="gla-conquistas-controls"> | |||
<input type="text" class="gla-conquistas-search" placeholder="Buscar conquista..."> | |||
<div class="gla-conquistas-filters" id="gla-filter-default" style="display:none"> | |||
<span class="gla-conquistas-filter is-active" data-filter="all">Todas</span> | |||
<span class="gla-conquistas-filter" data-filter="normal">Normal</span> | |||
<span class="gla-conquistas-filter" data-filter="hidden">Oculta</span> | |||
</div> | |||
<div class="gla-conquistas-filters" id="gla-filter-coliseu" style="display:none"> | |||
<span class="gla-conquistas-filter is-active" data-filter="all">Todas</span> | |||
<span class="gla-conquistas-filter" data-filter="onemany">One Man Army</span> | |||
<span class="gla-conquistas-filter" data-filter="corrida">Corrida Colosseum</span> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
| Linha 118: | Linha 120: | ||
color: #64748b; | color: #64748b; | ||
font-size: 14px; | font-size: 14px; | ||
} | |||
/* Largura acompanha a fileira de abas (não estica na caixa inteira) */ | |||
.gla-conquistas-toolbar { | |||
display: inline-block; | |||
max-width: 100%; | |||
vertical-align: top; | |||
} | } | ||
| Linha 257: | Linha 266: | ||
} | } | ||
/* CONTROLES — busca + filtros */ | /* CONTROLES — busca + filtros (mesma largura das abas) */ | ||
.gla-conquistas-controls { | .gla-conquistas-controls { | ||
display: flex; | display: flex; | ||
| Linha 264: | Linha 273: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
margin-top: 14px; | margin-top: 14px; | ||
width: 100%; | |||
box-sizing: border-box; | |||
} | } | ||
.gla-conquistas-search { | .gla-conquistas-search { | ||
flex: 1; | flex: 1 1 auto; | ||
min-width: | width: auto; | ||
min-width: 120px; | |||
max-width: 100%; | |||
padding: 7px 14px; | padding: 7px 14px; | ||
border: 1px solid #cbd5e1; | border: 1px solid #cbd5e1; | ||
| Linha 485: | Linha 498: | ||
var filterColiseu = root.querySelector("#gla-filter-coliseu"); | var filterColiseu = root.querySelector("#gla-filter-coliseu"); | ||
var searchInput = root.querySelector(".gla-conquistas-search"); | var searchInput = root.querySelector(".gla-conquistas-search"); | ||
function countHiddenInTab(tabName) { | |||
var panel = root.querySelector('.gla-conquistas-panel[data-tab-content="' + tabName + '"]'); | |||
if (!panel) return 0; | |||
var n = 0; | |||
panel.querySelectorAll(".gla-item").forEach(function (card) { | |||
if (card.getAttribute("data-hidden") === "true") n++; | |||
}); | |||
return n; | |||
} | |||
function syncFilterBarForTab(tabName) { | |||
var hiddenCount = countHiddenInTab(tabName); | |||
if (filterColiseu) { | |||
filterColiseu.style.display = tabName === "coliseu" ? "" : "none"; | |||
} | |||
if (filterDefault) { | |||
if (tabName === "coliseu") { | |||
filterDefault.style.display = "none"; | |||
} else { | |||
filterDefault.style.display = hiddenCount > 0 ? "" : "none"; | |||
} | |||
} | |||
if (tabName !== "coliseu" && hiddenCount === 0) { | |||
if (currentFilter === "hidden" || currentFilter === "normal") { | |||
currentFilter = "all"; | |||
} | |||
if (filterDefault) { | |||
filterDefault.querySelectorAll(".gla-conquistas-filter").forEach(function (p) { | |||
p.classList.toggle("is-active", p.getAttribute("data-filter") === "all"); | |||
}); | |||
} | |||
} | |||
} | |||
function applyVisibility() { | function applyVisibility() { | ||
| Linha 550: | Linha 599: | ||
currentTab = nome; | currentTab = nome; | ||
currentFilter = "all"; | currentFilter = "all"; | ||
tabs.forEach(function (t) { t.classList.remove("is-active"); }); | tabs.forEach(function (t) { t.classList.remove("is-active"); }); | ||
| Linha 567: | Linha 607: | ||
if (tab) tab.classList.add("is-active"); | if (tab) tab.classList.add("is-active"); | ||
if (panel) panel.classList.add("is-active"); | if (panel) panel.classList.add("is-active"); | ||
syncFilterBarForTab(nome); | |||
root.querySelectorAll(".gla-conquistas-filter").forEach(function (p) { | |||
if (p.offsetParent !== null && p.style.display !== "none") { | |||
p.classList.toggle("is-active", p.getAttribute("data-filter") === "all"); | |||
} | |||
}); | |||
applyVisibility(); | applyVisibility(); | ||