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

tweak styling

Browse source
This commit is contained in:
Jeremy Kauffman 2017-07-19 18:13:19 -04:00
parent 9e1b78c044
commit 53168074e0
2 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -80,9 +80,9 @@ class FileCard extends React.PureComponent {
> >
<CardMedia title={title} thumbnail={thumbnail} /> <CardMedia title={title} thumbnail={thumbnail} />
<div className="card__title-identity"> <div className="card__title-identity">
<h5 className="card__title" title={title}> <div className="card__title" title={title}>
<TruncatedText lines={1}>{title}</TruncatedText> <TruncatedText lines={1}>{title}</TruncatedText>
</h5> </div>
<div className="card__subtitle"> <div className="card__subtitle">
<span style={{ float: "right" }}> <span style={{ float: "right" }}>
<FilePrice uri={uri} /> <FilePrice uri={uri} />

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

@ -19,21 +19,29 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
.card--obscured .card__inner { .card--obscured .card__inner {
filter: blur($blur-intensity-nsfw); filter: blur($blur-intensity-nsfw);
} }
.card__title-primary { .card__title-primary,
.card__title-identity,
.card__actions,
.card__content,
.card__subtext {
padding: 0 $padding-card-horizontal; padding: 0 $padding-card-horizontal;
}
.card--small {
.card__title-primary,
.card__title-identity,
.card__actions,
.card__content,
.card__subtext {
padding: 0 $padding-card-horizontal / 2;
}
}
.card__title-primary {
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 2/3;
} }
.card__title-identity { .card__title-identity {
padding: 0 $padding-card-horizontal;
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 {
padding: 0 $padding-card-horizontal;
}
.card__actions { .card__actions {
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 2/3;
} }
@ -48,23 +56,18 @@ $padding-card-horizontal: $spacing-vertical * 2/3;
.card__content { .card__content {
margin-top: $spacing-vertical * 2/3; margin-top: $spacing-vertical * 2/3;
margin-bottom: $spacing-vertical * 2/3; margin-bottom: $spacing-vertical * 2/3;
padding: 0 $padding-card-horizontal;
} }
.card__subtext { .card__subtext {
color: #444; color: $color-meta-light;
margin-top: 12px; font-size: 0.82em;
font-size: 0.9em;
margin-top: $spacing-vertical * 1/3; margin-top: $spacing-vertical * 1/3;
margin-bottom: $spacing-vertical * 1/3; margin-bottom: $spacing-vertical * 1/3;
padding: 0 $padding-card-horizontal;
} }
.card__subtext--allow-newlines { .card__subtext--allow-newlines {
white-space: pre-wrap; white-space: pre-wrap;
} }
.card__subtext--two-lines { .card__subtext--two-lines {
height: $font-size * 0.9 * $font-line-height * 2; height: $font-size * 0.82 * $font-line-height * 2; /*this is so one line text still has the proper height*/
font-size: 0.82em;
color: #515151
} }
.card-overlay { .card-overlay {
position: absolute; position: absolute;