File Page style improvements on mobile view
Improve channel preview info display on mobile view - Slightly smaller profile pic - smaller font size - smaller follow button
This commit is contained in:
parent
48e2de6ca4
commit
a84ebbc68f
9 changed files with 195 additions and 20 deletions
|
@ -139,7 +139,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
|
|||
)}
|
||||
|
||||
{children && children}
|
||||
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={size} />}
|
||||
{iconRight && <Icon icon={iconRight} iconColor={iconColor} size={iconSize || size} />}
|
||||
</span>
|
||||
);
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ import Button from 'component/button';
|
|||
import LbcSymbol from 'component/common/lbc-symbol';
|
||||
import FileDetails from 'component/fileDetails';
|
||||
import FileValues from 'component/fileValues';
|
||||
import { useIsMobile } from 'effects/use-screensize';
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
|
@ -27,6 +28,8 @@ type Props = {
|
|||
export default function FileDescription(props: Props) {
|
||||
const { uri, description, amount, hasSupport, isEmpty, doOpenModal, claimIsMine, expandOverride } = props;
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
const [showCreditDetails, setShowCreditDetails] = React.useState(false);
|
||||
|
||||
|
@ -44,9 +47,15 @@ export default function FileDescription(props: Props) {
|
|||
'media__info-text--expanded': expanded,
|
||||
})}
|
||||
>
|
||||
{description && <MarkdownPreview className="markdown-preview--description" content={description} simpleLinks />}
|
||||
<ClaimTags uri={uri} type="large" />
|
||||
<FileDetails uri={uri} />
|
||||
{isMobile && <ClaimTags uri={uri} type="large" />}
|
||||
|
||||
<div className="mediaInfo__description">
|
||||
{description && (
|
||||
<MarkdownPreview className="markdown-preview--description" content={description} simpleLinks />
|
||||
)}
|
||||
{!isMobile && <ClaimTags uri={uri} type="large" />}
|
||||
<FileDetails uri={uri} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card__bottom-actions">
|
||||
|
|
|
@ -5,6 +5,7 @@ import * as React from 'react';
|
|||
import { isURIValid } from 'util/lbryURI';
|
||||
import Button from 'component/button';
|
||||
import ClaimLink from 'component/claimLink';
|
||||
import { useIsMobile } from 'effects/use-screensize';
|
||||
|
||||
type Props = {
|
||||
href: string,
|
||||
|
@ -33,6 +34,8 @@ function MarkdownLink(props: Props) {
|
|||
setUserMention,
|
||||
} = props;
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
let decodedUri;
|
||||
try {
|
||||
decodedUri = decodeURI(href);
|
||||
|
@ -127,6 +130,7 @@ function MarkdownLink(props: Props) {
|
|||
<Button
|
||||
button="link"
|
||||
iconRight={isLbryLink ? undefined : ICONS.EXTERNAL}
|
||||
iconSize={isMobile && 12}
|
||||
title={title || decodedUri}
|
||||
label={children}
|
||||
className="button--external-link"
|
||||
|
|
|
@ -280,10 +280,15 @@
|
|||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-s);
|
||||
padding: var(--spacing-xxs);
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-s);
|
||||
|
||||
h1 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -312,7 +317,22 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-bottom: var(--spacing-s) !important;
|
||||
padding: 0 !important;
|
||||
|
||||
.file__viewdate {
|
||||
padding-left: var(--spacing-xxs);
|
||||
|
||||
span {
|
||||
font-size: var(--font-xxsmall);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media__subtitle--centered::before {
|
||||
content: '•';
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -367,6 +387,17 @@
|
|||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: var(--spacing-xxs);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
.card__main-actions:nth-child(1) {
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.card__bottom-gutter {
|
||||
|
@ -389,6 +420,15 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: var(--font-small);
|
||||
|
||||
.button--link {
|
||||
font-size: var(--font-xsmall);
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card__bottom-actions--comments {
|
||||
|
|
|
@ -867,10 +867,18 @@
|
|||
position: relative;
|
||||
|
||||
.tag {
|
||||
@media (max-width: $breakpoint-xsmall) {
|
||||
display: none;
|
||||
}
|
||||
font-size: var(--font-xsmall);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: var(--font-xxsmall);
|
||||
margin-top: var(--spacing-xxs);
|
||||
padding: 2px var(--spacing-xxs);
|
||||
height: unset;
|
||||
|
||||
.button__content {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
|
|
|
@ -57,6 +57,85 @@
|
|||
@media (max-width: $breakpoint-medium) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
.card__main-actions {
|
||||
padding: var(--spacing-s) var(--spacing-xxs) !important;
|
||||
}
|
||||
|
||||
.claim-preview--inline {
|
||||
align-items: flex-start;
|
||||
line-height: 1.3;
|
||||
|
||||
.button--no-style {
|
||||
align-self: center;
|
||||
|
||||
.channel-thumbnail {
|
||||
margin: var(--spacing-xxs);
|
||||
margin-top: 0px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
.ff-container {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claim-preview-info {
|
||||
justify-content: flex-start;
|
||||
|
||||
.claim-preview__title {
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.media__subtitle {
|
||||
height: unset;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.claim-preview__channel-sub-count {
|
||||
font-size: var(--font-xxsmall);
|
||||
}
|
||||
|
||||
.claim-preview-metadata {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
font-size: var(--font-xxsmall);
|
||||
}
|
||||
}
|
||||
|
||||
.claim-preview__actions {
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
|
||||
.button-group {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button--alt {
|
||||
padding: var(--spacing-xs);
|
||||
height: unset;
|
||||
|
||||
.button__content {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--font-xsmall);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-render {
|
||||
|
|
|
@ -65,6 +65,26 @@
|
|||
h6 {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: var(--font-xsmall);
|
||||
|
||||
a {
|
||||
.button__content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--font-xsmall);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: var(--spacing-xxs);
|
||||
bottom: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dl,
|
||||
|
|
|
@ -73,20 +73,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.media__info-text--contracted {
|
||||
margin-top: var(--spacing-m);
|
||||
max-height: 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media__info-text--expanded {
|
||||
margin-top: var(--spacing-m);
|
||||
max-height: auto;
|
||||
}
|
||||
|
||||
.media__info-text--contracted,
|
||||
.media__info-text--expanded {
|
||||
max-width: 50rem;
|
||||
max-height: auto;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.media__info-text--contracted {
|
||||
@extend .media__info-text--expanded;
|
||||
overflow: hidden;
|
||||
|
||||
.mediaInfo__description {
|
||||
max-height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
.mediaInfo__description {
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.media__info-text--fade {
|
||||
|
|
|
@ -218,6 +218,12 @@ td {
|
|||
td:nth-of-type(2) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
td {
|
||||
font-size: var(--font-xxsmall);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table__item--actionable {
|
||||
|
|
Loading…
Reference in a new issue