VSinerva/freesewing
1
0
Fork 0
Code Activity

wip: Bunch of changes for v4

Browse source 
From the top of my head (but I'll write this up later):

- We keep the info about the designs in the design
- We use a new about.json file for this
- The auto-generated data.mjs file is no more
- Linedrawings we use in the design picker use the front
- Linedrawings should respect square aspect ration
- Migrated components to use the 'tw-' prefic for tailwind CSS classes
  to avoid conflicts with docusaurus styles
This commit is contained in:
joostdecock 2024-12-26 18:33:49 +01:00
parent 6b8eea2724
commit c8808695e5
255 changed files with 3038 additions and 2304 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/react/components/Layout/index.mjs
View file

@ -17,10 +17,10 @@ export const Layout = ({ children = [], crumbs = [], description, Link = false,
return (
<BaseLayout>
<div className="max-w-xl w-full mx-auto">
<div className="tw-max-w-xl tw-w-full tw-mx-auto">
<Breadcrumbs {...{ crumbs, title, Link }} />
<h1 className="break-words">{title}</h1>
<div className="xl:pl-4">{children}</div>
<h1 className="tw-break-words">{title}</h1>
<div className="xl:tw-pl-4">{children}</div>
</div>
</BaseLayout>
)
@ -33,7 +33,7 @@ export const Layout = ({ children = [], crumbs = [], description, Link = false,
* @param {array} props.children - The content to go in the layout
*/
export const BaseLayout = ({ children }) => (
<div className="flex flex-row items-start w-full justify-between 2xl:px-36 xl:px-12 px-4 gap-0 lg:gap-4 xl:gap-8 3xl: gap-12">
<div className="tw-flex tw-flex-row tw-items-start tw-w-full tw-justify-between 2xl:tw-px-36 xl:tw-px-12 tw-px-4 tw-gap-0 lg:tw-gap-4 xl:tw-gap-8 3xl:tw-gap-12">
{children}
</div>
)
@ -45,7 +45,7 @@ export const BaseLayout = ({ children }) => (
* @param {array} props.children - The content to go in the layout
*/
export const BaseLayoutLeft = ({ children = [] }) => (
<div className="max-w-96 w-1/4 hidden lg:block shrink-0 my-8 sticky top-4 max-h-screen overflow-scroll">
<div className="tw-max-w-96 tw-w-1/4 tw-hidden lg:tw-block tw-shrink-0 tw-my-8 tw-sticky tw-top-4 tw-max-h-screen tw-overflow-scroll">
{children}
</div>
)
@ -57,7 +57,9 @@ export const BaseLayoutLeft = ({ children = [] }) => (
* @param {array} props.children - The content to go in the layout
*/
export const BaseLayoutRight = ({ children = [] }) => (
<div className="max-w-96 w-1/4 hidden xl:block my-8 sticky top-2">{children}</div>
<div className="tw-max-w-96 tw-w-1/4 tw-hidden xl:tw-block tw-my-8 tw-sticky tw-top-2">
{children}
</div>
)
/*
@ -68,7 +70,9 @@ export const BaseLayoutRight = ({ children = [] }) => (
* @param {array} props.wide - Whether or not to use the wide view
*/
export const BaseLayoutProse = ({ children = [], wide = false }) => (
<div className={`grow w-full m-auto max-w-${wide ? 'full' : 'prose'} my-8`}>{children}</div>
<div className={`tw-grow tw-w-full tw-m-auto tw-max-w-${wide ? 'full' : 'prose'} tw-my-8`}>
{children}
</div>
)
/*
@ -78,7 +82,7 @@ export const BaseLayoutProse = ({ children = [], wide = false }) => (
* @param {array} props.children - The content to go in the layout
*/
export const BaseLayoutWide = ({ children = [] }) => (
<div className="grow w-full m-auto my-8 grow">{children}</div>
<div className="tw-grow tw-w-full tw-m-auto tw-my-8 tw-grow">{children}</div>
)
/*
@ -90,8 +94,8 @@ export const BaseLayoutWide = ({ children = [] }) => (
export const NoTitleLayout = ({ children }) => {
return (
<BaseLayout>
<div className="max-w-xl w-full mx-auto">
<div className="xl:pl-4">{children}</div>
<div className="tw-max-w-xl tw-w-full tw-mx-auto">
<div>{children}</div>
</div>
</BaseLayout>
)