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:
Rafael 2022-02-01 17:28:18 -03:00 committed by Thomas Zarebczan
parent 48e2de6ca4
commit a84ebbc68f
9 changed files with 195 additions and 20 deletions

View file

@ -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>
);

View file

@ -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">

View file

@ -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"

View file

@ -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 {

View file

@ -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) {

View file

@ -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 {

View file

@ -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,

View file

@ -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 {

View file

@ -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 {