Skip to content

Commit bb38640

Browse files
mauriciabadmauriciabad
authored
Minor UI Changes (#120)
* icon + round + start url * Better external maps * Text border tailwind utility * chore: Auto-fix lint errors * Navbar are buttons now * Try to fix order * chore: Auto-fix lint errors * Fix vscode prettier
1 parent 94140a1 commit bb38640

File tree

10 files changed

+145
-37
lines changed

10 files changed

+145
-37
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{
2-
"files.exclude": {}
2+
"files.exclude": {},
3+
"editor.formatOnSave": true,
4+
"prettier.useEditorConfig": false
35
}

‎prettier.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const config = {
33
trailingComma: 'es5',
44
semi: false,
55
singleQuote: true,
6+
tailwindConfig: './tailwind.config.js',
67
plugins: ['prettier-plugin-tailwindcss'],
78
}
89

‎public/images/brands/google-earth.svg

Lines changed: 64 additions & 0 deletions
Loading

‎public/images/brands/icgc.svg

Lines changed: 9 additions & 0 deletions
Loading

‎public/images/brands/wikiloc.svg

Lines changed: 13 additions & 0 deletions
Loading

‎public/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
],
3636
"theme_color": "#5F797A",
3737
"background_color": "#FFFFFF",
38-
"start_url": "/",
38+
"start_url": "/explore",
3939
"display": "standalone",
4040
"orientation": "portrait"
4141
}

‎src/components/map/custom-layout-controls.tsx

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
'use client'
22

33
import { Button } from '@nextui-org/button'
4-
import { Card, CardFooter } from '@nextui-org/card'
4+
import { Card, CardBody } from '@nextui-org/card'
55
import { Image } from '@nextui-org/image'
66
import { Popover, PopoverContent, PopoverTrigger } from '@nextui-org/popover'
7-
import { IconCircleFilled, IconStack2 } from '@tabler/icons-react'
7+
import { IconStack2 } from '@tabler/icons-react'
88
import { TileLayer } from 'leaflet'
99
import 'leaflet.locatecontrol'
1010
import 'leaflet.locatecontrol/dist/L.Control.Locate.min.css'
@@ -50,6 +50,7 @@ export const CustomLayersControl: FC = () => {
5050
<Popover placement="top-end">
5151
<PopoverTrigger>
5252
<Button
53+
size="lg"
5354
isIconOnly
5455
aria-label="Test"
5556
variant="solid"
@@ -65,24 +66,24 @@ export const CustomLayersControl: FC = () => {
6566
</h3>
6667
<div className="flex max-w-[256px] text-center">
6768
<ExternalMapItem
68-
name="Google"
69-
href="https://maps.google.com"
70-
image="/images/brands/google-g.svg"
69+
name="Earth"
70+
href="https://earth.google.com/web/@41.95456799,3.20833249,206.88319143a,840.3173078d,35y,135h,60t,0r/data=KAI"
71+
image="/images/brands/google-earth.svg"
7172
/>
7273
<ExternalMapItem
7374
name="Navionics"
7475
href="https://webapp.navionics.com/#boating@11&key=kta_G%7B%7BsR"
7576
image="/images/brands/navionics.svg"
7677
/>
7778
<ExternalMapItem
78-
name="Bing"
79-
href="https://www.bing.com/maps?cp=41.846547%7E3.129044&lvl=11.0"
80-
image="/images/brands/bing.svg"
79+
name="Vissir3"
80+
href="http://srv.icgc.cat/vissir3/index.html?HfYJ5y5Ks"
81+
image="/images/brands/icgc.svg"
8182
/>
8283
<ExternalMapItem
83-
name="Apple"
84-
href="https://www.apple.com/maps/"
85-
image="/images/brands/apple.svg"
84+
name="Wikiloc"
85+
href="https://wikiloc.com/wikiloc/map.do?sw=41.92590918891433%2C3.1692981719970708&ne=41.982271629453585%2C3.2681751251220708&page=1"
86+
image="/images/brands/wikiloc.svg"
8687
/>
8788
</div>
8889
</div>
@@ -147,7 +148,6 @@ const LayerButton: FC<{
147148
key={layer.id}
148149
isPressable
149150
onPress={onPress}
150-
isFooterBlurred
151151
className={cn('max-w-[80px]', {
152152
'ring-2 ring-brand-600 ring-offset-1': active,
153153
})}
@@ -159,21 +159,11 @@ const LayerButton: FC<{
159159
src={layer.sampleImage}
160160
radius="none"
161161
/>
162-
<CardFooter className="absolute inset-x-0 bottom-0 z-10 flex w-auto justify-center gap-1 overflow-hidden border-t border-white/30 bg-white/25 p-1 text-black/80">
163-
{active && <IconCircleFilled size={8} className="text-black/40" />}
164-
<span className="font-title font-bold leading-none">
162+
<CardBody className="absolute inset-0 top-auto z-10 p-1">
163+
<span className="text-center font-title text-xs font-bold leading-none text-black opacity-70 text-border-white">
165164
{layer.attribution.name}
166165
</span>
167-
{active && <IconCircleFilled size={8} className="text-black/40" />}
168-
{/* <LinkIconButton
169-
href={layer.attribution.url}
170-
label="Link to attribution"
171-
className="h-4 w-4 min-w-0 text-black/40"
172-
whitespace-normalal
173-
>
174-
<IconInfoCircle size={16} />
175-
</LinkIconButton> */}
176-
</CardFooter>
166+
</CardBody>
177167
</Card>
178168
)
179169
}
@@ -190,8 +180,10 @@ const ExternalMapItem: FC<{
190180
isExternal
191181
variant="light"
192182
>
193-
<Image src={image} className="h-6" />
194-
<span className="whitespace-normal text-xs">{name}</span>
183+
<Image src={image} className="h-6" radius="none" />
184+
<span className="whitespace-normal text-xs font-medium text-stone-800">
185+
{name}
186+
</span>
195187
</LinkButton>
196188
)
197189
}

‎src/components/map/custom-location-control.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export const CustomLocationControl: FC = () => {
4444
onPress={() => {
4545
elementWithClickEvent.click()
4646
}}
47+
size="lg"
4748
isIconOnly
4849
aria-label="Test"
4950
variant="solid"

‎src/components/navbar/bottom-navbar-item.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client'
22

33
import { usePathname } from 'next-intl/client'
4-
import Link from 'next-intl/link'
54
import { FC, ReactNode } from 'react'
5+
import { LinkButton } from '../link-button'
66

77
export const BottomNavbarItem: FC<{
88
url: string
@@ -12,15 +12,20 @@ export const BottomNavbarItem: FC<{
1212
}> = ({ url, icon, iconActive, label }) => {
1313
const pathname = usePathname()
1414

15+
const isActive = pathname.startsWith(url)
16+
1517
return (
1618
<li>
17-
<Link
19+
<LinkButton
1820
href={url}
1921
className="flex h-full items-center justify-center"
2022
aria-label={label}
23+
variant="light"
24+
radius="none"
25+
disabled={isActive}
2126
>
22-
{!!iconActive && pathname.startsWith(url) ? iconActive : icon}
23-
</Link>
27+
{!!iconActive && isActive ? iconActive : icon}
28+
</LinkButton>
2429
</li>
2530
)
2631
}

‎tailwind.config.ts renamed to ‎tailwind.config.js

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import type { Config } from 'tailwindcss'
1+
// @ts-check
2+
23
import { nextui } from '@nextui-org/react'
34
import defaultTheme from 'tailwindcss/defaultTheme'
45
import typography from '@tailwindcss/typography'
6+
import plugin from 'tailwindcss/plugin'
57

6-
const config: Config = {
8+
/** @type {import('tailwindcss').Config}*/
9+
const config = {
710
content: [
811
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
912
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -19,7 +22,10 @@ const config: Config = {
1922
},
2023
minHeight: {
2124
...defaultTheme.minHeight,
22-
screen: ['100vh', '100dvh'] as unknown as string,
25+
26+
screen: /** @type {string} */ (
27+
/** @type {unknown} */ (['100vh', '100dvh'])
28+
),
2329
},
2430
colors: {
2531
brand: {
@@ -65,7 +71,22 @@ const config: Config = {
6571
},
6672
},
6773
darkMode: 'class',
68-
plugins: [nextui(), typography],
74+
plugins: [
75+
nextui(),
76+
typography,
77+
plugin(function ({ addUtilities }) {
78+
addUtilities({
79+
'.text-border-white': {
80+
'text-shadow': `
81+
1px 1px 0 white,
82+
-1px -1px 0 white,
83+
1px -1px 0 white,
84+
-1px 1px 0 white;
85+
`,
86+
},
87+
})
88+
}),
89+
],
6990
}
7091

7192
export default config

0 commit comments

Comments
 (0)