jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: improve mobile compatibility of certain manage pages (#678)

Browse Source 
* style: improve mobile compatibility of certain manage pages

* style: improve mobile support for more manage pages

* fix: format issues

* chore: address pull request feedback
This commit is contained in:
Meier Lukas
2024-06-22 21:02:17 +02:00
committed by GitHub
parent f92aeba403
commit 6029a5b592
19 changed files with 167 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
View File

@@ -1,5 +1,4 @@
.bannerContainer {
padding: 3rem;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(

12
apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
View File

@@ -38,17 +38,17 @@ export const HeroBanner = () => {
const gridSpan = 12 / countIconGroups;
return (
<Box className={classes.bannerContainer} bg="dark.6" pos="relative">
<Box className={classes.bannerContainer} p={{ base: "lg", md: "3rem" }} bg="dark.6" pos="relative">
<Stack gap={0}>
<Title order={2} c="dimmed">
<Title fz={{ base: "h4", md: "h2" }} c="dimmed">
Welcome back to your
</Title>
<Group gap="xs">
<Image src="/logo/logo.png" w={40} h={40} />
<Title>Homarr Dashboard</Title>
<Group gap="xs" wrap="nowrap">
<Image src="/logo/logo.png" w={{ base: 32, md: 40 }} h={{ base: 32, md: 40 }} />
<Title fz={{ base: "h3", md: "h1" }}>Homarr Board</Title>
</Group>
</Stack>
<Box className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
<Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
<Grid>
{Array(countIconGroups)
.fill(0)