Skip to content

Commit 97b0813

Browse files
DivyanshuVortexDivyanshuVortex
committed
ui fix
1 parent dcf4ea4 commit 97b0813

File tree

2 files changed

+79
-37
lines changed

2 files changed

+79
-37
lines changed

‎pages/index.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -984,7 +984,7 @@ for Accounting integrations'
984984
<br />
985985
<a
986986
href='mailto:[email protected]'
987-
className='border-b border-black dark:border-white'
987+
className='border-b border-black dark:border-white inline-block transition-transform duration-300 hover:scale-105 hover:-translate-y-0.5'
988988
>
989989
Email us
990990
</a>{' '}

‎pages/tools/index.page.tsx‎

Lines changed: 78 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -122,16 +122,21 @@ export default function ToolingPage({
122122
} = useToolsTransform(toolingData);
123123

124124
return (
125-
<SectionContext.Provider value='tools'>
125+
<SectionContext.Provider value={'tools'}>
126126
<Head>
127127
<title>JSON Schema - Tools</title>
128128
</Head>
129-
<div className='mx-auto w-full max-w-[1400px] min-h-screen flex flex-col items-center'>
129+
130+
<div
131+
className={
132+
'mx-auto w-full max-w-[1400px] min-h-screen flex flex-col items-center'
133+
}
134+
>
130135
<div
131-
className='bg-primary w-full h-12 mt-[4.5rem] relative lg:hidden px-8 flex justify-between items-center'
132-
onClick={() => {
133-
setIsSidebarOpen((prev) => !prev);
134-
}}
136+
className={
137+
'bg-primary w-full h-12 mt-[4.5rem] relative lg:hidden px-8 flex justify-between items-center'
138+
}
139+
onClick={() => setIsSidebarOpen((prev) => !prev)}
135140
>
136141
<h3 className='text-white'>{numberOfTools} Tools</h3>
137142

@@ -140,29 +145,36 @@ export default function ToolingPage({
140145
transform: `${isSidebarOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
141146
transition: 'transform 0.2s linear',
142147
}}
143-
xmlns='http://www.w3.org/2000/svg'
148+
xmlns={'http://www.w3.org/2000/svg'}
144149
height='24'
145150
viewBox='0 0 256 512'
146151
>
147152
<path
148-
d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
149-
fill='#ffffff'
153+
d={
154+
'M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
155+
}
156+
fill={'#ffffff'}
150157
/>
151158
</svg>
152159
</div>
153160

154-
<div className='grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12 min-h-screen'>
161+
{/* FIX 1: mx → px, and overflow-x-hidden */}
162+
<div
163+
className={
164+
'w-full grid grid-cols-1 lg:grid-cols-4 px-4 md:px-12 min-h-screen overflow-x-hidden'
165+
}
166+
>
155167
<div
156168
className={`
157-
lg:fixed absolute top-0 lg:top-0 left-0 lg:left-auto
158-
mt-0 lg:mt-20
159-
w-screen lg:w-auto
160-
bg-white dark:bg-slate-800 lg:bg-transparent
161-
transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out
162-
z-5
163-
${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'}
164-
${isMobile && isSidebarOpen ? 'overflow-hidden' : 'overflow-y-auto lg:overflow-y-hidden'}
165-
`}
169+
lg:fixed absolute top-0 lg:top-0 left-0 lg:left-auto
170+
mt-0 lg:mt-20
171+
w-full max-w-full lg:w-auto overflow-x-hidden
172+
bg-white dark:bg-slate-800 lg:bg-transparent
173+
transition-transform lg:transform-none duration-300 lg:duration-0 ease-in-out
174+
z-5
175+
${isSidebarOpen ? '-translate-x-0' : '-translate-x-full'}
176+
${isMobile && isSidebarOpen ? 'overflow-hidden' : 'overflow-y-auto lg:overflow-y-hidden'}
177+
`}
166178
style={{
167179
height: isMobile
168180
? isSidebarOpen
@@ -176,16 +188,25 @@ export default function ToolingPage({
176188
top: '4.5rem',
177189
}}
178190
>
179-
<div className='h-full flex flex-col'>
180-
<div className='flex-1 overflow-y-auto scrollbar-hidden min-h-0 px-2 lg:px-0 pb-2'>
181-
<div className='hidden lg:block pt-8'>
182-
<h1 className='text-h1mobile md:text-h1 font-bold lg:ml-4'>
191+
<div className={'h-full flex flex-col'}>
192+
<div
193+
className={
194+
'flex-1 overflow-y-auto scrollbar-hidden min-h-0 px-2 lg:px-0 pb-2'
195+
}
196+
>
197+
<div className={'hidden lg:block pt-8'}>
198+
<h1 className={'text-h1mobile md:text-h1 font-bold lg:ml-4'}>
183199
{numberOfTools}
184200
</h1>
185-
<div className='text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6 mb-4'>
201+
<div
202+
className={
203+
'text-xl text-slate-900 dark:text-slate-300 font-bold lg:ml-6 mb-4'
204+
}
205+
>
186206
Tools
187207
</div>
188208
</div>
209+
189210
<Sidebar
190211
filterCriteria={filterCriteria}
191212
transform={transform}
@@ -198,61 +219,82 @@ export default function ToolingPage({
198219
</div>
199220

200221
<main
201-
className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 lg:!ml-[20px] ${isSidebarOpen ? 'hidden lg:block' : ''}`}
222+
className={`md:col-span-3 lg:mt-20 lg:w-full mx-4 md:mx-0 lg:!ml-[20px] ${
223+
isSidebarOpen ? 'hidden lg:block' : ''
224+
}`}
202225
>
203226
<Headline1>JSON Schema Tooling</Headline1>
204-
<p className='text-slate-600 block leading-7 pb-1 dark:text-slate-300'>
227+
<p
228+
className={
229+
'text-slate-600 block leading-7 pb-1 dark:text-slate-300'
230+
}
231+
>
205232
Toolings below are written in different languages, and support
206233
part, or all, of at least one recent version of the specification.
207234
</p>
208-
<p className='text-slate-600 block leading-7 pb-4 dark:text-slate-300'>
235+
<p
236+
className={
237+
'text-slate-600 block leading-7 pb-4 dark:text-slate-300'
238+
}
239+
>
209240
Listing does not signify a recommendation or endorsement of any
210241
kind.
211242
</p>
212-
<div className='flex flex-row items-center gap-2 w-full'>
213-
<div className='flex items-center justify-center gap-2 w-1/2'>
243+
244+
<div className={'flex flex-row items-center gap-2 w-full'}>
245+
<div className={'flex items-center justify-center gap-2 w-1/2'}>
214246
<Link
215-
className='flex-none max-w-full'
247+
className={'flex-none max-w-full'}
216248
href='https://github.com/json-schema-org/website/issues/new?assignees=&labels=Status%3A+Triage&template=adding-your-tooling.yml'
217249
target='_blank'
218250
rel='noreferrer'
219251
>
220252
<Image
221253
src='/img/tools/adding_your_tool.png'
222-
className='rounded-sm'
254+
className={'rounded-sm'}
223255
height={68}
224256
width={190}
225257
alt='adding your tool'
226258
/>
227259
</Link>
228-
<p className='hidden lg:block text-slate-600 dark:text-slate-300 px-4'>
260+
<p
261+
className={
262+
'hidden lg:block text-slate-600 dark:text-slate-300 px-4'
263+
}
264+
>
229265
Raise an issue to get your tool added or updated in the
230266
tooling table.
231267
</p>
232268
</div>
233269

234-
<div className='flex items-center justify-center gap-2 w-1/2'>
270+
<div className={'flex items-center justify-center gap-2 w-1/2'}>
235271
<Link
236-
className='flex-none max-w-full'
272+
className={'flex-none max-w-full'}
237273
href='https://bowtie.report'
238274
target='_blank'
239275
rel='noreferrer'
240276
>
241277
<Image
242278
src='/img/tools/try_bowtie.png'
243-
className='rounded-sm'
279+
className={'rounded-sm'}
244280
height={68}
245281
width={190}
246282
alt='try bowtie'
247283
/>
248284
</Link>
249-
<p className='hidden lg:block text-slate-600 dark:text-slate-300 px-4'>
285+
<p
286+
className={
287+
'hidden lg:block text-slate-600 dark:text-slate-300 px-4'
288+
}
289+
>
250290
Bowtie is a meta-validator for JSON Schema implementations and
251291
it provides compliance reports.
252292
</p>
253293
</div>
254294
</div>
295+
255296
<GroupByMenu transform={transform} setTransform={setTransform} />
297+
256298
<ToolingTable
257299
toolsByGroup={toolsByGroup}
258300
transform={transform}

0 commit comments

Comments
 (0)