Fix top page repost ribbon & buttons on mobile

This commit is contained in:
Raphael Wickihalder 2022-02-18 11:51:48 +01:00
parent 5af52bd032
commit a3f00944d4
3 changed files with 63 additions and 13 deletions

View file

@ -1,7 +1,6 @@
// @flow // @flow
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import React from 'react'; import React from 'react';
import I18nMessage from 'component/i18nMessage';
import UriIndicator from 'component/uriIndicator'; import UriIndicator from 'component/uriIndicator';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
@ -31,16 +30,11 @@ function ClaimRepostAuthor(props: Props) {
if (repostUrl && !repostChannelUrl) { if (repostUrl && !repostChannelUrl) {
return ( return (
<div className="claim-preview__repost-author"> <div className="claim-preview__repost-author">
<Icon icon={ICONS.REPOST} size={10} /> <div className="claim-preview__repost-ribbon">
<span> <Icon icon={ICONS.REPOST} size={10} className="claim-preview__repost-icon" />
<I18nMessage <br />
tokens={{ {__('Anonymous')}
anonymous: <strong>{__('Anonymous --[used in <%anonymous% Reposted>]--')}</strong>, </div>
}}
>
%anonymous% Reposted
</I18nMessage>
</span>
</div> </div>
); );
} }

View file

@ -335,7 +335,6 @@
.claim-preview__repost-author { .claim-preview__repost-author {
left: 0px; left: 0px;
top: 0px; top: 0px;
//left: auto;
font-size: var(--font-small); font-size: var(--font-small);
opacity: 0.8; opacity: 0.8;
z-index: 5; z-index: 5;

View file

@ -1,4 +1,3 @@
// Generic html styles used across the App
// component specific styling should go in the component scss file // component specific styling should go in the component scss file
*::selection { *::selection {
@ -790,6 +789,47 @@ img {
&:hover { &:hover {
background-color: rgba(var(--color-header-background-base), 0.9); background-color: rgba(var(--color-header-background-base), 0.9);
} }
.claim-preview__repost-author {
left: 0;
top: 0;
.claim-preview__repost-ribbon {
span {
display: inline-block;
margin-left: 12px;
margin-top: -4px;
width: 92px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: $breakpoint-small) {
font-size: var(--font-xxxsmall);
.icon {
margin-top: 3px;
}
span {
width: 78px;
margin-top: 1px;
margin-left: 10px;
}
}
}
}
}
}
.search__top-links {
@media (max-width: $breakpoint-small) {
.button {
padding: 0 var(--spacing-m);
height: var(--height-button);
margin-bottom: var(--spacing-xxxs);
.button__content {
.button__label {
font-size: var(--font-base);
}
}
}
} }
} }
@ -818,6 +858,23 @@ img {
} }
} }
} }
.claim-preview__actions {
.claim-preview__primary-actions {
margin-top: var(--spacing-xxxs);
}
}
.claim-preview__repost-author {
top: var(--spacing-m);
left: var(--spacing-m);
.claim-preview__repost-ribbon {
@media (max-width: $breakpoint-small) {
.icon {
margin-top: 3px;
}
font-size: var(--font-xxxsmall);
}
}
}
} }
} }