Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-09 15:05:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make dashboard responsive again (instead of taking up all the space)

Browse Source
This commit is contained in:
Sonny
2024-11-04 19:07:21 +01:00
committed by Sonny
parent 7fba156168
commit 41f82a8070
4 changed files with 72 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
inertia/components/dashboard/link/link_controls.tsx
View File

@@ -74,7 +74,7 @@ export default function LinkControls({
onFavorite(link.id, !link.favorite, onFavoriteCallback) onFavorite(link.id, !link.favorite, onFavoriteCallback)
} }
leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />} leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />}
color="yellow" color="var(--mantine-color-yellow-7)"
> >
{link.favorite ? t('remove-favorite') : t('add-favorite')} {link.favorite ? t('remove-favorite') : t('add-favorite')}
</Menu.Item> </Menu.Item>
@@ -82,7 +82,7 @@ export default function LinkControls({
component={InertiaLink} component={InertiaLink}
href={appendLinkId(route('link.edit-form').path, link.id)} href={appendLinkId(route('link.edit-form').path, link.id)}
leftSection={<GoPencil />} leftSection={<GoPencil />}
color="var(--mantine-color-blue-4)" color="blue"
> >
{t('link.edit')} {t('link.edit')}
</Menu.Item> </Menu.Item>

4
inertia/mantine/components/dashboard/dashboard_header.tsx
View File

@@ -49,7 +49,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
activeCollection?.id activeCollection?.id
)} )}
leftSection={<IoIosAddCircleOutline />} leftSection={<IoIosAddCircleOutline />}
color="var(--mantine-color-blue-4)" color="blue"
> >
{t('link.create')} {t('link.create')}
</Menu.Item> </Menu.Item>
@@ -60,7 +60,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
activeCollection?.id activeCollection?.id
)} )}
leftSection={<GoPencil />} leftSection={<GoPencil />}
color="var(--mantine-color-blue-4)" color="blue"
> >
{t('collection.edit')} {t('collection.edit')}
</Menu.Item> </Menu.Item>

20
inertia/pages/dashboard.module.css
View File

@@ -1,4 +1,22 @@
.ml_bg_color { .app_wrapper {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.app_shell {
position: relative;
height: 100%;
max-width: 100%;
width: 1440px;
}
.ml_custom_class {
position: absolute !important;
background-color: light-dark( background-color: light-dark(
var(--ml-bg-light), var(--ml-bg-light),
var(--ml-bg-dark) var(--ml-bg-dark)

95
inertia/pages/mantine_dashboard.tsx
View File

@@ -39,52 +39,55 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
return ( return (
<MantineDashboardLayout> <MantineDashboardLayout>
<DashboardProviders {...props}> <DashboardProviders {...props}>
<AppShell <div className={classes.app_wrapper}>
layout="alt" <AppShell
header={{ height: 50 }} layout="alt"
navbar={{ header={{ height: 50 }}
width: 300, navbar={{
breakpoint: 'sm', width: 300,
collapsed: { mobile: !openedNavbar }, breakpoint: 'sm',
}} collapsed: { mobile: !openedNavbar },
aside={{ }}
width: 300, aside={{
breakpoint: 'md', width: 300,
collapsed: { mobile: !openedAside }, breakpoint: 'md',
}} collapsed: { mobile: !openedAside },
classNames={{ }}
aside: classes.ml_bg_color, classNames={{
footer: classes.ml_bg_color, aside: classes.ml_custom_class,
navbar: classes.ml_bg_color, footer: classes.ml_custom_class,
header: classes.ml_bg_color, navbar: classes.ml_custom_class,
}} header: classes.ml_custom_class,
> }}
<DashboardHeader className={classes.app_shell}
navbar={{ opened: openedNavbar, toggle: toggleNavbar }} >
aside={{ opened: openedAside, toggle: toggleAside }} <DashboardHeader
/> navbar={{ opened: openedNavbar, toggle: toggleNavbar }}
<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} /> aside={{ opened: openedAside, toggle: toggleAside }}
<AppShell.Main> />
{props.activeCollection.links.length > 0 ? ( <DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
<ScrollArea <AppShell.Main>
h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))" {props.activeCollection.links.length > 0 ? (
p="md" <ScrollArea
> h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
<Stack gap="xs"> p="md"
{props.activeCollection.links.map((link) => ( >
<LinkItem key={link.id} link={link} showUserControls /> <Stack gap="xs">
))} {props.activeCollection.links.map((link) => (
</Stack> <LinkItem key={link.id} link={link} showUserControls />
</ScrollArea> ))}
) : ( </Stack>
<NoLink /> </ScrollArea>
)} ) : (
</AppShell.Main> <NoLink key={props.activeCollection.id} />
<DashboardAside isOpen={openedAside} toggle={toggleAside} /> )}
<AppShell.Footer pl="xs" pr="xs"> </AppShell.Main>
<MantineFooter /> <DashboardAside isOpen={openedAside} toggle={toggleAside} />
</AppShell.Footer> <AppShell.Footer pl="xs" pr="xs">
</AppShell> <MantineFooter />
</AppShell.Footer>
</AppShell>
</div>
</DashboardProviders> </DashboardProviders>
</MantineDashboardLayout> </MantineDashboardLayout>
); );