QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

PRDONE-94: updates from code review feedback, final tweaks to dashboard mocks

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-02 20:47:28 -05:00
parent 7cd3d26ead
commit ea5becce4c
17 changed files with 163 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/qqq/components/Sidenav/index.tsx
View File

@ -28,6 +28,7 @@ import {useLocation, NavLink} from "react-router-dom";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import {useMaterialUIController, setMiniSidenav, setTransparentSidenav, setWhiteSidenav,} from "context";
import sidenavLogoLabel from "examples/Sidenav/styles/sidenav";
import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton";
import SidenavCollapse from "qqq/components/Sidenav/SidenavCollapse";
import SidenavItem from "qqq/components/Sidenav/SidenavItem";
@ -37,7 +38,7 @@ import SidenavRoot from "qqq/components/Sidenav/SidenavRoot";
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
brand?: string;
brandName: string;
brandName?: string;
routes: {
[key: string]:
| ReactNode
@ -313,7 +314,13 @@ function Sidenav({color, brand, brandName, routes, ...rest}: Props): JSX.Element
</MDTypography>
</MDBox>
<MDBox component={NavLink} to="/" display="flex" alignItems="center">
<MDBox component="img" src={brand} alt="Brand" width="100%" />
{brand && <MDBox component="img" src={brand} alt="Brand" width="100%" />}
{brandName && <MDBox width={!brandName && "100%"} sx={(theme: any) => sidenavLogoLabel(theme, {miniSidenav})}>
<MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
{brandName}
</MDTypography>
</MDBox>
}
</MDBox>
</MDBox>
<Divider
@ -332,6 +339,7 @@ function Sidenav({color, brand, brandName, routes, ...rest}: Props): JSX.Element
Sidenav.defaultProps = {
color: "info",
brand: "",
brandName: "",
};
export default Sidenav;

128
src/qqq/components/Temporary/BookingCard/index.tsx
View File

@ -1,128 +0,0 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props
{
image: string;
title: string;
description: string;
price: string;
location: ReactNode;
action?: ReactNode | boolean;
[key: string]: any;
}
function BookingCard({image, title, description, price, location, action}: Props): JSX.Element
{
return (
<Card
sx={{
"&:hover .card-header": {
transform: action && "translate3d(0, -50px, 0)",
},
}}
>
<MDBox
position="relative"
borderRadius="lg"
mt={-3}
mx={2}
className="card-header"
sx={{transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)"}}
>
<MDBox
component="img"
src={image}
alt={title}
borderRadius="lg"
shadow="md"
width="100%"
height="100%"
position="relative"
zIndex={1}
/>
<MDBox
borderRadius="lg"
shadow="md"
width="100%"
height="100%"
position="absolute"
left={0}
top="0"
sx={{
backgroundImage: `url(${image})`,
transform: "scale(0.94)",
filter: "blur(12px)",
backgroundSize: "cover",
}}
/>
</MDBox>
<MDBox textAlign="center" pt={3} px={3}>
<MDBox display="flex" justifyContent="center" alignItems="center" mt={action ? -8 : -4.25}>
{action}
</MDBox>
<MDTypography variant="h5" fontWeight="regular" sx={{mt: 4}}>
{title}
</MDTypography>
<MDTypography variant="body2" color="text" sx={{mt: 1.5, mb: 1}}>
{description}
</MDTypography>
</MDBox>
<Divider />
<MDBox
display="flex"
justifyContent="space-between"
alignItems="center"
pt={0.5}
pb={3}
px={3}
lineHeight={1}
>
<MDTypography variant="body2" fontWeight="regular" color="text">
{price}
</MDTypography>
<MDBox color="text" display="flex" alignItems="center">
<Icon color="inherit" sx={{m: 0.5}}>
place
</Icon>
<MDTypography variant="button" fontWeight="light" color="text">
{location}
</MDTypography>
</MDBox>
</MDBox>
</Card>
);
}
// Declaring default props for BookingCard
BookingCard.defaultProps = {
action: false,
};
export default BookingCard;