Skip to content

Commit

Permalink
Merge branch 'main' into ECO-1955
Browse files Browse the repository at this point in the history
  • Loading branch information
@xbtmatt
xbtmatt committed Nov 12, 2024
2 parents b5890c9 + ef9328f commit 63b617c
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 71 deletions.
22 changes: 22 additions & 0 deletions src/typescript/frontend/src/app/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,28 @@
width: 18px;
}

.med-pixel-search-arrows {
width: 11px;
}

@media screen and (min-width: 768px) {
.med-pixel-search-arrows {
width: 12px;
}
}

@media screen and (min-width: 1024px) {
.med-pixel-search-arrows {
width: 14px;
}
}

@media screen and (min-width: 1440px) {
.med-pixel-search-arrows {
width: 18px;
}
}

.med-pixel-close {
width: 12px;
}
Expand Down
8 changes: 5 additions & 3 deletions ...ntend/src/components/pages/home/components/emoji-table/components/buttons-block/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,19 @@ export type ButtonsBlockProps = {
value: number;
numPages: number;
onChange: (page: number) => void;
className?: string;
};

const ButtonsBlock: React.FC<ButtonsBlockProps> = ({
value,
numPages,
onChange,
className,
}: ButtonsBlockProps) => {
const { isMobile } = useMatchBreakpoints();
const gap = isMobile ? "12px" : "17px";
return (
<FlexGap gap={gap} justifyContent="center" marginTop="30px">
<FlexGap className={className} gap={gap} justifyContent="center">
{/* First */}
<StyledBtn onClick={() => onChange(1)}>
<Text className="med-pixel-text" fontSize="48px" color="darkGray">
Expand Down Expand Up @@ -49,7 +51,7 @@ const ButtonsBlock: React.FC<ButtonsBlockProps> = ({
{"{"}
</Text>

<Arrow className="med-pixel-search" rotate="180deg" />
<Arrow className="med-pixel-search-arrows" rotate="180deg" />

<Text className="med-pixel-text" fontSize="48px" color="darkGray">
{"}"}
Expand Down Expand Up @@ -95,7 +97,7 @@ const ButtonsBlock: React.FC<ButtonsBlockProps> = ({
{"{"}
</Text>

<Arrow className="med-pixel-search" />
<Arrow className="med-pixel-search-arrows" />

<Text className="med-pixel-text" fontSize="48px" color="darkGray">
{"}"}
Expand Down
152 changes: 84 additions & 68 deletions src/typescript/frontend/src/components/pages/home/components/emoji-table/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,74 +103,90 @@ const EmojiTable = (props: EmojiTableProps) => {
});

return (
<OutermostContainer>
<OuterContainer>
<InnerGridContainer>
<motion.div
key={rowLength}
id="emoji-grid-header"
exit={{
opacity: 0,
transition: {
duration: 0.5,
type: "just",
},
}}
>
<SearchWrapper>
<SearchBar geoblocked={props.geoblocked} />
</SearchWrapper>
<FilterOptionsWrapper>
<FilterOptions filter={sort ?? SortMarketsBy.MarketCap} onChange={handleSortChange} />
</FilterOptionsWrapper>
</motion.div>
{/* Each version of the grid must wait for the other to fully exit animate out before appearing.
This provides a smooth transition from grids of varying row lengths. */}
{markets.length > 0 ? (
<>
<AnimatePresence mode="wait">
<motion.div
className="relative w-full h-full"
id="emoji-grid"
key={rowLength}
style={{
// We set these so the grid layout doesn't snap when the number of items per row changes.
// This actually seems to work better than the css media queries, although I've left them in module.css
// in case we want to use them for other things.
maxWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
minWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
}}
exit={{
opacity: 0,
transition: {
duration: 0.35,
type: "just",
},
}}
>
<StyledGrid>
{shouldAnimateGrid ? (
<LiveClientGrid markets={markets} sortBy={sort} />
) : (
<ClientGrid markets={markets} page={page} sortBy={sort} />
)}
</StyledGrid>
</motion.div>
</AnimatePresence>
<ButtonsBlock value={page} onChange={handlePageChange} numPages={pages} />
</>
) : (
<div className="py-10">
<Link href={`${ROUTES.launch}?emojis=${emojis.join("")}`}>
<Text textScale="pixelHeading3" color="econiaBlue" className="uppercase">
Click here to launch {emojis.join("")} !
</Text>
</Link>
</div>
)}
</InnerGridContainer>
</OuterContainer>
</OutermostContainer>
<>
<ButtonsBlock
className="mb-[30px]"
value={page}
onChange={handlePageChange}
numPages={pages}
/>
<OutermostContainer>
<OuterContainer>
<InnerGridContainer>
<motion.div
key={rowLength}
id="emoji-grid-header"
exit={{
opacity: 0,
transition: {
duration: 0.5,
type: "just",
},
}}
>
<SearchWrapper>
<SearchBar geoblocked={props.geoblocked} />
</SearchWrapper>
<FilterOptionsWrapper>
<FilterOptions
filter={sort ?? SortMarketsBy.MarketCap}
onChange={handleSortChange}
/>
</FilterOptionsWrapper>
</motion.div>
{/* Each version of the grid must wait for the other to fully exit animate out before appearing.
This provides a smooth transition from grids of varying row lengths. */}
{markets.length > 0 ? (
<>
<AnimatePresence mode="wait">
<motion.div
className="relative w-full h-full"
id="emoji-grid"
key={rowLength}
style={{
// We set these so the grid layout doesn't snap when the number of items per row changes.
// This actually seems to work better than the css media queries, although I've left them in module.css
// in case we want to use them for other things.
maxWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
minWidth: rowLength * EMOJI_GRID_ITEM_WIDTH + GRID_PADDING * 2,
}}
exit={{
opacity: 0,
transition: {
duration: 0.35,
type: "just",
},
}}
>
<StyledGrid>
{shouldAnimateGrid ? (
<LiveClientGrid markets={markets} sortBy={sort} />
) : (
<ClientGrid markets={markets} page={page} sortBy={sort} />
)}
</StyledGrid>
</motion.div>
</AnimatePresence>
<ButtonsBlock
className="mt-[30px]"
value={page}
onChange={handlePageChange}
numPages={pages}
/>
</>
) : (
<div className="py-10">
<Link href={`${ROUTES.launch}?emojis=${emojis.join("")}`}>
<Text textScale="pixelHeading3" color="econiaBlue" className="uppercase">
Click here to launch {emojis.join("")} !
</Text>
</Link>
</div>
)}
</InnerGridContainer>
</OuterContainer>
</OutermostContainer>
</>
);
};

Expand Down

0 comments on commit 63b617c

Please sign in to comment.