TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: left align filters on small screens

Browse Source
This commit is contained in:
TrèsAbhi committed 2026-02-18 19:00:09 -06:00
1 parent bfa80cd549
commit 009caeeaf1
1 file changed
+18 -13
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/TankSearch/components/FilterControl.tsx
+18 -13
View File
@@ -129,7 +129,7 @@ const consumablesArray = Object.values(consumableDefinitions.consumables)
.filter( .filter(
(consumable) => (consumable) =>
!consumable.game_mode_exclusive && !consumable.game_mode_exclusive &&
consumable.name.locales[locales.default] consumable.name.locales[locales.default],
) )
.map((consumable) => consumable.id); .map((consumable) => consumable.id);
const provisionsArray = Array.from( const provisionsArray = Array.from(
@@ -137,7 +137,7 @@ const provisionsArray = Array.from(
.filter( .filter(
(provision) => (provision) =>
!provision.game_mode_exclusive && !provision.game_mode_exclusive &&
provision.name.locales[locales.default] provision.name.locales[locales.default],
) )
.reduce((uniqueMap, consumable) => { .reduce((uniqueMap, consumable) => {
if (!uniqueMap.has(consumable.name.locales[locales.default])) { if (!uniqueMap.has(consumable.name.locales[locales.default])) {
@@ -146,7 +146,7 @@ const provisionsArray = Array.from(
return uniqueMap; return uniqueMap;
}, new Map<string, number>()) }, new Map<string, number>())
.values() .values(),
); );
const shellTypeIcons: Record<ShellType, string> = { const shellTypeIcons: Record<ShellType, string> = {
[ShellType.AP]: "ap", [ShellType.AP]: "ap",
@@ -171,7 +171,7 @@ const TANK_TYPE_COLORS: Record<TankType, string> = {
}; };
const GUN_TYPES = Object.keys( const GUN_TYPES = Object.keys(
GUN_TYPE_ICONS GUN_TYPE_ICONS,
) as (keyof typeof GUN_TYPE_ICONS)[]; ) as (keyof typeof GUN_TYPE_ICONS)[];
const MAX_ICONS = 4; const MAX_ICONS = 4;
@@ -180,7 +180,12 @@ const TIERS = times(10, (i) => 10 - i);
export function FilterControl() { export function FilterControl() {
return ( return (
<Flex align="center" justify="center" gap="2" wrap="wrap"> <Flex
align="center"
justify={{ initial: "start", md: "center" }}
gap="2"
wrap="wrap"
>
<TiersFilter /> <TiersFilter />
<ClassFilter /> <ClassFilter />
<TypeFilter /> <TypeFilter />
@@ -346,7 +351,7 @@ function NationsFilter() {
mr="-2" mr="-2"
style={{ style={{
backgroundImage: `url(${asset( backgroundImage: `url(${asset(
`flags/scratched/${nation}.webp` `flags/scratched/${nation}.webp`,
)})`, )})`,
backgroundSize: "100%", backgroundSize: "100%",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
@@ -437,7 +442,7 @@ function ClassFilter() {
TankFilters.mutate((draft) => { TankFilters.mutate((draft) => {
if (selected) { if (selected) {
draft.classes = draft.classes.filter( draft.classes = draft.classes.filter(
(c) => c !== tankClass (c) => c !== tankClass,
); );
} else { } else {
draft.classes = [...draft.classes, tankClass]; draft.classes = [...draft.classes, tankClass];
@@ -683,7 +688,7 @@ function IndividualShellFilter({
src={asset( src={asset(
`icons/shells/${shellTypeIcons[shells[index]]}${ `icons/shells/${shellTypeIcons[shells[index]]}${
premium ? "_premium" : "" premium ? "_premium" : ""
}.webp` }.webp`,
)} )}
/> />
)} )}
@@ -718,7 +723,7 @@ function IndividualShellFilter({
src={asset( src={asset(
`icons/shells/${shellTypeIcons[shellType]}${ `icons/shells/${shellTypeIcons[shellType]}${
premium ? "_premium" : "" premium ? "_premium" : ""
}.webp` }.webp`,
)} )}
style={{ width: "1.25em", height: "1.25em" }} style={{ width: "1.25em", height: "1.25em" }}
/> />
@@ -917,7 +922,7 @@ function ConsumablesFilter() {
TankFilters.mutate((draft) => { TankFilters.mutate((draft) => {
if (selected) { if (selected) {
draft.consumables = draft.consumables.filter( draft.consumables = draft.consumables.filter(
(n) => n !== consumable (n) => n !== consumable,
); );
} else { } else {
draft.consumables = [...draft.consumables, consumable]; draft.consumables = [...draft.consumables, consumable];
@@ -1011,7 +1016,7 @@ function ProvisionsFilter() {
TankFilters.mutate((draft) => { TankFilters.mutate((draft) => {
if (selected) { if (selected) {
draft.provisions = draft.provisions.filter( draft.provisions = draft.provisions.filter(
(n) => n !== provision (n) => n !== provision,
); );
} else { } else {
draft.provisions = [...draft.provisions, provision]; draft.provisions = [...draft.provisions, provision];
@@ -1140,7 +1145,7 @@ function GameModeAbilitiesFilter() {
TankFilters.mutate((draft) => { TankFilters.mutate((draft) => {
if (selected) { if (selected) {
draft.abilities = draft.abilities.filter( draft.abilities = draft.abilities.filter(
(n) => n !== consumable (n) => n !== consumable,
); );
} else { } else {
draft.abilities = [...draft.abilities, consumable]; draft.abilities = [...draft.abilities, consumable];
@@ -1189,7 +1194,7 @@ function GameModeAbilitiesFilter() {
TankFilters.mutate((draft) => { TankFilters.mutate((draft) => {
if (selected) { if (selected) {
draft.powers = draft.powers.filter( draft.powers = draft.powers.filter(
(n) => n !== provision (n) => n !== provision,
); );
} else { } else {
draft.powers = [...draft.powers, provision]; draft.powers = [...draft.powers, provision];