Skip to content

Commit ea132e2

Browse files
author
Aleksander Katan
committed
Merge remote-tracking branch 'origin/main' into feat/better-mul-interface
2 parents f311b4a + f6564ed commit ea132e2

22 files changed

+97
-87
lines changed

‎apps/typegpu-docs/src/components/ControlPanel.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function ToggleRow({
4141

4242
<label
4343
htmlFor={toggleId}
44-
className='grid items-center justify-end h-10 cursor-pointer'
44+
className='grid h-10 cursor-pointer items-center justify-end'
4545
>
4646
<Toggle
4747
id={toggleId}
@@ -218,7 +218,7 @@ function ButtonRow({ label, onClick }: { label: string; onClick: () => void }) {
218218
const runWithCatch = useSetAtom(runWithCatchAtom);
219219

220220
return (
221-
<div className='grid h-10 col-span-2'>
221+
<div className='col-span-2 grid h-10'>
222222
<Button onClick={() => runWithCatch(onClick)}>{label}</Button>
223223
</div>
224224
);
@@ -316,15 +316,15 @@ export function ControlPanel() {
316316
<div
317317
className={cs(
318318
isGPUSupported ? '' : 'hidden md:flex',
319-
'box-border flex flex-col gap-4 p-6 bg-grayscale-0 rounded-xl max-h-[50%] md:max-h-full overflow-auto',
319+
'box-border flex max-h-[50%] flex-col gap-4 overflow-auto rounded-xl bg-grayscale-0 p-6 md:max-h-full',
320320
)}
321321
>
322-
<div className='hidden md:flex flex-col gap-4'>
323-
<h2 className='text-xl font-medium'>Control panel</h2>
322+
<div className='hidden flex-col gap-4 md:flex'>
323+
<h2 className='font-medium text-xl'>Control panel</h2>
324324

325325
<label
326326
htmlFor={showLeftMenuId}
327-
className='flex items-center justify-between gap-3 text-sm cursor-pointer'
327+
className='flex cursor-pointer items-center justify-between gap-3 text-sm'
328328
>
329329
<span>Show left menu</span>
330330
<Toggle
@@ -335,7 +335,7 @@ export function ControlPanel() {
335335
</label>
336336
<label
337337
htmlFor={showCodeEditorId}
338-
className='flex items-center justify-between gap-3 text-sm cursor-pointer'
338+
className='flex cursor-pointer items-center justify-between gap-3 text-sm'
339339
>
340340
<span>Show code editor</span>
341341
<Toggle
@@ -353,14 +353,14 @@ export function ControlPanel() {
353353
)
354354
: null}
355355

356-
<hr className='my-0 box-border w-full border-t border-tameplum-100' />
356+
<hr className='my-0 box-border w-full border-tameplum-100 border-t' />
357357
</div>
358358

359359
{isGPUSupported
360360
? (
361361
<>
362-
<h2 className='m-0 text-xl font-medium'>Example controls</h2>
363-
<div className='grid items-center grid-cols-2 gap-4 overflow-auto p-1 pb-2'>
362+
<h2 className='m-0 font-medium text-xl'>Example controls</h2>
363+
<div className='grid grid-cols-2 items-center gap-4 overflow-auto p-1 pb-2'>
364364
{exampleControlParams.map((param) => paramToControlRow(param))}
365365
</div>
366366
</>

‎apps/typegpu-docs/src/components/ExampleLayout.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function ExampleLayout() {
2323

2424
return (
2525
<>
26-
<div className='md:hidden flex absolute top-4 left-4 z-50 gap-4 text-sm'>
26+
<div className='absolute top-4 left-4 z-50 flex gap-4 text-sm md:hidden'>
2727
{menuShownMobile
2828
? null
2929
: (
@@ -40,7 +40,7 @@ export function ExampleLayout() {
4040
</Button>
4141
</div>
4242

43-
<div className='box-border flex h-dvh p-4 gap-4 bg-tameplum-50'>
43+
<div className='box-border flex h-dvh gap-4 bg-tameplum-50 p-4'>
4444
{menuShown || menuShownMobile ? <SideMenu /> : null}
4545
<ExamplePage />
4646
</div>
@@ -66,12 +66,12 @@ function SideMenu() {
6666
menuShownMobile
6767
? 'absolute inset-0 z-50 w-full md:static'
6868
: 'hidden md:flex',
69-
'box-border flex flex-col bg-white md:rounded-2xl md:w-75 p-5 gap-5 overflow-auto',
69+
'box-border flex flex-col gap-5 overflow-auto bg-white p-5 md:w-75 md:rounded-2xl',
7070
)}
7171
>
7272
<header className='grid gap-5'>
7373
<div className='grid place-items-center'>
74-
<a href='/TypeGPU' className='block box-border py-4 cursor-pointer'>
74+
<a href='/TypeGPU' className='box-border block cursor-pointer py-4'>
7575
<img
7676
className='w-40'
7777
src='/TypeGPU/typegpu-logo-light.svg'
@@ -80,7 +80,7 @@ function SideMenu() {
8080
</a>
8181
</div>
8282

83-
<hr className='my-0 box-border w-full border-t border-tameplum-100' />
83+
<hr className='my-0 box-border w-full border-tameplum-100 border-t' />
8484

8585
<div className='grid gap-6'>
8686
<h1 className='m-0 font-medium text-xl'>Welcome to examples page</h1>
@@ -90,14 +90,14 @@ function SideMenu() {
9090
</p>
9191
<a
9292
href='/TypeGPU/why-typegpu'
93-
className='underline text-sm bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark bg-clip-text text-transparent'
93+
className='bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark bg-clip-text text-sm text-transparent underline'
9494
>
9595
Learn more about TypeGPU here
9696
</a>
9797
</div>
9898
</header>
9999

100-
<hr className='my-0 box-border w-full border-t border-tameplum-100' />
100+
<hr className='my-0 box-border w-full border-tameplum-100 border-t' />
101101

102102
<ExampleList
103103
excludeTags={[
@@ -106,11 +106,11 @@ function SideMenu() {
106106
].flat()}
107107
/>
108108

109-
<hr className='my-0 box-border w-full border-t border-tameplum-100' />
109+
<hr className='my-0 box-border w-full border-tameplum-100 border-t' />
110110

111111
<label
112112
htmlFor={experimentalExamplesToggleId}
113-
className='flex items-center justify-between gap-3 text-sm cursor-pointer'
113+
className='flex cursor-pointer items-center justify-between gap-3 text-sm'
114114
>
115115
<span>Experimental examples</span>
116116
<Toggle
@@ -129,7 +129,7 @@ function SideMenu() {
129129

130130
<div className='flex justify-between text-tameplum-800 text-xs'>
131131
<div>&copy; {new Date().getFullYear()} Software Mansion S.A.</div>
132-
<div className='flex gap-3 items-center'>
132+
<div className='flex items-center gap-3'>
133133
<a
134134
href='https://discord.gg/8jpfgDqPcM'
135135
target='_blank'

‎apps/typegpu-docs/src/components/ExampleLink.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ export function ExampleLink(props: Props) {
3737
href={`#example=${exampleKey}`}
3838
onClick={handleClick}
3939
className={cs(
40-
'flex justify-between items-center cursor-pointer no-underline',
40+
'flex cursor-pointer items-center justify-between no-underline',
4141
active
42-
? 'bg-clip-text bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark text-transparent'
42+
? 'bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark bg-clip-text text-transparent'
4343
: isExperimental
4444
? 'text-gray-400'
4545
: 'text-black',

‎apps/typegpu-docs/src/components/ExampleList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ExampleLink } from './ExampleLink.tsx';
55
function ExampleList({ excludeTags = [] }: { excludeTags?: string[] }) {
66
return (
77
<>
8-
<nav className='box-border flex flex-col flex-1 gap-6 py-4 overflow-y-auto min-w-64'>
8+
<nav className='box-border flex min-w-64 flex-1 flex-col gap-6 overflow-y-auto py-4'>
99
{
1010
/* <ExampleLink key={PLAYGROUND_KEY} exampleKey={PLAYGROUND_KEY}>
1111
Playground

‎apps/typegpu-docs/src/components/ExampleNotFound.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export function ExampleNotFound() {
1212
});
1313

1414
return (
15-
<div className='flex-1 flex flex-col justify-center items-center'>
16-
<h1 className='text-4xl font-bold'>404 Example Not Found</h1>
15+
<div className='flex flex-1 flex-col items-center justify-center'>
16+
<h1 className='font-bold text-4xl'>404 Example Not Found</h1>
1717
<button
1818
type='button'
1919
className='mt-4 text-lg text-slate-600 underline'

‎apps/typegpu-docs/src/components/ExamplePage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function ExamplePage() {
7878
})();
7979

8080
return (
81-
<main className='flex-1 max-w-full'>
81+
<main className='max-w-full flex-1'>
8282
<Suspense fallback={'Loading...'}>{content}</Suspense>
8383
</main>
8484
);

‎apps/typegpu-docs/src/components/ExampleView.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,10 @@ export function ExampleView({ example }: Props) {
9595
<>
9696
{snackbarText && isGPUSupported ? <Snackbar text={snackbarText} /> : null}
9797

98-
<div className='flex flex-col md:grid gap-4 md:grid-cols-[1fr_18.75rem] h-full'>
98+
<div className='flex h-full flex-col gap-4 md:grid md:grid-cols-[1fr_18.75rem]'>
9999
<div
100100
className={cs(
101-
'flex-1 grid gap-4',
101+
'grid flex-1 gap-4',
102102
codeEditorShowing ? 'md:grid-rows-[2fr_3fr]' : '',
103103
)}
104104
>
@@ -109,13 +109,13 @@ export function ExampleView({ example }: Props) {
109109
scrollbarGutter: 'stable both-edges',
110110
}}
111111
className={cs(
112-
'relative flex justify-evenly items-center flex-wrap h-full box-border flex-col md:flex-row md:gap-4',
112+
'relative box-border flex h-full flex-col flex-wrap items-center justify-evenly md:flex-row md:gap-4',
113113
codeEditorShowing
114114
? 'md:max-h-[calc(40vh-1.25rem)] md:overflow-auto'
115115
: '',
116116
)}
117117
>
118-
<div ref={exampleHtmlRef} className='contents w-full h-full' />
118+
<div ref={exampleHtmlRef} className='contents h-full w-full' />
119119
</div>
120120
)
121121
: <GPUUnsupportedPanel />}
@@ -130,22 +130,22 @@ export function ExampleView({ example }: Props) {
130130
!codeEditorShowing && codeEditorMobileShowing
131131
? 'md:hidden'
132132
: '',
133-
'absolute bg-tameplum-50 z-20 md:relative h-[calc(100%-2rem)] w-[calc(100%-2rem)] md:w-full md:h-full',
133+
'absolute z-20 h-[calc(100%-2rem)] w-[calc(100%-2rem)] bg-tameplum-50 md:relative md:h-full md:w-full',
134134
)}
135135
>
136136
<div className='absolute inset-0 flex flex-col justify-between'>
137137
<div className='h-12 pt-16 md:pt-0'>
138-
<div className='flex overflow-x-auto border-gray-300 h-full'>
138+
<div className='flex h-full overflow-x-auto border-gray-300'>
139139
{editorTabsList.map((fileName) => (
140140
<button
141141
key={fileName}
142142
type='button'
143143
onClick={() => setCurrentFilePath(fileName)}
144144
className={cs(
145-
'px-4 rounded-t-lg rounded-b-none text-nowrap text-sm',
145+
'text-nowrap rounded-t-lg rounded-b-none px-4 text-sm',
146146
currentFilePath === fileName
147147
? 'bg-gradient-to-br from-gradient-purple to-gradient-blue text-white hover:from-gradient-purple-dark hover:to-gradient-blue-dark'
148-
: 'bg-white border-tameplum-100 border-2 hover:bg-tameplum-20',
148+
: 'border-2 border-tameplum-100 bg-white hover:bg-tameplum-20',
149149
)}
150150
>
151151
{fileName}
@@ -179,15 +179,15 @@ export function ExampleView({ example }: Props) {
179179

180180
function GPUUnsupportedPanel() {
181181
return (
182-
<div className='grid gap-6 text-xl leading-tight text-center place-content-center'>
182+
<div className='grid place-content-center gap-6 text-center text-xl leading-tight'>
183183
<div className='text-3xl'>
184184
WebGPU is not enabled/supported in this browser 😔
185185
</div>
186186
<div>Maybe it's hidden under an experimental flag? 🤔</div>
187187

188188
<a
189189
href='/TypeGPU/blog/troubleshooting'
190-
className='text-transparent underline bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text'
190+
className='bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent underline'
191191
>
192192
Read more about the availability
193193
</a>

‎apps/typegpu-docs/src/components/design/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ export const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
1313
return (
1414
<button
1515
className={cs(
16-
'inline-flex justify-center items-center box-border focus:ring-2 focus:ring-gradient-blue rounded-[6.25rem] text-sm px-5 py-2.5',
16+
'box-border inline-flex items-center justify-center rounded-[6.25rem] px-5 py-2.5 text-sm focus:ring-2 focus:ring-gradient-blue',
1717
accent
1818
? 'bg-gradient-to-br from-gradient-purple to-gradient-blue text-white hover:from-gradient-purple-dark hover:to-gradient-blue-dark'
19-
: 'bg-white border-tameplum-100 border-2 hover:bg-tameplum-20',
19+
: 'border-2 border-tameplum-100 bg-white hover:bg-tameplum-20',
2020
)}
2121
type='button'
2222
ref={ref}

‎apps/typegpu-docs/src/components/design/ColorPicker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function ColorPicker({ value, onChange }: Props) {
2727
return (
2828
<input
2929
value={rgbToHex(value)}
30-
className='w-full h-10 p-1 rounded bg-tameplum-50'
30+
className='h-10 w-full rounded bg-tameplum-50 p-1'
3131
type='color'
3232
onChange={(e) => onChange(hexToRgb(e.target.value))}
3333
/>

‎apps/typegpu-docs/src/components/design/DeleteIcon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const DeleteIcon = () => {
1919

2020
return (
2121
<div
22-
className='cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center'
22+
className='flex cursor-pointer select-none items-center justify-center rounded-md p-2 transition-colors duration-200 hover:bg-accent'
2323
onMouseEnter={() => controls.start('animate')}
2424
onMouseLeave={() => controls.start('normal')}
2525
>

0 commit comments

Comments
 (0)