studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱(demo) make demo responsive

Browse Source 
The responsive version of the demo app was buggy, so we need to
make it shiny!

Fixes #275
This commit is contained in:
Nathan Vasse
2024-02-23 14:28:14 +01:00
committed by NathanVss
parent 4fbd75cdcf
commit 1707ad0b66
8 changed files with 517 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/demo/package.json
View File

@@ -6,7 +6,7 @@
"scripts": {
"lint": "eslint . 'src/**/*.{ts,tsx}'",
"dev": "vite & nodemon --watch cunningham.ts --exec yarn build-theme",
"build-theme": "cunningham -o src -g css,ts",
"build-theme": "cunningham -o src -g css,ts,scss && mv src/cunningham-tokens.scss src/cunningham-tokens-sass.scss",
"build": "tsc && vite build",
"build-demo": "tsc && vite build --base=/cunningham/demo/",
"preview": "vite preview"

BIN
apps/demo/public/pattern_dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 142 KiB

BIN
apps/demo/public/pattern_default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 246 KiB

11
apps/demo/src/App.tsx
View File

@@ -80,17 +80,6 @@ export const App = () => {
return (
<CunninghamProvider currentLocale={locale} theme={activeTheme}>
<div className="container">
{theme === Theme.CUNNINGHAM && (
<img
className="pattern"
src={
variant === Variant.DARK
? "pattern_dark.png"
: "pattern_default.png"
}
alt="Background pattern"
/>
)}
<Onboarding />
<Home modal={modal} />
<Create {...modal} />

12
apps/demo/src/Create.tsx
View File

@@ -47,10 +47,14 @@ export const Create = (props: PageProps) => {
};
return (
<Modal {...props} size={ModalSize.LARGE} closeOnClickOutside>
<Modal
{...props}
size={ModalSize.MEDIUM}
title="Add character"
closeOnClickOutside
>
<form className="page__create clr-greyscale-900" onSubmit={submit}>
<h1>Add a character</h1>
<div className="card">
<div className="page__create__group">
<h3 className="fw-bold fs-h3">General Information</h3>
<Alert type={VariantType.INFO}>
You are about to add a new character to the collection
@@ -86,7 +90,7 @@ export const Create = (props: PageProps) => {
/>
<Checkbox name="is_guest" label="This character is a guest" />
</div>
<div className="card mt-l">
<div className="page__create__group mt-l">
<h3 className="fw-bold fs-h3">Bio</h3>
<Alert type={VariantType.WARNING}>
Please be exhaustive, every detail counts!

8
apps/demo/src/Onboarding.tsx
View File

@@ -19,7 +19,12 @@ const Onboarding = () => {
closeOnClickOutside
rightActions={
<div className="onboarding__footer">
<Button color="primary" iconPosition="right" onClick={handleClose}>
<Button
color="primary"
iconPosition="right"
fullWidth={true}
onClick={handleClose}
>
Let&apos;s go!
</Button>
<Button
@@ -27,6 +32,7 @@ const Onboarding = () => {
color="tertiary-text"
size="small"
icon={<span className="material-icons">open_in_new</span>}
fullWidth={true}
>
Go to the documentation
</Button>

461
apps/demo/src/cunningham-tokens-sass.scss Normal file
View File

@@ -0,0 +1,461 @@
$themes: (
'default': (
'theme': (
'colors': (
'secondary-text': #555F6B,
'secondary-100': #F2F7FC,
'secondary-200': #EBF3FA,
'secondary-300': #E2EEF8,
'secondary-400': #DDEAF7,
'secondary-500': #D4E5F5,
'secondary-600': #C1D0DF,
'secondary-700': #97A3AE,
'secondary-800': #757E87,
'secondary-900': #596067,
'info-text': #FFFFFF,
'info-100': #EBF2FC,
'info-200': #8CB5EA,
'info-300': #5894E1,
'info-400': #377FDB,
'info-500': #055FD2,
'info-600': #0556BF,
'info-700': #044395,
'info-800': #033474,
'info-900': #022858,
'greyscale-100': #FAFAFB,
'greyscale-200': #F3F4F4,
'greyscale-300': #E7E8EA,
'greyscale-400': #C2C6CA,
'greyscale-500': #9EA3AA,
'greyscale-600': #79818A,
'greyscale-700': #555F6B,
'greyscale-800': #303C4B,
'greyscale-900': #0C1A2B,
'greyscale-000': #FFFFFF,
'primary-100': #EBF2FC,
'primary-200': #8CB5EA,
'primary-300': #5894E1,
'primary-400': #377FDB,
'primary-500': #055FD2,
'primary-600': #0556BF,
'primary-700': #044395,
'primary-800': #033474,
'primary-900': #022858,
'success-100': #EFFCD3,
'success-200': #DBFAA9,
'success-300': #BEF27C,
'success-400': #A0E659,
'success-500': #76D628,
'success-600': #5AB81D,
'success-700': #419A14,
'success-800': #2C7C0C,
'success-900': #1D6607,
'warning-100': #FFF8CD,
'warning-200': #FFEF9B,
'warning-300': #FFE469,
'warning-400': #FFDA43,
'warning-500': #FFC805,
'warning-600': #DBA603,
'warning-700': #B78702,
'warning-800': #936901,
'warning-900': #7A5400,
'danger-100': #F4B0B0,
'danger-200': #EE8A8A,
'danger-300': #E65454,
'danger-400': #E13333,
'danger-500': #DA0000,
'danger-600': #C60000,
'danger-700': #9B0000,
'danger-800': #780000,
'danger-900': #5C0000,
'primary-text': #FFFFFF,
'success-text': #FFFFFF,
'warning-text': #FFFFFF,
'danger-text': #FFFFFF
),
'font': (
'sizes': (
'h1': 1.75rem,
'h2': 1.375rem,
'h3': 1.125rem,
'h4': 0.8125rem,
'h5': 0.625rem,
'h6': 0.5rem,
'l': 1rem,
'm': 0.8125rem,
's': 0.6875rem
),
'weights': (
'thin': 200,
'light': 300,
'regular': 400,
'medium': 500,
'bold': 600,
'extrabold': 700,
'black': 800
),
'families': (
'base': #{\Roboto Flex Variable\, sans-serif},
'accent': #{\Roboto Flex Variable\, sans-serif}
),
'letterSpacings': (
'h1': normal,
'h2': normal,
'h3': normal,
'h4': normal,
'h5': 1px,
'h6': normal,
'l': normal,
'm': normal,
's': normal
)
),
'spacings': (
'xl': 4rem,
'l': 3rem,
'b': 1.625rem,
's': 1rem,
't': 0.5rem,
'st': 0.25rem
),
'transitions': (
'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)},
'ease-out': #{cubic-bezier(0.33, 1, 0.68, 1)},
'ease-in-out': #{cubic-bezier(0.65, 0, 0.35, 1)},
'duration': 250ms
),
'breakpoints': (
'xs': 0,
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px,
'xxl': 1400px
)
)
),
'dark': (
'theme': (
'colors': (
'greyscale-100': #182536,
'greyscale-200': #303C4B,
'greyscale-300': #555F6B,
'greyscale-400': #79818A,
'greyscale-500': #9EA3AA,
'greyscale-600': #C2C6CA,
'greyscale-700': #E7E8EA,
'greyscale-800': #F3F4F4,
'greyscale-900': #FAFAFB,
'greyscale-000': #0C1A2B,
'primary-100': #3B4C62,
'primary-200': #4D6481,
'primary-300': #6381A6,
'primary-400': #7FA5D5,
'primary-500': #8CB5EA,
'primary-600': #A3C4EE,
'primary-700': #C3D8F4,
'primary-800': #DDE9F8,
'primary-900': #F4F8FD,
'success-100': #EEF8D7,
'success-200': #D9F1B2,
'success-300': #BDE985,
'success-400': #A0E25D,
'success-500': #76D628,
'success-600': #5BB520,
'success-700': #43941A,
'success-800': #307414,
'success-900': #225D10,
'warning-100': #F7F3D5,
'warning-200': #F0E5AA,
'warning-300': #E8D680,
'warning-400': #E3C95F,
'warning-500': #D9B32B,
'warning-600': #BD9721,
'warning-700': #9D7B1C,
'warning-800': #7E6016,
'warning-900': #684D12,
'danger-100': #F8D0D0,
'danger-200': #F09898,
'danger-300': #F09898,
'danger-400': #ED8585,
'danger-500': #E96666,
'danger-600': #DD6666,
'danger-700': #C36666,
'danger-800': #AE6666,
'danger-900': #9D6666
)
),
'components': (
'card': (
'border-width': none,
'box-shadow': #{rgba(0, 8, 16, 0.3) 0px 16px 24px}
)
)
),
'redflux_dark': (
'theme': (
'colors': (
'primary-text': #FFFFFF,
'primary-100': #FA8D92,
'primary-200': #F95B63,
'primary-300': #F72A35,
'primary-400': #E50914,
'primary-500': #C30811,
'primary-600': #A0060E,
'primary-700': #7E050B,
'primary-800': #5C0408,
'primary-900': #390205,
'secondary-text': #FFF,
'secondary-100': #1b5ad7,
'secondary-200': #146cea,
'secondary-300': #007ffe,
'secondary-400': #008eff,
'secondary-500': #279eff,
'secondary-600': #56b0ff,
'secondary-700': #8ac6ff,
'secondary-800': #b9dcff,
'secondary-900': #e2f1ff,
'greyscale-000': #000000BB,
'greyscale-100': #191919BB,
'greyscale-200': #232323,
'greyscale-300': #292929,
'greyscale-400': #343434,
'greyscale-500': #404040,
'greyscale-600': #aaaaaa,
'greyscale-700': #cccccc,
'greyscale-800': #eeeeee,
'greyscale-900': #f7f7f7,
'danger-900': #FACED0,
'danger-800': #F7A9AD,
'danger-700': #F38389,
'danger-600': #F05E66,
'danger-500': #EC3942,
'danger-400': #D8151F,
'danger-300': #A51017,
'danger-200': #720B10,
'danger-100': #3F0609,
'info-900': #53A4FD,
'info-800': #2B8FFC,
'info-700': #047AFA,
'info-600': #0366D2,
'info-500': #0255AF,
'info-400': #02448C,
'info-300': #013368,
'info-200': #012245,
'info-100': #001122,
'success-900': #A9F7C0,
'success-800': #8DF4AC,
'success-700': #71F198,
'success-600': #55EF83,
'success-500': #39EC6F,
'success-400': #14CF4C,
'success-300': #0E9236,
'success-200': #085620,
'success-100': #021909,
'warning-900': #EAC88B,
'warning-800': #E4BA6D,
'warning-700': #DFAB4F,
'warning-600': #D99D31,
'warning-500': #B68121,
'warning-400': #8A621A,
'warning-300': #5F4412,
'warning-200': #34250A,
'warning-100': #090702
),
'font': (
'families': (
'base': #{Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif},
'accent': #{Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif}
)
)
),
'components': (
'button': (
'border-radius': 0.1875rem
),
'forms-input': (
'border-radius': 0.1875rem,
'border-color': #9EA3AA,
'border-color--hover': #79818A,
'background-color': #FAFAFB,
'label-color--focus': #555F6B
),
'forms-select': (
'border-radius': 0.1875rem,
'border-color': #9EA3AA,
'border-color--hover': #79818A,
'background-color': #FAFAFB,
'border-color--focus': #555F6B,
'label-color--focus': #555F6B,
'menu-background-color': #191919,
'item-background-color--selected': #0556BF
),
'forms-datepicker': (
'border-radius': 0.1875rem,
'border-color': #9EA3AA,
'border-color--hover': #79818A,
'background-color': #FAFAFB,
'border-color--focus': #555F6B,
'label-color--focus': #555F6B,
'menu-background-color': #191919,
'grid-cell--border-color--today': #303C4B,
'grid-cell--color--today': #303C4B,
'range-selection-background-color': #022858,
'item-background-color--selected': #0556BF
),
'forms-fileuploader': (
'border-color': #9EA3AA,
'border-color--hover': #79818A,
'background-color': #FAFAFB,
'background-color--active': #9EA3AA,
'accent-color': #303C4B
),
'forms-textarea': (
'border-radius': 0.1875rem,
'border-color': #9EA3AA,
'border-color--hover': #79818A,
'background-color': #FAFAFB,
'border-color--focus': #555F6B,
'label-color--focus': #555F6B
),
'forms-checkbox': (
'border-radius': 0.1875rem,
'accent-color': #FAFAFB,
'background-color': #303C4B
),
'forms-switch': (
'handle-border-radius': 0.3rem,
'rail-border-radius': 0.500rem,
'accent-color': #303C4B,
'handle-background-color': #FAFAFB,
'rail-background-color': #C2C6CA
),
'forms-radio': (
'accent-color': #FAFAFB,
'background-color': #303C4B
),
'modal': (
'border-radius': 0.1875rem,
'background-color': #191919,
'backdrop-color': #FFFFFF
),
'card': (
'border-radius': 0.1875rem,
'border-width': none,
'box-shadow': #{rgba(255, 220, 220, 0.05) 0px 0px 60px 10px}
)
)
),
'blueney_dark': (
'theme': (
'colors': (
'primary-text': #FFFFFF,
'primary-900': #53B0FF,
'primary-800': #39A4FF,
'primary-700': #2099FF,
'primary-600': #068DFF,
'primary-500': #0080EB,
'primary-400': #0072D2,
'primary-300': #00549A,
'primary-200': #003562,
'primary-100': #00172A,
'greyscale-900': #FAFAFC,
'greyscale-800': #DBDDE7,
'greyscale-700': #BCC0D3,
'greyscale-600': #9EA2BF,
'greyscale-500': #7F85AB,
'greyscale-400': #626995,
'greyscale-300': #4E5376,
'greyscale-200': #393E57,
'greyscale-100': #1B1D29,
'greyscale-000': #151823
),
'font': (
'families': (
'base': #{Avenir, sans-serif},
'accent': #{Avenir, sans-serif}
)
)
),
'components': (
'card': (
'border-radius': 0.25rem,
'border-width': none,
'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px}
),
'button': (
'border-radius': 0.25rem
),
'forms-input': (
'border-radius': 0.25rem,
'border-color': transparent,
'border-color--hover': transparent,
'border-color--focus': #555F6B,
'background-color': #F3F4F4,
'label-color--focus': #555F6B,
'label-color': #555F6B
),
'forms-select': (
'border-radius': 0.25rem,
'border-color': transparent,
'border-color--hover': transparent,
'border-color--focus': #555F6B,
'background-color': #F3F4F4,
'label-color--focus': #555F6B,
'menu-background-color': #F3F4F4,
'item-background-color--hover': #E7E8EA,
'item-background-color--selected': #377FDB
),
'forms-datepicker': (
'border-radius': 0.25rem,
'border-color': transparent,
'border-color--hover': transparent,
'border-color--focus': #555F6B,
'background-color': #F3F4F4,
'label-color--focus': #555F6B,
'menu-background-color': #F3F4F4,
'grid-cell--border-color--today': #9EA3AA,
'grid-cell--color--today': #555F6B,
'grid-cell--color--selected': #0556BF,
'range-selection-background-color': #EBF2FC,
'item-background-color--hover': #E7E8EA,
'item-background-color--selected': #377FDB
),
'forms-fileuploader': (
'background-color': #F3F4F4,
'background-color--active': #E7E8EA,
'border-color': transparent
),
'forms-textarea': (
'border-color': transparent,
'border-color--hover': transparent,
'border-color--focus': #555F6B,
'border-radius': 0.25rem,
'background-color': #F3F4F4,
'label-color--focus': #555F6B
),
'forms-checkbox': (
'border-radius': 0.25rem,
'border-color': #E7E8EA,
'accent-color': #0C1A2B,
'background-color': #F3F4F4
),
'forms-switch': (
'rail-background-color': #F3F4F4,
'accent-color': #377FDB
),
'forms-radio': (
'border-color': #E7E8EA,
'accent-color': #0C1A2B,
'background-color': #F3F4F4
),
'modal': (
'border-radius': 0.25rem,
'background-color': #FAFAFB,
'backdrop-color': #00172AAB,
'border-color': transparent,
'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px}
)
)
)
) !default;

49
apps/demo/src/index.scss
View File

@@ -2,7 +2,10 @@
@use "@openfun/cunningham-react/sass/icons";
@use "@openfun/cunningham-react/style";
@use "cunningham-tokens";
@use "cunningham-tokens-sass" as *;
$lg: map-get($themes, "default", "theme", "breakpoints", "lg");
$sm: map-get($themes, "default", "theme", "breakpoints", "sm");
// Reset
h1 {
@@ -64,9 +67,13 @@ html {
.container {
margin: auto;
position: relative;
height: 100%;
overflow: hidden;
width: 1100px;
min-height: 100%;
display: flex;
flex-direction: column;
@media (max-width: 1200px) {
width: calc(100% - 2rem);
}
@@ -76,13 +83,17 @@ html {
// Home
.page__home {
display: flex;
height: 100%;
flex-grow: 1;
flex-direction: column;
&__title {
gap: 1.5rem;
margin: 4rem 0;
@media (max-width: $lg) {
margin: 6rem 0 4rem 0;
}
button {
margin-top: 1.5rem;
}
@@ -93,6 +104,20 @@ html {
}
}
html[data-theme="cunningham"] body {
background-repeat: no-repeat;
background-position: -300px -300px;
background-attachment: fixed;
}
html[data-theme="cunningham"][data-variant="dark"] body {
background-image: url(/pattern_dark.png);
}
html[data-theme="cunningham"][data-variant="light"] body {
background-image: url(/pattern_default.png);
}
html[data-theme="redflux"] {
background: #000000D7 url(/redflux_bg.webp) 50%/cover no-repeat fixed;
background-blend-mode: darken;
@@ -100,21 +125,17 @@ html[data-theme="redflux"] {
html[data-theme="blueney"] {
background: url(/blueney_bg.jpg) 50%/cover no-repeat fixed;
}
// Create
.page__create {
max-width: 960px;
margin: 0 auto;
padding-bottom: 5rem;
h1 {
text-align: center;
margin: 4rem 0;
}
.card {
&__group {
display: flex;
flex-direction: column;
gap: 1.5rem;
@@ -155,14 +176,24 @@ html[data-theme="blueney"] {
min-width: 200px;
justify-content: center;
}
@media (max-width: $sm) {
flex-direction: column;
flex-grow: 1;
> .c__button {
width: 100%;
min-width: auto;
}
}
}
// links
.links {
border-top: thin solid var(--c--theme--colors--greyscale-300);
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-top: 5rem;
ul {
text-align: right;