Skip to content

Commit 1b965f5

Browse files
JonnxJonnx
committed
feat(mobile): handling lots of responsive issues
1 parent 6954862 commit 1b965f5

8 files changed

Lines changed: 64 additions & 24 deletions

File tree

‎public/css/app.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1167,6 +1167,9 @@ select {
11671167
.-mr-12 {
11681168
margin-right: -3rem;
11691169
}
1170+
.mb-9 {
1171+
margin-bottom: 2.25rem;
1172+
}
11701173
.block {
11711174
display: block;
11721175
}
@@ -1342,6 +1345,10 @@ select {
13421345
padding-left: 0.5rem;
13431346
padding-right: 0.5rem;
13441347
}
1348+
.py-10 {
1349+
padding-top: 2.5rem;
1350+
padding-bottom: 2.5rem;
1351+
}
13451352
.px-4 {
13461353
padding-left: 1rem;
13471354
padding-right: 1rem;
@@ -1382,6 +1389,18 @@ select {
13821389
.pb-3 {
13831390
padding-bottom: 0.75rem;
13841391
}
1392+
.pt-8 {
1393+
padding-top: 2rem;
1394+
}
1395+
.pt-6 {
1396+
padding-top: 1.5rem;
1397+
}
1398+
.pb-4 {
1399+
padding-bottom: 1rem;
1400+
}
1401+
.pt-10 {
1402+
padding-top: 2.5rem;
1403+
}
13851404
.text-center {
13861405
text-align: center;
13871406
}
@@ -1625,10 +1644,23 @@ select {
16251644

16261645
@media (min-width: 768px) {
16271646

1647+
.md\:col-span-9 {
1648+
grid-column: span 9 / span 9;
1649+
}
1650+
1651+
.md\:mx-0 {
1652+
margin-left: 0px;
1653+
margin-right: 0px;
1654+
}
1655+
16281656
.md\:mb-0 {
16291657
margin-bottom: 0px;
16301658
}
16311659

1660+
.md\:block {
1661+
display: block;
1662+
}
1663+
16321664
.md\:inline-block {
16331665
display: inline-block;
16341666
}
@@ -1644,6 +1676,14 @@ select {
16441676
.md\:pb-10 {
16451677
padding-bottom: 2.5rem;
16461678
}
1679+
1680+
.md\:text-left {
1681+
text-align: left;
1682+
}
1683+
1684+
.md\:text-center {
1685+
text-align: center;
1686+
}
16471687
}
16481688

16491689
@media (min-width: 1024px) {

‎resources/views/components/docs-layout.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<div class="md:grid grid-cols-5 gap-8">
66
{{-- DOCS NAVIGATION --}}
7-
<div>
7+
<div class="hidden md:block">
88
<div class="mb-6">
99
<a href="/documentation" class="block mb-1">Getting Started</a>
1010
<a href="/documentation/versions" class="block mb-1">API Versions</a>

‎resources/views/components/marker-creator.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
.join('&');
1212
}
1313
}" x-init="$nextTick(() => { updateMarkerUrl() })">
14-
<div class="grid grid-cols-10">
14+
<div class="md:grid grid-cols-10">
1515
<div class="col-span-1">
16-
<img x-bind:src="marker" />
16+
<img x-bind:src="marker" class="mx-auto md:mx-0" />
1717
</div>
1818
<div class="col-span-9">
1919
<div class="mt-9 p-2 bg-slate-300 text-slate-900 font-mono rounded"

‎resources/views/docs/font-awesome/v4/index.blade.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@section('content')
44
<x-docs-layout>
5-
<div class="grid grid-cols-3 gap-8">
5+
<div class="md:grid grid-cols-3 gap-8">
66
<div class="col-span-3">
77
<x-docs-box>
88
<x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
@@ -19,7 +19,7 @@
1919
</x-docs-box>
2020
</div>
2121
{{-- PINS --}}
22-
<div class="prose prose-invert text-center">
22+
<div class="prose prose-invert text-center pt-10">
2323
<div class="-mb-4">
2424
<img src="/api/v1/font-awesome/v4/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 -mx-1" />
2525
<img src="/api/v1/font-awesome/v4/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 -mx-1" />
@@ -36,7 +36,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
3636
</a>
3737
</div>
3838
{{-- ICONS --}}
39-
<div class="prose prose-invert text-center">
39+
<div class="prose prose-invert text-center pt-10">
4040
<div class="-mb-4">
4141
<img src="/api/v1/font-awesome/v4/icon?icon=fa-user&color=992DE5&size=50"
4242
class="inline h-12 m-0 -mx-1" />
@@ -55,7 +55,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
5555
</a>
5656
</div>
5757
{{-- ICON STACKS --}}
58-
<div class="prose prose-invert text-center">
58+
<div class="prose prose-invert text-center pt-10">
5959
<div class="-mb-4">
6060
<img src="/api/v1/font-awesome/v4/icon-stack?size=64&icon=fa-binoculars&color=992DE5&on=fa-circle-o&oncolor=992DE5&iconsize=14"
6161
class="inline h-12 m-0 mx-1" />

‎resources/views/docs/font-awesome/v5/index.blade.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
@section('content')
44
<x-docs-layout>
5-
<div class="grid grid-cols-3 gap-8">
5+
<div class="md:grid grid-cols-3 gap-8">
66
<div class="col-span-3">
77
<x-docs-box>
88
<x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
@@ -19,7 +19,7 @@
1919
</x-docs-box>
2020
</div>
2121
{{-- PINS --}}
22-
<div class="prose prose-invert text-center">
22+
<div class="prose prose-invert text-center pt-10">
2323
<div class="-mb-4">
2424
<img src="/api/v2/font-awesome/v5/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 mx-1" />
2525
<img src="/api/v2/font-awesome/v5/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
@@ -36,7 +36,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
3636
</a>
3737
</div>
3838
{{-- ICONS --}}
39-
<div class="prose prose-invert text-center">
39+
<div class="prose prose-invert text-center pt-10">
4040
<div class="-mb-4">
4141
<img src="/api/v2/font-awesome/v5/icon?icon=fa-users&color=992DE5&size=50"
4242
class="inline h-12 m-0 mx-1" />
@@ -54,7 +54,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
5454
</a>
5555
</div>
5656
{{-- ICON STACKS --}}
57-
<div class="prose prose-invert text-center">
57+
<div class="prose prose-invert text-center pt-10">
5858
<div class="-mb-4">
5959
<img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-map-marker-alt&color=171719&on=fa-map-solid&oncolor=992DE5&iconsize=14&hoffset=21&voffset=8"
6060
class="inline h-12 m-0 mx-1" />

‎resources/views/docs/integrations/index.blade.php‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
@section('content')
44
<x-docs-layout>
5-
<div class="grid grid-cols-3 gap-8">
6-
<div class="col-span-3">
5+
<div class="md:grid grid-cols-3 gap-8">
6+
<div class="col-span-3 mb-8 md:mb-0">
77
<x-docs-box>
88
<x-icon-spectrum icon="fa-cog" class="opacity-40" iconClass="-mr-12 w-[49px]" />
99

@@ -16,32 +16,32 @@
1616
</x-docs-box>
1717
</div>
1818

19-
<div class="text-center">
19+
<div class="text-center mb-8">
2020
<x-docs-box>
2121
<img src="/api/v2/font-awesome/v5/icon-stack?icon=fa-microsoft&size=100&iconsize=50&color=594578&on=fa-square-solid&oncolor=DDD"
22-
class="mx-auto h-[75px] w-[75px]">
22+
class="mx-auto h-[75px]">
2323
<h3>Bing Maps</h3>
2424
<a href="/documentation/integrations/bing-maps"
2525
class="no-underline -mb-4 mt-4 block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
2626
Read Integration Guide
2727
</a>
2828
</x-docs-box>
2929
</div>
30-
<div class="text-center">
30+
<div class="text-center mb-8">
3131
<x-docs-box>
3232
<img src="/api/v2/font-awesome/v5/icon-stack?icon=fa-google&size=100&iconsize=50&color=594578&on=fa-square-solid&oncolor=DDD"
33-
class="mx-auto h-[75px] w-[75px]">
33+
class="mx-auto h-[75px]">
3434
<h3>Google Maps</h3>
3535
<a href="/documentation/integrations/google-maps"
3636
class="no-underline -mb-4 mt-4 block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
3737
Read Integration Guide
3838
</a>
3939
</x-docs-box>
4040
</div>
41-
<div class="text-center">
41+
<div class="text-center mb-8">
4242
<x-docs-box>
4343
<img src="/api/v2/font-awesome/v5/icon-stack?icon=fa-map-marker-alt&size=100&iconsize=50&color=594578&on=fa-square-solid&oncolor=DDD"
44-
class="mx-auto h-[75px] w-[75px]">
44+
class="mx-auto h-[75px]">
4545
<h3>Mapbox</h3>
4646
<a href="/documentation/integrations/mapbox"
4747
class="no-underline -mb-4 mt-4 block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">

‎resources/views/layouts/app-nav.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-
5858

5959
<!-- Mobile menu, show/hide based on menu state. -->
6060
<div x-show="mobileMenuOpen" x-cloak id="mobile-menu" class="sm:hidden">
61-
<div class="px-2 pt-2 pb-3 space-y-1">
61+
<div class="px-2 pt-2 pb-3 space-y-1 text-center">
6262
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
6363
<a href="/"
6464
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"

‎resources/views/welcome.blade.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</div>
1818
</div>
1919
{{-- PINS --}}
20-
<div class="prose prose-invert text-center">
20+
<div class="prose prose-invert text-center pt-10 pb-4">
2121
<div class="-mb-4">
2222
<img src="/api/v2/font-awesome/v5/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 mx-1" />
2323
<img src="/api/v2/font-awesome/v5/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
@@ -34,7 +34,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
3434
</a>
3535
</div>
3636
{{-- ICONS --}}
37-
<div class="prose prose-invert text-center">
37+
<div class="prose prose-invert text-center pt-10 pb-4">
3838
<div class="-mb-4">
3939
<img src="/api/v2/font-awesome/v5/icon?icon=fa-users&color=992DE5&size=50"
4040
class="inline h-12 m-0 mx-1" />
@@ -52,7 +52,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
5252
</a>
5353
</div>
5454
{{-- ICON STACKS --}}
55-
<div class="prose prose-invert text-center">
55+
<div class="prose prose-invert text-center pt-10 pb-4">
5656
<div class="-mb-4">
5757
<img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-map-marker-alt&color=171719&on=fa-map-solid&oncolor=992DE5&iconsize=14&hoffset=21&voffset=8"
5858
class="inline h-12 m-0 mx-1" />
@@ -71,7 +71,7 @@ class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent
7171
</a>
7272
</div>
7373
<div class="col-span-2">
74-
<div class="bg-slate-800 p-8 rounded-lg mb-8 md:mb-0">
74+
<div class="bg-slate-800 p-8 rounded-lg mt-4 mb-8 md:mb-0">
7575
<div class="changelog changelog-slim">
7676
<x-markdown>{{ $versionEntry }}</x-markdown>
7777
</div>

0 commit comments

Comments
 (0)