mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
57c1e42389
* feature: First pass at Container Queries
`react-container-query` used to emulate 'media' queries based on container widths. Needs more thought on how to handle layouts for multiple devices. Min / Max widths for sections probs a good idea.
Added in an 'Edit' button to toggle editing the layout.
Added mostly static chakra elements to each of the sections to prototype the above Container Queries. I know it is not pretty, but TypeScript and I wanted to prototype it without stalling. I *will* split them out into components but would be good to perhaps pair up with you for this when you're available @vidvidvid. 🙏
* feature: Calendar UI elements (First pass)
Added in chakra popovers for event details.
Again, this is just chakra elements to be pulled out as templates for components.
* feat: better styling on the popovers & transitions on cal container queries
* feature: Improving responsiveness
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
// import { Box, ChakraProps } from '@metafam/ds';
|
|
// import classnames from 'classnames';
|
|
// import React, { FC, ReactElement, ReactNode, Ref } from 'react';
|
|
// import { ContainerQuery } from 'react-container-query';
|
|
|
|
export interface Query {
|
|
[key: string]: ContainerQueries;
|
|
}
|
|
export interface Params {
|
|
[key: string]: boolean;
|
|
}
|
|
export interface ContainerQueries {
|
|
minWidth?: number;
|
|
maxWidth?: number;
|
|
minHeight?: number;
|
|
maxHeight?: number;
|
|
}
|
|
|
|
export const containerQueries = {
|
|
container__xxs: {
|
|
minWidth: 0,
|
|
maxWidth: 129,
|
|
},
|
|
container__xs: {
|
|
minWidth: 130,
|
|
maxWidth: 278,
|
|
},
|
|
container__sm: {
|
|
minWidth: 278,
|
|
maxWidth: 426,
|
|
},
|
|
container__md: {
|
|
minWidth: 427,
|
|
maxWidth: 575,
|
|
},
|
|
container__lg: {
|
|
minWidth: 576,
|
|
maxWidth: 725,
|
|
},
|
|
container__xl: {
|
|
minWidth: 726,
|
|
maxWidth: 875,
|
|
},
|
|
};
|
|
|
|
// interface DashboardSectionInterface {
|
|
// containerQuery: Query;
|
|
// id: string;
|
|
// // children: React.ReactElement;
|
|
// }
|
|
|
|
// export const DashboardSection = React.forwardRef<HTMLDivElement, DashboardSectionInterface>({ style = {}, className = '' }, { containerQuery, id }, ...props, ref) => {
|
|
// const { containerQuery, id } = props;
|
|
// console.log('Section: ', containerQuery, id);
|
|
|
|
// return (
|
|
// <Box key={`${id}`} className="gridItem" style={style}>
|
|
// <Box borderBottomRadius="lg" borderTopRadius="lg" p={6} boxShadow="md">
|
|
// <ContainerQuery query={containerQuery}>
|
|
// {(params) => <Box className={classnames(params)}>{children}</Box>}
|
|
// </ContainerQuery>
|
|
// </Box>
|
|
// </Box>
|
|
// );
|
|
// }
|