fix repost ribbon #7549
3 changed files with 25 additions and 13 deletions
|
@ -2315,5 +2315,7 @@
|
||||||
"Clear Views": "Clear Views",
|
"Clear Views": "Clear Views",
|
||||||
"Show Video View Progress": "Show Video View Progress",
|
"Show Video View Progress": "Show Video View Progress",
|
||||||
"Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.": "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.",
|
"Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.": "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.",
|
||||||
|
"%anonymous%": "%anonymous%",
|
||||||
|
"Anon --[used in <%anonymous% Reposted>]--": "Anon",
|
||||||
"--end--": "--end--"
|
"--end--": "--end--"
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,17 +31,19 @@ function ClaimRepostAuthor(props: Props) {
|
||||||
if (repostUrl && !repostChannelUrl) {
|
if (repostUrl && !repostChannelUrl) {
|
||||||
return (
|
return (
|
||||||
<div className="claim-preview__repost-author">
|
<div className="claim-preview__repost-author">
|
||||||
|
<div className="claim-preview__repost-ribbon claim-preview__repost-ribbon--anon">
|
||||||
<Icon icon={ICONS.REPOST} size={10} />
|
<Icon icon={ICONS.REPOST} size={10} />
|
||||||
<span>
|
<span>
|
||||||
<I18nMessage
|
<I18nMessage
|
||||||
tokens={{
|
tokens={{
|
||||||
anonymous: <strong>{__('Anonymous --[used in <%anonymous% Reposted>]--')}</strong>,
|
anonymous: <strong>{__('Anon --[used in <%anonymous% Reposted>]--')}</strong>,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
%anonymous% Reposted
|
%anonymous%
|
||||||
</I18nMessage>
|
</I18nMessage>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (!repostUrl) {
|
if (!repostUrl) {
|
||||||
|
|
|
@ -130,9 +130,9 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
width: 225px;
|
width: 225px;
|
||||||
padding-top: 4px;
|
padding-top: 2px;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
background-color: var(--color-brand-blue);
|
background-color: var(--color-gray-7);
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-primary-contrast);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
@ -142,6 +142,14 @@
|
||||||
top: 10px;
|
top: 10px;
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
|
|
||||||
|
&.claim-preview__repost-ribbon--anon {
|
||||||
|
left: -85px;
|
||||||
|
top: 12px;
|
||||||
|
.icon {
|
||||||
|
margin-right: var(--spacing-xxs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.button--uri-indicator {
|
.button--uri-indicator {
|
||||||
top: -3px;
|
top: -3px;
|
||||||
}
|
}
|
||||||
|
@ -160,7 +168,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--color-secondary);
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue