LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

[WIP] Discover page UI tweaks #357

Merged
akinwale merged 1 commit from ui-discover-cards into master 2017-07-20 00:13:47 +02:00
Conversation 1 Commits 1 Files changed 2 +10 -5
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/js/component/fileCard/view.jsx
View file

@ -78,8 +78,9 @@ class FileCard extends React.PureComponent {
onClick={() => navigate("/show", { uri })} onClick={() => navigate("/show", { uri })}
className="card__link" className="card__link"
> >
<CardMedia title={title} thumbnail={thumbnail} />
<div className="card__title-identity"> <div className="card__title-identity">
<h5 title={title}> <h5 className="card__title" title={title}>
<TruncatedText lines={1}>{title}</TruncatedText> <TruncatedText lines={1}>{title}</TruncatedText>
</h5> </h5>
<div className="card__subtitle"> <div className="card__subtitle">
@ -92,7 +93,6 @@ class FileCard extends React.PureComponent {
<UriIndicator uri={uri} /> <UriIndicator uri={uri} />
</div> </div>
</div> </div>
<CardMedia title={title} thumbnail={thumbnail} />
<div className="card__content card__subtext card__subtext--two-lines"> <div className="card__content card__subtext card__subtext--two-lines">
<TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown> <TruncatedMarkdown lines={2}>{description}</TruncatedMarkdown>
</div> </div>

11
ui/scss/component/_card.scss
View file

@ -28,6 +28,9 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
margin-top: $spacing-vertical * 1/3; margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3; margin-bottom: $spacing-vertical * 1/3;
} }
.card__title-identity .card__title {
font-size: 0.95em
}
.card__actions { .card__actions {
padding: 0 $padding-card-horizontal; padding: 0 $padding-card-horizontal;
} }
@ -51,8 +54,8 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
color: #444; color: #444;
margin-top: 12px; margin-top: 12px;
font-size: 0.9em; font-size: 0.9em;
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 2/3; margin-bottom: $spacing-vertical * 1/3;
padding: 0 $padding-card-horizontal; padding: 0 $padding-card-horizontal;
} }
.card__subtext--allow-newlines { .card__subtext--allow-newlines {
@ -60,6 +63,8 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
} }
.card__subtext--two-lines { .card__subtext--two-lines {
height: $font-size * 0.9 * $font-line-height * 2; height: $font-size * 0.9 * $font-line-height * 2;
font-size: 0.82em;
color: #515151
} }
.card-overlay { .card-overlay {
position: absolute; position: absolute;
@ -144,7 +149,7 @@ $card-link-scaling: 1.1;
top: 36% top: 36%
} }
$width-card-small: $spacing-vertical * 12; $width-card-small: $spacing-vertical * 10;
$height-card-small: $spacing-vertical * 15; $height-card-small: $spacing-vertical * 15;
.card--small { .card--small {