LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

improve accessibility of claim preview tiles: #6480

Browse source
This commit is contained in:
btzr-io 2021-07-14 17:12:07 -05:00
parent 6df622307c
commit 484f2830c8
2 changed files with 34 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/component/claimPreviewTile/view.jsx
View file

@ -225,18 +225,21 @@ function ClaimPreviewTile(props: Props) {
)}
</FileThumbnail>
</NavLink>
<NavLink {...navLinkProps}>
<h2 className="claim-tile__title">
<TruncatedText text={title || (claim && claim.name)} lines={isChannel ? 1 : 2} />
{isChannel && (
<div className="claim-tile__about">
<UriIndicator uri={uri} />
</div>
)}
{/* CHECK CLAIM MENU LIST PARAMS (IS REPOST?) */}
<ClaimMenuList uri={uri} collectionId={listId} channelUri={channelUri} isRepost={isRepost} />
</h2>
</NavLink>
<div className="claim-tile__header">
<NavLink {...navLinkProps}>
<h2 className="claim-tile__title">
<TruncatedText text={title || (claim && claim.name)} lines={isChannel ? 1 : 2} />
{isChannel && (
<div className="claim-tile__about">
<UriIndicator uri={uri} />
</div>
)}
</h2>
</NavLink>
{/* CHECK CLAIM MENU LIST PARAMS (IS REPOST?) */}
<ClaimMenuList uri={uri} collectionId={listId} channelUri={channelUri} isRepost={isRepost} />
</div>
<div>
<div className="claim-tile__info">
{isChannel ? (

26
ui/scss/component/_claim-list.scss
View file

@ -471,7 +471,7 @@
cursor: pointer;
.claim__menu-button {
display: block;
opacity: 1;
}
.collection-preview__overlay-thumbs {
opacity: 1;
@ -536,11 +536,6 @@
font-size: var(--font-small);
min-height: 2rem;
.claim__menu-button {
right: 0.2rem;
top: var(--spacing-s);
}
@media (min-width: $breakpoint-small) {
min-height: 2.5rem;
padding-right: var(--spacing-m);
@ -737,6 +732,23 @@
}
}
.claim-tile__header {
position: relative;
.claim__menu-button {
right: 0.2rem;
top: var(--spacing-s);
&:focus {
opacity: 1;
.icon {
background-color: var(--color-button-alt-bg);
border-radius: var(--border-radius);
}
}
}
}
.claim__menu-button {
position: absolute;
top: var(--spacing-xs);
@ -748,7 +760,7 @@
@media (min-width: $breakpoint-small) {
&:not([aria-expanded='true']) {
display: none;
opacity: 0;
}
}
}