diff --git a/database/seeders/collection_seeder.ts b/database/seeders/collection_seeder.ts index 8204cb5..6398fd2 100644 --- a/database/seeders/collection_seeder.ts +++ b/database/seeders/collection_seeder.ts @@ -2,6 +2,7 @@ import Collection from '#models/collection'; import User from '#models/user'; import { BaseSeeder } from '@adonisjs/lucid/seeders'; import { faker } from '@faker-js/faker'; +import { Visibility } from '../../app/enums/visibility.js'; export default class extends BaseSeeder { static environment = ['development', 'testing']; @@ -10,9 +11,12 @@ export default class extends BaseSeeder { // eslint-disable-next-line unicorn/no-await-expression-member const users = await getUserIds(); - const collections = faker.helpers.multiple(() => createRandomCollection(users), { - count: 50, - }); + const collections = faker.helpers.multiple( + () => createRandomCollection(users), + { + count: 50, + } + ); await Collection.createMany(collections); } } @@ -28,7 +32,8 @@ function createRandomCollection(userIds: User['id'][]) { id: faker.string.uuid(), name: faker.string.alphanumeric({ length: { min: 5, max: 25 } }), description: faker.string.alphanumeric({ length: { min: 0, max: 254 } }), - nextId: faker.string.uuid(), + visibility: Visibility.PRIVATE, + nextId: undefined, authorId, }; } diff --git a/inertia/components/common/text_ellipsis.tsx b/inertia/components/common/text_ellipsis.tsx index 6bae510..c3cea08 100644 --- a/inertia/components/common/text_ellipsis.tsx +++ b/inertia/components/common/text_ellipsis.tsx @@ -1,9 +1,20 @@ import styled from '@emotion/styled'; -const TextEllipsis = styled.p({ - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', +const TextEllipsis = styled.p<{ lines?: number }>(({ lines = 1 }) => { + if (lines > 1) { + return { + overflow: 'hidden', + display: '-webkit-box', + WebkitLineClamp: lines, + WebkitBoxOrient: 'vertical', + }; + } + + return { + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + }; }); export default TextEllipsis; diff --git a/inertia/components/dashboard/collection/header/collection_description.tsx b/inertia/components/dashboard/collection/header/collection_description.tsx index 68286a8..d2bdf7b 100644 --- a/inertia/components/dashboard/collection/header/collection_description.tsx +++ b/inertia/components/dashboard/collection/header/collection_description.tsx @@ -1,7 +1,9 @@ import styled from '@emotion/styled'; +import TextEllipsis from '~/components/common/text_ellipsis'; import useActiveCollection from '~/hooks/use_active_collection'; -const CollectionDescriptionStyle = styled.p({ +const CollectionDescriptionStyle = styled.div({ + width: '100%', fontSize: '0.85rem', marginBottom: '0.5rem', }); @@ -11,7 +13,7 @@ export default function CollectionDescription() { return ( activeCollection && ( - {activeCollection?.description} + {activeCollection?.description} ) ); diff --git a/inertia/components/dashboard/side_nav/nav_item.tsx b/inertia/components/dashboard/side_nav/nav_item.tsx index a8aa8d2..46797ab 100644 --- a/inertia/components/dashboard/side_nav/nav_item.tsx +++ b/inertia/components/dashboard/side_nav/nav_item.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import { Link } from '@inertiajs/react'; +import { rgba } from '~/lib/color'; export const Item = styled.div(({ theme }) => ({ userSelect: 'none', @@ -21,9 +22,7 @@ export const Item = styled.div(({ theme }) => ({ // Disable hover effect for UserCard '&:hover:not(.disable-hover)': { cursor: 'pointer', - backgroundColor: theme.colors.secondary, - outlineWidth: '1px', - outlineStyle: 'solid', + backgroundColor: rgba(theme.colors.font, 0.1), }, })); diff --git a/inertia/components/dashboard/side_nav/side_navigation.tsx b/inertia/components/dashboard/side_nav/side_navigation.tsx index 5d19998..8167329 100644 --- a/inertia/components/dashboard/side_nav/side_navigation.tsx +++ b/inertia/components/dashboard/side_nav/side_navigation.tsx @@ -9,6 +9,7 @@ import { Item, ItemLink } from '~/components/dashboard/side_nav/nav_item'; import UserCard from '~/components/dashboard/side_nav/user_card'; import ModalSettings from '~/components/settings/modal'; import useActiveCollection from '~/hooks/use_active_collection'; +import { rgba } from '~/lib/color'; import { appendCollectionId } from '~/lib/navigation'; const SideMenu = styled.nav({ @@ -20,14 +21,23 @@ const SideMenu = styled.nav({ const AdminButton = styled(Item)(({ theme }) => ({ color: theme.colors.lightRed, + '&:hover': { + backgroundColor: `${rgba(theme.colors.lightRed, 0.1)}!important`, + }, })); const SettingsButton = styled(Item)(({ theme }) => ({ color: theme.colors.grey, + '&:hover': { + backgroundColor: `${rgba(theme.colors.grey, 0.1)}!important`, + }, })); const AddButton = styled(ItemLink)(({ theme }) => ({ color: theme.colors.primary, + '&:hover': { + backgroundColor: `${rgba(theme.colors.primary, 0.1)}!important`, + }, })); export default function SideNavigation() { @@ -52,9 +62,6 @@ export default function SideNavigation() { {t('collection.create')} - - Archives - diff --git a/resources/views/inertia_layout.edge b/resources/views/inertia_layout.edge index b32ea50..c8ce198 100644 --- a/resources/views/inertia_layout.edge +++ b/resources/views/inertia_layout.edge @@ -2,13 +2,32 @@ - - + - + + + + + MyLinks @routes()