Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-10 07:25:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve link style

Browse Source
This commit is contained in:
Sonny
2024-11-03 16:06:36 +01:00
committed by Sonny
parent bcad333783
commit 01a21ddef8
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
inertia/components/dashboard/link/link.module.css
View File

@@ -37,8 +37,14 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: 0.8em; font-size: 0.8em;
transition: opacity 0.3s;
}
.linkWrapper:hover .linkUrlPathname {
opacity: 1;
} }
.linkUrlPathname { .linkUrlPathname {
opacity: 0; opacity: 0;
transition: opacity 0.3s;
} }

20
inertia/components/dashboard/link/link_item.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Text } from '@mantine/core'; // Import de Mantine import { Card, Group, Text } from '@mantine/core';
import { AiFillStar } from 'react-icons/ai'; import { AiFillStar } from 'react-icons/ai';
import { ExternalLinkStyled } from '~/components/common/external_link_styled'; import { ExternalLinkStyled } from '~/components/common/external_link_styled';
import LinkFavicon from '~/components/dashboard/link/link_favicon'; import LinkFavicon from '~/components/dashboard/link/link_favicon';
@@ -14,18 +14,12 @@ export default function LinkItem({
}) { }) {
const { name, url, description, favorite } = link; const { name, url, description, favorite } = link;
return ( return (
<Card <Card className={styles.linkWrapper} padding="sm" radius="sm" withBorder>
className={styles.linkWrapper} <Group className={styles.linkHeader} justify="center">
padding="xs"
pl="md"
pr="md"
radius="sm"
>
<Group className={styles.linkHeader} justify="space-between">
<LinkFavicon url={url} /> <LinkFavicon url={url} />
<ExternalLinkStyled href={url} style={{ flex: 1 }}> <ExternalLinkStyled href={url} style={{ flex: 1 }}>
<div className={styles.linkName}> <div className={styles.linkName}>
<Text c="blue" lineClamp={1}> <Text lineClamp={1}>
{name}{' '} {name}{' '}
{showUserControls && favorite && <AiFillStar color="gold" />} {showUserControls && favorite && <AiFillStar color="gold" />}
</Text> </Text>
@@ -35,7 +29,7 @@ export default function LinkItem({
{/* {showUserControls && <LinkControls link={link} />} */} {/* {showUserControls && <LinkControls link={link} />} */}
</Group> </Group>
{description && ( {description && (
<Text c="dimmed" size="sm"> <Text className={styles.linkDescription} c="dimmed" size="sm">
{description} {description}
</Text> </Text>
)} )}
@@ -60,7 +54,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) {
} }
return ( return (
<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}> <Text className={styles.linkUrl} color="gray" size="xs" lineClamp={1}>
{origin} {origin}
<span className={styles.linkUrlPathname}>{text}</span> <span className={styles.linkUrlPathname}>{text}</span>
</Text> </Text>
@@ -68,7 +62,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) {
} catch (error) { } catch (error) {
console.error('error', error); console.error('error', error);
return ( return (
<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}> <Text className={styles.linkUrl} color="gray" size="xs" lineClamp={1}>
{url} {url}
</Text> </Text>
); );

24
inertia/mantine/components/dashboard/dashboard_navbar.tsx
View File

@@ -16,6 +16,7 @@ import { IoIosSearch } from 'react-icons/io';
import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5'; import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5';
import { PiGearLight } from 'react-icons/pi'; import { PiGearLight } from 'react-icons/pi';
import { MantineUserCard } from '~/components/common/mantine_user_card'; import { MantineUserCard } from '~/components/common/mantine_user_card';
import useUser from '~/hooks/use_user';
interface DashboardNavbarProps { interface DashboardNavbarProps {
isOpen: boolean; isOpen: boolean;
@@ -23,6 +24,7 @@ interface DashboardNavbarProps {
} }
export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) { export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
const { t } = useTranslation('common'); const { t } = useTranslation('common');
const { isAuthenticated, user } = useUser();
const common = { const common = {
variant: 'subtle', variant: 'subtle',
color: 'blue', color: 'blue',
@@ -36,14 +38,16 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
</Group> </Group>
<MantineUserCard /> <MantineUserCard />
<Divider mt="xs" mb="md" /> <Divider mt="xs" mb="md" />
<NavLink {isAuthenticated && user.isAdmin && (
{...common} <NavLink
component={Link} {...common}
href={route('admin.dashboard').url} component={Link}
label={t('admin')} href={route('admin.dashboard').url}
leftSection={<IoShieldHalfSharp size="1.5rem" />} label={t('admin')}
color="var(--mantine-color-red-5)" leftSection={<IoShieldHalfSharp size="1.5rem" />}
/> color="var(--mantine-color-red-5)"
/>
)}
<NavLink <NavLink
label={t('settings')} label={t('settings')}
leftSection={<PiGearLight size="1.5rem" />} leftSection={<PiGearLight size="1.5rem" />}
@@ -71,13 +75,13 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) {
<Text size="sm" fw={500} c="dimmed" mt="sm" ml="md"> <Text size="sm" fw={500} c="dimmed" mt="sm" ml="md">
{t('favorite')} • {0} {t('favorite')} • {0}
</Text> </Text>
<ScrollArea> <AppShell.Section grow component={ScrollArea}>
{Array(15) {Array(15)
.fill(0) .fill(0)
.map((_, index) => ( .map((_, index) => (
<Skeleton key={index} h={28} mt="sm" animate={false} /> <Skeleton key={index} h={28} mt="sm" animate={false} />
))} ))}
</ScrollArea> </AppShell.Section>
</AppShell.Navbar> </AppShell.Navbar>
); );
} }