diff --git a/packages/website/src/components/Link/index.module.css b/packages/website/src/components/Link/index.module.css index 1923d98f1..8805ed34b 100644 --- a/packages/website/src/components/Link/index.module.css +++ b/packages/website/src/components/Link/index.module.css @@ -6,6 +6,10 @@ align-items: center; gap: var(--space-3); + &[data-underline="always"] { + text-decoration: underline; + } + &[data-underline="hover"], &[data-underline="never"] { text-decoration: none; diff --git a/packages/website/src/components/Section/index.module.css b/packages/website/src/components/Section/index.module.css index a2ab65114..d1984d8e0 100644 --- a/packages/website/src/components/Section/index.module.css +++ b/packages/website/src/components/Section/index.module.css @@ -2,6 +2,10 @@ display: flex; justify-content: center; + &:last-child { + flex: 1; + } + .content { flex: 1; max-width: var(--page-width); diff --git a/packages/website/src/components/TankSearch/index.module.css b/packages/website/src/components/TankSearch/index.module.css index 4e24f7e48..641f4f747 100644 --- a/packages/website/src/components/TankSearch/index.module.css +++ b/packages/website/src/components/TankSearch/index.module.css @@ -1,13 +1,17 @@ -.label { - margin: var(--space-4) 0; +.container { + flex: 1; - /* mt="2" gap="1" align="center" justify="center" direction="column" */ + .label { + margin: var(--space-4) 0; - .count { - /* gap="2" */ + /* mt="2" gap="1" align="center" justify="center" direction="column" */ + + .count { + /* gap="2" */ + } + } + + .test-warning { + /* justify="center" mt="4" */ } } - -.test-warning { - /* justify="center" mt="4" */ -} diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index 9b3eec0f8..e31bfa224 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -31,9 +31,9 @@ import { TankCardSkeleton } from "../TankCardSkeleton"; import { TankCardWrapper } from "../TankCardWrapper"; import { TankSearchBar } from "../TankSearchBar"; import { TankSearchFilters } from "../TankSearchFilters"; +import { TankSearchNoResults } from "../TankSearchNoResults"; import { Text } from "../Text"; import { TankSearchCard } from "./components/Card"; -import { NoResults } from "./components/NoResults"; import { MAX_RECENTLY_VIEWED } from "./constants"; import styles from "./index.module.css"; @@ -428,7 +428,7 @@ export const TankSearch = memo( }, [tankFilters, tankopediaSort]); return ( - + ( {!skeleton && !compact && } - -
- - {sorted.length === 1 - ? strings.website.common.tank_search.count_singular - : literals(strings.website.common.tank_search.count_plural, { - count: sorted.length.toLocaleString(locale), - })} - + {tanks.length > 0 && ( + +
+ + {sorted.length === 1 + ? strings.website.common.tank_search.count_singular + : literals(strings.website.common.tank_search.count_plural, { + count: sorted.length.toLocaleString(locale), + })} + - {onSelectAll && ( - { - event.preventDefault(); - onSelectAll(sorted); - TankopediaPersistent.mutate((draft) => { - draft.recentlyViewed = uniq([ - ...sorted.map(({ id }) => id), - ...draft.recentlyViewed, - ]) - .filter((id) => id in tankDefinitions.tanks) - .slice(0, MAX_RECENTLY_VIEWED); - }); - }} - > - {strings.website.common.tank_search.select_all} - + {onSelectAll && ( + { + event.preventDefault(); + onSelectAll(sorted); + TankopediaPersistent.mutate((draft) => { + draft.recentlyViewed = uniq([ + ...sorted.map(({ id }) => id), + ...draft.recentlyViewed, + ]) + .filter((id) => id in tankDefinitions.tanks) + .slice(0, MAX_RECENTLY_VIEWED); + }); + }} + > + {strings.website.common.tank_search.select_all} + + )} +
+ + {tankopediaSort.by !== "meta.none" && ( + + {literals(strings.website.common.tank_search.sorting_by, { + name: strings.website.common.tank_search.sort[ + tankopediaSort.by + ], + })} + {SORT_UNITS[tankopediaSort.by] === undefined + ? "" + : ` (${SORT_UNITS[tankopediaSort.by]})`} + , {tankopediaSort.direction} + )} -
- - {tankopediaSort.by !== "meta.none" && ( - - {literals(strings.website.common.tank_search.sorting_by, { - name: strings.website.common.tank_search.sort[ - tankopediaSort.by - ], - })} - {SORT_UNITS[tankopediaSort.by] === undefined - ? "" - : ` (${SORT_UNITS[tankopediaSort.by]})`} - , {tankopediaSort.direction} - - )} -
+
+ )} {tankFilters.showTesting && !tankFilters.showNonTesting && (
@@ -525,7 +527,7 @@ export const TankSearch = memo( )} - {tanks.length === 0 && } + {tanks.length === 0 && } )} diff --git a/packages/website/src/components/TankSearchNoResults/index.module.css b/packages/website/src/components/TankSearchNoResults/index.module.css new file mode 100644 index 000000000..a3f545881 --- /dev/null +++ b/packages/website/src/components/TankSearchNoResults/index.module.css @@ -0,0 +1,3 @@ +.no-results { + flex: 1; +} diff --git a/packages/website/src/components/TankSearch/components/NoResults.tsx b/packages/website/src/components/TankSearchNoResults/index.tsx similarity index 60% rename from packages/website/src/components/TankSearch/components/NoResults.tsx rename to packages/website/src/components/TankSearchNoResults/index.tsx index d6e11eb6c..ad1873072 100644 --- a/packages/website/src/components/TankSearch/components/NoResults.tsx +++ b/packages/website/src/components/TankSearchNoResults/index.tsx @@ -1,22 +1,22 @@ -import { useLocale } from "../../../hooks/useLocale"; -import { TankFilters } from "../../../stores/tankFilters"; -import { Flex } from "../../Flex"; -import { Link } from "../../Link"; -import { Text } from "../../Text"; +import { useLocale } from "../../hooks/useLocale"; +import { TankFilters } from "../../stores/tankFilters"; +import { Flex } from "../Flex"; +import { Link } from "../Link"; +import { Text } from "../Text"; +import styles from "./index.module.css"; interface NoResultsProps { type?: "filters" | "search"; } -export function NoResults({ type = "filters" }: NoResultsProps) { +export function TankSearchNoResults({ type = "filters" }: NoResultsProps) { const { strings } = useLocale(); return ( - + {strings.website.common.tank_search.no_tanks_found.body}{" "} {