matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix app mobile layout

Browse Source
This commit is contained in:
Matt
2024-12-22 21:51:36 -05:00
parent c73cf57673
commit 3abd63b836
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
dashboard/src/App.jsx
View File

@@ -82,29 +82,32 @@ const SmallLayout = () => {
const DashboardLayout = () => { const DashboardLayout = () => {
return ( return (
<ScrollProvider> <ScrollProvider>
<div className="min-h-screen max-w-[1800px] mx-auto"> <div className="min-h-screen max-w-[1600px] mx-auto">
<div className="p-4"> <div className="p-4">
<Header /> <Header />
</div> </div>
<Navigation /> <Navigation />
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
<div className="grid grid-cols-12 gap-4"> <div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
<div className="col-span-8"> <div className="2xl:col-span-4 col-span-6">
<div className="space-y-4 h-full w-full"> <div className="space-y-4 h-full w-full">
<StatCards /> <StatCards />
</div> </div>
</div> </div>
<div className="col-span-4 h-[530px]"> <div className="xl:col-span-2 col-span-6 h-[530px] 2xl:block hidden">
<div className="h-full"> <div className="h-full">
<div className="h-full"><EventFeed /></div> <div className="h-full"><EventFeed /></div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-cols-12 gap-4"> <div className="grid grid-cols-12 gap-4">
<div className="col-span-4 h-[740px]"> <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:hidden h-[740px]">
<EventFeed />
</div>
<div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:col-span-4 h-[740px]">
<ProductGrid /> <ProductGrid />
</div> </div>
<div className="col-span-8 h-full w-full flex"> <div className="col-span-12 2xl:col-span-8 h-full w-full flex">
<SalesChart className="w-full h-full"/> <SalesChart className="w-full h-full"/>
</div> </div>
</div> </div>

2
dashboard/src/components/dashboard/EventFeed.jsx
View File

@@ -1387,7 +1387,7 @@ const EventFeed = ({
); );
return ( return (
<Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm"> <Card className="flex flex-col h-full bg-white dark:bg-gray-900/60 backdrop-blur-sm w-full">
<CardHeader className="p-6"> <CardHeader className="p-6">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>

4
dashboard/src/components/dashboard/Header.jsx
View File

@@ -133,7 +133,7 @@ const Header = () => {
)} )}
> >
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex flex-col justify-between lg:flex-row items-left sm:items-center flex-wrap"> <div className="flex flex-col justify-between lg:flex-row items-center sm:items-center flex-wrap">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="flex space-x-2"> <div className="flex space-x-2">
<div <div
@@ -154,7 +154,7 @@ const Header = () => {
</h1> </h1>
</div> </div>
</div> </div>
<div className="flex items-left sm:items-center justify-start flex-wrap mt-2 sm:mt-0"> <div className="flex items-left sm:items-center justify-center flex-wrap mt-2 sm:mt-0">
{weather?.main && ( {weather?.main && (
<> <>
<div className="flex-col items-center text-center"> <div className="flex-col items-center text-center">