Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(APP-3261): Truncate long link descriptions dashboard #1364

Closed
wants to merge 9 commits into from
Closed

fix(APP-3261): Truncate long link descriptions dashboard #1364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0cf4289
recommit change with verified commit
Barukimang Jun 6, 2024
e6bedc3
test verified commit
Barukimang Jun 6, 2024
8cb4f7a
test verified commit2
Barukimang Jun 6, 2024
6c03e09
test verified commit3
Barukimang Jun 6, 2024
434461c
test verified commit4
Barukimang Jun 6, 2024
62ace53
added logic to truncate and style in case of very ling link names
Barukimang Jun 26, 2024
469c329
chore: update daoHeader layout for link truncation
thekidnamedkd Jun 28, 2024
8fd78a3
chore: clean up styling further
thekidnamedkd Jun 28, 2024
2dcf1d6
chore: clean up styling further
thekidnamedkd Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 50 additions & 48 deletions src/@aragon/ods-old/components/headers/headerDao.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {Link} from '../link';
import {ListItemLink} from '../listItem';

const DEFAULT_LINES_SHOWN = 2;
const DEFAULT_LINKS_SHOWN = 3;
const DEFAULT_LINKS_SHOWN = 2;
thekidnamedkd marked this conversation as resolved.
Show resolved Hide resolved
const DEFAULT_TRANSLATIONS = {
follow: 'Follow',
following: 'Following',
Expand Down Expand Up @@ -202,45 +202,47 @@ export const HeaderDao: React.FC<HeaderDaoProps> = ({
<DetailsText>{daoType}</DetailsText>
</NetworkDetails>
</NetworkDetailsContainer>
<ActionWrapper>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Barukimang The links should still be placed on the right side of the page, right?
Screenshot 2024-07-01 at 09 59 40

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since these style changes introduced a new issue and this 🐛 was a tiny edge case to start with, closing this PR and submitting a new PR with the initial fix.

<LinksWrapper>
{links
?.slice(0, DEFAULT_LINKS_SHOWN)
?.map(({label, href}, index: number) => (
<Link {...{label, href}} external key={index} />
))}
</LinksWrapper>
<ActionContainer>
{showDropdown && (
<Dropdown.Container
align="start"
customTrigger={
<Button
iconRight={IconType.CHEVRON_DOWN}
variant="tertiary"
size="lg"
>
All Links
</Button>
}
>
{links?.map(({label, href}, index: number) => (
<div className="mb-3 p-2" key={index}>
<ListItemLink {...{label, href}} external />
</div>
))}
</Dropdown.Container>
)}
<Button
onClick={onFollowClick}
variant="tertiary"
size="lg"
iconLeft={following ? IconType.CHECKMARK : undefined}

<LinksWrapper>
{links
?.slice(0, DEFAULT_LINKS_SHOWN)
?.map(({label, href}, index: number) => (
<StyledLink {...{label, href}} external key={index} />
))}
</LinksWrapper>
<ActionContainer>
{showDropdown && (
<Dropdown.Container
align="start"
customTrigger={
<Button
iconRight={IconType.CHEVRON_DOWN}
variant="tertiary"
size="sm"
responsiveSize={{md: 'md'}}
className="text-nowrap"
>
All Links
</Button>
}
>
{following ? labels.following : labels.follow}
</Button>
</ActionContainer>
</ActionWrapper>
{links?.map(({label, href}, index: number) => (
<div className="mb-3 p-2" key={index}>
<ListItemLink {...{label, href}} external />
</div>
))}
</Dropdown.Container>
)}
<Button
onClick={onFollowClick}
variant="tertiary"
size="sm"
responsiveSize={{md: 'md'}}
iconLeft={following ? IconType.CHECKMARK : undefined}
>
{following ? labels.following : labels.follow}
</Button>
</ActionContainer>
</DetailsWrapper>
</Card>
);
Expand Down Expand Up @@ -283,32 +285,32 @@ const Description = styled.p.attrs({
`;

const DetailsWrapper = styled.div.attrs({
className: 'flex items-center justify-between flex-col md:flex-row',
className:
'flex sm:items-center justify-start items-start sm:justify-between flex-col gap-y-4 sm:flex-row sm:gap-x-6',
})``;

const NetworkDetailsContainer = styled.div.attrs({
className: 'flex space-x-6 w-full md:w-auto',
className: 'flex space-x-6 w-max-content wrap-none',
})``;

const NetworkDetails = styled.div.attrs({
className: 'flex space-x-2 items-center justify-center',
className: 'flex space-x-2 items-center justify-center text-nowrap',
})``;

const DetailsText = styled.span.attrs({
className: 'text-neutral-600 ft-text-sm' as string | undefined,
})``;

const LinksWrapper = styled.div.attrs({
className: 'space-x-6 hidden xl:flex',
className: 'gap-x-3 hidden xl:grid xl:grid-cols-2 w-full',
})``;

const ActionContainer = styled.div.attrs({
className: 'flex space-x-3 w-full justify-between',
const StyledLink = styled(Link).attrs({
className: 'w-full',
})``;

const ActionWrapper = styled.div.attrs({
className:
'flex items-center md:space-x-6 justify-between md:justify-start w-full md:w-max space-y-6 md:space-y-0',
const ActionContainer = styled.div.attrs({
className: 'flex space-x-3 w-max-content justify-end',
})``;

const CredentialsDropdownTrigger = styled(Link).attrs({
Expand Down
2 changes: 1 addition & 1 deletion src/@aragon/ods-old/components/link/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
{...props}
data-testid="link"
>
<div className="mr-1 flex items-center gap-x-2">
<div className="flex items-center gap-x-2">
<Label>{label}</Label>
{iconRight && <Icon icon={iconRight} size="sm" />}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/@aragon/ods-old/components/listItem/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ export const ListItemLink: React.FC<ListItemLinkProps> = ({
};

const Container = styled.div.attrs({
className: 'w-full overflow-hidden',
className: 'overflow-hidden',
})``;

const Link = styled.a.attrs({
className: 'flex items-center min-w-0 text-primary-500' as string,
className: 'flex items-center min-w-0 text-primary-500',
})``;

const Title = styled.p.attrs({
Expand Down
Loading