get over it

This commit is contained in:
tresabhi committed 2026-10-31 18:06:49 -05:00
1 parent c4edafa94b
commit 8d9549f7d5
5 files changed
+62 -64

No files matched your search

@@ -8,14 +8,13 @@
.label { .label {
margin: var(--space-4) 0; margin: var(--space-4) 0;
/* mt="2" gap="1" align="center" justify="center" direction="column" */ display: flex;
justify-content: center;
.count { .count {
/* gap="2" */ display: flex;
flex-direction: column;
gap: var(--space-2);
} }
} }
.test-warning {
/* justify="center" mt="4" */
}
} }
@@ -29,7 +29,6 @@ import {
import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
import { Callout } from "../Callout"; import { Callout } from "../Callout";
import { ExperimentIcon } from "../ExperimentIcon"; import { ExperimentIcon } from "../ExperimentIcon";
import { Flex } from "../Flex";
import { IncrementalLoader } from "../IncrementalLoader"; import { IncrementalLoader } from "../IncrementalLoader";
import { Link } from "../Link"; import { Link } from "../Link";
import { RecentlyViewedTanks } from "../RecentlyViewedTanks"; import { RecentlyViewedTanks } from "../RecentlyViewedTanks";
@@ -218,52 +217,59 @@ export const TankSearch = memo<TankSearchProps>(
{!skeleton && !compact && <RecentlyViewedTanks />} {!skeleton && !compact && <RecentlyViewedTanks />}
{sorted.length > 0 && ( {sorted.length > 0 && (
<Flex justify="center" className={styles.label}> <div className={styles.label}>
<div className={styles.count}> <Text lowContrast className={styles.count}>
<Text lowContrast> {sorted.length === 1
{sorted.length === 1 ? strings.website.common.tank_search.count_singular
? strings.website.common.tank_search.count_singular : literals(strings.website.common.tank_search.count_plural, {
: literals(strings.website.common.tank_search.count_plural, { count: sorted.length.toLocaleString(locale),
count: sorted.length.toLocaleString(locale), })}
})}
</Text> {sortConfig && (
<>
{" - "}
{literals(strings.website.common.tank_search.sorting_by, {
name: (
strings.tanks.characteristics.items as Record<
string,
string
>
)[sortConfig],
})}
,{" "}
{
strings.website.common.tank_search.sort.direction[
tankopediaSort.direction
]
}
</>
)}
{onSelectAll && ( {onSelectAll && (
<Link <>
underline="always" {" "}
href="#" <Link
onClick={(event) => { underline="always"
event.preventDefault(); href="#"
onSelectAll(sorted); onClick={(event) => {
TankopediaPersistent.mutate((draft) => { event.preventDefault();
draft.recentlyViewed = uniq([ onSelectAll(sorted);
...sorted.map(({ id }) => id), TankopediaPersistent.mutate((draft) => {
...draft.recentlyViewed, draft.recentlyViewed = uniq([
]) ...sorted.map(({ id }) => id),
.filter((id) => id in tankDefinitions.tanks) ...draft.recentlyViewed,
.slice(0, MAX_RECENTLY_VIEWED); ])
}); .filter((id) => id in tankDefinitions.tanks)
}} .slice(0, MAX_RECENTLY_VIEWED);
> });
{strings.website.common.tank_search.select_all} }}
</Link> >
{strings.website.common.tank_search.select_all}
</Link>
</>
)} )}
</div> </Text>
</div>
{sortConfig && (
<Text color="gray">
{literals(strings.website.common.tank_search.sorting_by, {
name: (
strings.tanks.characteristics.items as Record<
string,
string
>
)[sortConfig],
})}
, {tankopediaSort.direction}
</Text>
)}
</Flex>
)} )}
{tankFilters.showTesting && !tankFilters.showNonTesting && ( {tankFilters.showTesting && !tankFilters.showNonTesting && (
@@ -107,10 +107,8 @@ export function TankSearchSort() {
{strings.website.common.tank_search.sort.direction.label} {strings.website.common.tank_search.sort.direction.label}
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.RadioGroup <DropdownMenu.RadioGroup
value={`${direction}`} value={direction}
onValueChange={(_value) => { onValueChange={(value) => {
const value = Number(_value);
if ( if (
value !== TankopediaSortDirection.Ascending && value !== TankopediaSortDirection.Ascending &&
value !== TankopediaSortDirection.Descending value !== TankopediaSortDirection.Descending
@@ -123,18 +121,14 @@ export function TankSearchSort() {
}); });
}} }}
> >
<DropdownMenu.RadioItem <DropdownMenu.RadioItem value={TankopediaSortDirection.Ascending}>
value={`${TankopediaSortDirection.Ascending}`}
>
<DropdownMenu.ItemIndicator> <DropdownMenu.ItemIndicator>
<DotFilledIcon /> <DotFilledIcon />
</DropdownMenu.ItemIndicator> </DropdownMenu.ItemIndicator>
{strings.website.common.tank_search.sort.direction.ascending} {strings.website.common.tank_search.sort.direction.ascending}
</DropdownMenu.RadioItem> </DropdownMenu.RadioItem>
<DropdownMenu.RadioItem <DropdownMenu.RadioItem value={TankopediaSortDirection.Descending}>
value={`${TankopediaSortDirection.Descending}`}
>
<DropdownMenu.ItemIndicator> <DropdownMenu.ItemIndicator>
<DotFilledIcon /> <DotFilledIcon />
</DropdownMenu.ItemIndicator> </DropdownMenu.ItemIndicator>
@@ -32,8 +32,7 @@
} }
} }
&:hover, &:hover {
&:focus-within {
.text { .text {
display: block; display: block;
} }
@@ -1,8 +1,8 @@
import { Soapstone } from "soapstone"; import { Soapstone } from "soapstone";
export enum TankopediaSortDirection { export enum TankopediaSortDirection {
Ascending, Ascending = "ascending",
Descending, Descending = "descending",
} }
export interface TankopediaPersistent { export interface TankopediaPersistent {