Skip to content

Commit 9293e34

Browse files
JRoyJRoy
committed
optimize site for mobile
1 parent 4c1ca16 commit 9293e34

6 files changed

Lines changed: 195 additions & 80 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,7 @@ yarn-error.log*
2626
# typescript
2727
*.tsbuildinfo
2828
next-env.d.ts
29-
.vercel
29+
.vercel
30+
31+
# clouflare
32+
.wrangler

‎app/page.tsx‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,16 @@ export default function Home() {
2323
</section>
2424

2525
<Container size='xl'>
26-
<Stack gap={40} py={80}>
27-
<div className='grid md:grid-cols-[300px_1fr] gap-16 items-center'>
26+
<Stack gap={40} className='py-10 md:py-20'>
27+
<div className='grid md:grid-cols-[300px_1fr] gap-8 md:gap-16 items-center'>
2828
<div className='flex justify-center'>
29-
<IconTools size={180} className='text-gray-600' stroke={1} />
29+
<IconTools
30+
size={120}
31+
className='text-gray-600 md:w-[180px] md:h-[180px]'
32+
stroke={1}
33+
/>
3034
</div>
31-
<div>
35+
<div className='text-center md:text-left'>
3236
<Title order={2} size='h2' mb='md'>
3337
All you can eat, and then some.
3438
</Title>
@@ -56,17 +60,22 @@ export default function Home() {
5660
variant='filled'
5761
color='red'
5862
size='md'
63+
className='w-full md:w-auto'
5964
>
6065
Visit the wiki
6166
</Button>
6267
</div>
6368
</div>
6469

65-
<div className='grid md:grid-cols-[300px_1fr] gap-16 items-center'>
70+
<div className='grid md:grid-cols-[300px_1fr] gap-8 md:gap-16 items-center'>
6671
<div className='flex justify-center'>
67-
<IconUsers size={180} className='text-gray-600' stroke={1} />
72+
<IconUsers
73+
size={120}
74+
className='text-gray-600 md:w-[180px] md:h-[180px]'
75+
stroke={1}
76+
/>
6877
</div>
69-
<div>
78+
<div className='text-center md:text-left'>
7079
<Title order={2} size='h2' mb='md'>
7180
Free, for everyone, forever.
7281
</Title>
@@ -111,17 +120,22 @@ export default function Home() {
111120
variant='filled'
112121
color='red'
113122
size='md'
123+
className='w-full md:w-auto'
114124
>
115125
Join the community
116126
</Button>
117127
</div>
118128
</div>
119129

120-
<div className='grid md:grid-cols-[300px_1fr] gap-16 items-center'>
130+
<div className='grid md:grid-cols-[300px_1fr] gap-8 md:gap-16 items-center'>
121131
<div className='flex justify-center'>
122-
<IconCheck size={180} className='text-gray-600' stroke={1} />
132+
<IconCheck
133+
size={120}
134+
className='text-gray-600 md:w-[180px] md:h-[180px]'
135+
stroke={1}
136+
/>
123137
</div>
124-
<div>
138+
<div className='text-center md:text-left'>
125139
<Title order={2} size='h2' mb='md'>
126140
Compatible with just about <em>everything</em>.
127141
</Title>
@@ -145,6 +159,7 @@ export default function Home() {
145159
variant='filled'
146160
color='red'
147161
size='md'
162+
className='w-full md:w-auto'
148163
>
149164
Get started with EssentialsX
150165
</Button>

‎components/download-card.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ export default function DownloadCard({
2323
w-full
2424
shadow-lg
2525
rounded-lg
26-
p-4
26+
p-4 sm:p-4
2727
flex
28-
items-center
29-
justify-between
28+
flex-col sm:flex-row
29+
sm:items-center
30+
gap-4 sm:gap-0
31+
sm:justify-between
3032
transition-all
3133
duration-300
3234
ease-in-out
@@ -35,9 +37,9 @@ export default function DownloadCard({
3537
${isSelecting ? 'scale-[1.02]' : ''}
3638
`}
3739
>
38-
<div className='flex flex-col'>
39-
<div className='flex items-center gap-2'>
40-
<Group>
40+
<div className='flex flex-col flex-1'>
41+
<div className='flex items-center gap-2 flex-wrap'>
42+
<Group gap='sm'>
4143
<Checkbox
4244
me={-8}
4345
checked={isSelecting}
@@ -113,17 +115,12 @@ export default function DownloadCard({
113115
}
114116
</div>
115117
{module.discord === true && (
116-
<div className='flex items-center gap-2 mt-1'>
118+
<div className='flex items-center gap-2 mt-2'>
117119
<Badge
118120
color='blue'
119121
variant='light'
120122
size='xs'
121-
className={`
122-
transition-all
123-
duration-300
124-
ease-in-out
125-
${isSelecting ? 'scale-110' : ''}
126-
`}
123+
className={`transition-all duration-300 ease-in-out ${isSelecting ? 'scale-110' : ''}`}
127124
>
128125
REQUIRES DISCORD ADDON
129126
</Badge>
@@ -133,7 +130,8 @@ export default function DownloadCard({
133130
className={`
134131
text-sm
135132
not-dark:text-gray-600
136-
mt-2
133+
mt-3
134+
leading-relaxed
137135
transition-colors
138136
duration-300
139137
ease-in-out
@@ -143,7 +141,7 @@ export default function DownloadCard({
143141
</p>
144142
<p
145143
className={`
146-
mt-1
144+
mt-2
147145
text-xs
148146
ease-in-out
149147
duration-300
@@ -163,11 +161,13 @@ export default function DownloadCard({
163161
transition-all
164162
duration-300
165163
ease-in-out
164+
w-full sm:w-auto
166165
${isSelecting ? 'scale-110 shadow-lg' : ''}
167166
`}
168167
onClick={() => download()}
169168
>
170-
<IconDownload />
169+
<IconDownload className='sm:mr-0 mr-2' />
170+
<span className='sm:hidden'>Download</span>
171171
</Button>
172172
</div>
173173
);

‎components/download-selector.tsx‎

Lines changed: 88 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -166,24 +166,30 @@ export default function DownloadSelector() {
166166
.
167167
</Text>
168168

169-
<div className='flex justify-between items-center mb-6 mt-4'>
170-
<Title order={2}>Core</Title>
171-
172-
<div className='space-x-2'>
173-
{/*<Button onClick={selectAllModules}>Select All</Button>*/}
174-
<Button
175-
onClick={deselectAllModules}
176-
disabled={selectedModules.length <= 1}
177-
>
178-
Deselect All
179-
</Button>
180-
<Button
181-
onClick={downloadSelected}
182-
disabled={selectedModules.length <= 1 || isDownloading}
183-
loading={isDownloading}
184-
>
185-
Download Selected ({selectedModules.length})
186-
</Button>
169+
<div className='mb-6 mt-4'>
170+
<div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 sm:gap-0'>
171+
<Title order={2}>Core</Title>
172+
173+
<div className='flex flex-col sm:flex-row gap-2 sm:space-x-2 sm:gap-0 w-full sm:w-auto'>
174+
{/*<Button onClick={selectAllModules}>Select All</Button>*/}
175+
<Button
176+
onClick={deselectAllModules}
177+
disabled={selectedModules.length <= 1}
178+
fullWidth
179+
className='sm:w-auto'
180+
>
181+
Deselect All
182+
</Button>
183+
<Button
184+
onClick={downloadSelected}
185+
disabled={selectedModules.length <= 1 || isDownloading}
186+
loading={isDownloading}
187+
fullWidth
188+
className='sm:w-auto'
189+
>
190+
Download Selected ({selectedModules.length})
191+
</Button>
192+
</div>
187193
</div>
188194
</div>
189195

@@ -198,38 +204,74 @@ export default function DownloadSelector() {
198204
<Title order={2} mt='xl'>
199205
Recommended add-ons
200206
</Title>
201-
<Group grow style={{ alignItems: 'stretch' }}>
202-
{modules
203-
.filter(m => m.recommended)
204-
.map(module => (
205-
<DownloadCard
206-
key={module.id}
207-
module={module}
208-
download={() => downloadSingle(module.id as ModuleType)}
209-
toggle={() => toggleModule(module.id)}
210-
isSelecting={selectedModules.includes(module.id)}
211-
version={version}
212-
/>
213-
))}
214-
</Group>
207+
<div className='block sm:hidden'>
208+
<Stack>
209+
{modules
210+
.filter(m => m.recommended)
211+
.map(module => (
212+
<DownloadCard
213+
key={module.id}
214+
module={module}
215+
download={() => downloadSingle(module.id as ModuleType)}
216+
toggle={() => toggleModule(module.id)}
217+
isSelecting={selectedModules.includes(module.id)}
218+
version={version}
219+
/>
220+
))}
221+
</Stack>
222+
</div>
223+
<div className='hidden sm:block'>
224+
<Group grow style={{ alignItems: 'stretch' }}>
225+
{modules
226+
.filter(m => m.recommended)
227+
.map(module => (
228+
<DownloadCard
229+
key={module.id}
230+
module={module}
231+
download={() => downloadSingle(module.id as ModuleType)}
232+
toggle={() => toggleModule(module.id)}
233+
isSelecting={selectedModules.includes(module.id)}
234+
version={version}
235+
/>
236+
))}
237+
</Group>
238+
</div>
215239

216240
<Title order={2} mt='xl'>
217241
Discord add-ons
218242
</Title>
219-
<Group grow style={{ alignItems: 'stretch' }}>
220-
{modules
221-
.filter(m => m.id.includes('discord'))
222-
.map(module => (
223-
<DownloadCard
224-
key={module.id}
225-
module={module}
226-
download={() => downloadSingle(module.id as ModuleType)}
227-
toggle={() => toggleModule(module.id)}
228-
isSelecting={selectedModules.includes(module.id)}
229-
version={version}
230-
/>
231-
))}
232-
</Group>
243+
<div className='block sm:hidden'>
244+
<Stack>
245+
{modules
246+
.filter(m => m.id.includes('discord'))
247+
.map(module => (
248+
<DownloadCard
249+
key={module.id}
250+
module={module}
251+
download={() => downloadSingle(module.id as ModuleType)}
252+
toggle={() => toggleModule(module.id)}
253+
isSelecting={selectedModules.includes(module.id)}
254+
version={version}
255+
/>
256+
))}
257+
</Stack>
258+
</div>
259+
<div className='hidden sm:block'>
260+
<Group grow style={{ alignItems: 'stretch' }}>
261+
{modules
262+
.filter(m => m.id.includes('discord'))
263+
.map(module => (
264+
<DownloadCard
265+
key={module.id}
266+
module={module}
267+
download={() => downloadSingle(module.id as ModuleType)}
268+
toggle={() => toggleModule(module.id)}
269+
isSelecting={selectedModules.includes(module.id)}
270+
version={version}
271+
/>
272+
))}
273+
</Group>
274+
</div>
233275

234276
<Title order={2} mt='xl'>
235277
More add-ons

‎components/footer.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function Footer() {
2020
return (
2121
<footer className='mt-2'>
2222
<Container size='xl' py='md' px='xl'>
23-
<Group mb='md' justify='center'>
23+
<div className='flex flex-wrap justify-center gap-2 sm:gap-4 mb-4'>
2424
<StatBadge
2525
href='https://www.spigotmc.org/resources/essentialsx.9089'
2626
label='Downloads'
@@ -51,9 +51,9 @@ export default function Footer() {
5151
value={`${github.stars} stars`}
5252
valueColor='#000'
5353
/>
54-
</Group>
55-
<Group justify='space-between' align='center'>
56-
<Text size='sm' c='dimmed'>
54+
</div>
55+
<div className='flex flex-col items-center gap-4 sm:flex-row sm:justify-between sm:items-center'>
56+
<Text size='sm' c='dimmed' className='text-center sm:text-left'>
5757
Website copyright © 2019-{year} EssentialsX Team, 2015-{year}{' '}
5858
EssentialsX wiki contributors except where otherwise noted.
5959
</Text>
@@ -63,12 +63,13 @@ export default function Footer() {
6363
variant='default'
6464
size='lg'
6565
aria-label='Toggle color scheme'
66+
className='flex-shrink-0'
6667
>
6768
{colorScheme === 'dark' ?
6869
<IconSun suppressHydrationWarning size='1.1rem' />
6970
: <IconMoon suppressHydrationWarning size='1.1rem' />}
7071
</ActionIcon>
71-
</Group>
72+
</div>
7273
</Container>
7374
</footer>
7475
);

0 commit comments

Comments
 (0)