regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set container width by device type

Browse Source
This commit is contained in:
regalijan 2023-10-19 16:49:23 -04:00
parent 4409b293af
commit 491d48467c
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/routes/mod-queue.tsx
View File

@ -67,6 +67,12 @@ export async function loader({ context }: { context: RequestContext }) {
}; };
} }
export function meta() {
return {
title: "Moderation Queue - Car Crushers",
};
}
export default function () { export default function () {
const pageProps = useLoaderData<typeof loader>(); const pageProps = useLoaderData<typeof loader>();
const isDesktop = useBreakpointValue({ base: false, lg: true }); const isDesktop = useBreakpointValue({ base: false, lg: true });
@ -74,7 +80,11 @@ export default function () {
const [entries, setEntries] = useState([] as JSX.Element[]); const [entries, setEntries] = useState([] as JSX.Element[]);
for (const type of pageProps.entry_types) for (const type of pageProps.entry_types)
entryTypes.push(<option value={type.value}>{type.name}</option>); entryTypes.push(
<option key={type.value} value={type.value}>
{type.name}
</option>
);
async function updateQueue( async function updateQueue(
queue_type: string, queue_type: string,
@ -126,12 +136,11 @@ export default function () {
return ( return (
<Container maxW="container.lg"> <Container maxW="container.lg">
<Flex> <Flex>
<VStack w="container.md">{entries}</VStack> <VStack w={isDesktop ? "container.md" : "container.lg"}>
<Box display={isDesktop ? undefined : "none"} w="256px"> {entries}
<Select placeholder="Entry Type"> </VStack>
<option value="">All</option> <Box display={isDesktop ? undefined : "none"} ml="16px" w="248px">
{entryTypes} <Select>{entryTypes}</Select>
</Select>
</Box> </Box>
</Flex> </Flex>
</Container> </Container>