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

feat: compact search

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-02-06 13:28:05 -06:00
1 parent 4d09b3deb1
commit 939acad30c
2 files changed
+8 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/components/TankSearch/index.tsx
+4 -3
View File
@@ -43,7 +43,7 @@ const tankTypeOrder: TankType[] = ['light', 'medium', 'heavy', 'tankDestroyer'];
const treeTypeOrder: TreeType[] = ['researchable', 'premium', 'collector']; const treeTypeOrder: TreeType[] = ['researchable', 'premium', 'collector'];
export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) { export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
const tanksPerPage = compact ? 16 : 24; const tanksPerPage = compact ? 64 : 96;
const nations = use(NATIONS); const nations = use(NATIONS);
const filters = useTankopediaPersistent((state) => state.filters); const filters = useTankopediaPersistent((state) => state.filters);
const sort = useTankopediaPersistent((state) => state.sort); const sort = useTankopediaPersistent((state) => state.sort);
@@ -213,7 +213,7 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
<PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} /> <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
)} )}
<Flex wrap="wrap" gap="3" justify={compact ? 'between' : 'center'}> <Flex wrap="wrap" gap="2" justify={compact ? 'between' : 'center'}>
{!compact && {!compact &&
searchResultsPageSlice.map((tank) => ( searchResultsPageSlice.map((tank) => (
<Card <Card
@@ -223,13 +223,14 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
style={{ style={{
flex: 1, flex: 1,
cursor: 'pointer', cursor: 'pointer',
height: 64,
}} }}
> >
<Inset <Inset
key={tank.id} key={tank.id}
style={{ style={{
minWidth: 256, minWidth: 256,
minHeight: 128, minHeight: 64,
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
}} }}
src/app/tools/tankopedia/page.css.ts
+4 -2
View File
@@ -7,6 +7,7 @@ export const flag = style({
transitionDuration: theme.durations.regular, transitionDuration: theme.durations.regular,
left: '0', left: '0',
top: '0', top: '0',
scale: 1.5,
// [`.${listing}:hover &, .${listing}:active &`]: { // [`.${listing}:hover &, .${listing}:active &`]: {
// transform: 'translateX(-25%)', // transform: 'translateX(-25%)',
@@ -15,10 +16,10 @@ export const flag = style({
}); });
export const listingShadow = style({ export const listingShadow = style({
boxShadow: `inset 128px -128px 128px -128px ${theme.colors.appBackground1}`, boxShadow: `inset 64px -80px 64px -64px ${theme.colors.appBackground1}`,
[`.${listing}:hover &, .${listing}:active &`]: { [`.${listing}:hover &, .${listing}:active &`]: {
boxShadow: `inset 0 0 0 -128px ${theme.colors.appBackground1}`, boxShadow: `inset 0 0 0 -64px ${theme.colors.appBackground1}`,
}, },
}); });
@@ -35,6 +36,7 @@ export const listingImage = style({
transition: `transform ${theme.durations.regular}`, transition: `transform ${theme.durations.regular}`,
position: 'absolute', position: 'absolute',
left: '50%', left: '50%',
top: '-25%',
// [`.${listing}:hover &, .${listing}:active &`]: { // [`.${listing}:hover &, .${listing}:active &`]: {
// transform: 'translate(-25%, 10%)', // transform: 'translate(-25%, 10%)',