Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-08 22:53:25 +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)
}
leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />}
color="yellow"
color="var(--mantine-color-yellow-7)"
>
{link.favorite ? t('remove-favorite') : t('add-favorite')}
</Menu.Item>
@@ -82,7 +82,7 @@ export default function LinkControls({
component={InertiaLink}
href={appendLinkId(route('link.edit-form').path, link.id)}
leftSection={<GoPencil />}
color="var(--mantine-color-blue-4)"
color="blue"
>
{t('link.edit')}
</Menu.Item>

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

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

95
inertia/pages/mantine_dashboard.tsx
View File

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