sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile friendly version of ticket view

Browse source 
Refactor the header into own component, so it can be shown at "page top" for the mobile one column view.
This commit is contained in:
N-Pex 2024-09-12 15:45:20 +02:00
parent 047ef094fc
commit 6440c402cf
5 changed files with 107 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

17
apps/link/app/(main)/tickets/[id]/layout.tsx
View file

@ -1,22 +1,31 @@
"use client";
import { ConversationHeader } from "@chatscope/chat-ui-kit-react";
import { Grid } from "@mui/material";
type LayoutProps = {
detail: any;
edit: any;
header: any;
params: {
id: string;
};
};
export default function Layout({ detail, edit, params: { id } }: LayoutProps) {
export default function Layout({ detail, edit, header, params: { id } }: LayoutProps) {
return (
<Grid container spacing={0} sx={{ height: "100%" }} direction="row">
<Grid item sx={{ height: "100%" }} xs={9}>
<Grid container spacing={0} sx={{ height: "100%" }} direction="row" wrap="wrap">
<Grid item sx={{ order: 0, display: { xs: "block", md: "none" } }} xs={12}>
<ConversationHeader>
<ConversationHeader.Content>
{header}
</ConversationHeader.Content>
</ConversationHeader>
</Grid>
<Grid item sx={{ height: {xs: "auto", md: "100%"}, order: {xs: 3, md: 1} }} xs={12} md={9}>
{detail}
</Grid>
<Grid item xs={3} sx={{ height: "100%" }}>
<Grid item xs={12} md={3} sx={{ height: {xs: "auto", md: "100%"}, order: 2 }}>
{edit}
</Grid>
</Grid>