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

View file

@ -335,7 +335,6 @@
.claim-preview__repost-author {
left: 0px;
top: 0px;
//left: auto;
font-size: var(--font-small);
opacity: 0.8;
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
*::selection {
@ -790,6 +789,47 @@ img {
&:hover {
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);
}
}
}
}
}