Merge pull request #1629 from lbryio/redesign-css

Redesign css changes
This commit is contained in:
Sean Yesmunt 2018-06-18 15:05:20 -04:00 committed by GitHub
commit 9667a35e7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 59 additions and 16 deletions

View file

@ -48,7 +48,7 @@
"formik": "^0.10.4",
"hast-util-sanitize": "^1.1.2",
"keytar": "^4.2.1",
"lbry-redux": "lbryio/lbry-redux#1739929ecf0eb9eca9ba9cc64fd5b5f2e59c4978",
"lbry-redux": "lbryio/lbry-redux#be7a07302aab0c5fc40f8c76cff524c7bce327a2",
"localforage": "^1.7.1",
"mixpanel-browser": "^2.17.1",
"moment": "^2.22.0",

View file

@ -14,7 +14,7 @@ type Props = {
const ModalCreditIntro = (props: Props) => {
const { closeModal, totalRewardValue, currentBalance, addBalance } = props;
const totalRewardRounded = Math.round(totalRewardValue / 10) * 10;
const totalRewardRounded = Math.floor(totalRewardValue / 10) * 10;
return (
<Modal type="custom" isOpen contentLabel="Welcome to LBRY">

View file

@ -5,7 +5,7 @@ $spacing-vertical: 24px;
$spacing-width: 36px;
$medium-breakpoint: 1280px;
$large-breakpoint: 1760px;
$large-breakpoint: 1921px;
:root {
/* Widths & spacings */
@ -146,14 +146,15 @@ $large-breakpoint: 1760px;
--card-bg: var(--color-white);
--card-text-color: var(--color-grey-dark);
--card-radius: 2px;
--card-max-width: 1000px;
--card-wallet-color: var(--text-color-inverse);
--success-msg-color: var(--color-green);
--success-msg-border: var(--color-green-blue);
--success-msg-bg: var(--color-green-light);
/* File Tile Card */
--file-tile--media-height: 100px;
--file-tile--media-width: calc(100px * (1 + 9 / 16));
--file-tile--media-height: 125px;
--file-tile--media-width: calc(125px * (16 / 9));
/* Modal */
--modal-width: 440px;

View file

@ -153,7 +153,7 @@ button:disabled {
}
.btn--uri-indicator {
transition: color var(--animation-duration) var(--animation-duration);
transition: color var(--animation-duration) var(--animation-style);
&:hover {
color: var(--color-light-blue);
@ -175,13 +175,14 @@ button:disabled {
.btn__label--balance {
color: var(--text-help-color);
&:hover {
color: var(--text-color);
}
}
&:hover {
background-color: transparent;
.btn__label--balance {
color: var(--header-primary-color);
}
}
}

View file

@ -6,6 +6,7 @@
display: flex;
position: relative;
flex-direction: column;
max-width: var(--card-max-width);
}
.card > h1 {
@ -35,6 +36,11 @@
.channel-name {
font-size: 12px;
@media only screen and (min-width: $medium-breakpoint) {
font-size: 14px;
padding-top: 4px;
}
}
}
@ -108,6 +114,10 @@
font-size: 14px;
line-height: 18px;
padding-top: 20px;
@media only screen and (min-width: $medium-breakpoint) {
font-size: 16px;
}
}
.card__title--file {
@ -283,11 +293,15 @@
align-items: center;
font-size: 18px;
line-height: 24px;
@media only screen and (min-width: $medium-breakpoint) {
font-size: 20px;
}
}
.card-row__scroll-btns {
display: flex;
padding-right: $spacing-width - 10px; // page padding - 1/2 width of arrow button
padding-right: $spacing-width;
}
.card-row__scrollhouse {
@ -299,7 +313,15 @@
vertical-align: top;
overflow-y: visible;
// 31 px to handle to padding between cards
width: calc((100% / 4) - 31px);
width: calc((100% / 4) - 34px);
@media only screen and (min-width: $medium-breakpoint) {
width: calc((100% / 6) - 29px);
}
@media only screen and (min-width: $large-breakpoint) {
width: calc((100% / 8) - 27px);
}
}
.card:not(:first-of-type) {
@ -323,12 +345,31 @@
display: inline-block;
vertical-align: top;
margin-bottom: 60px;
width: calc((100% / 4) - (60px / 4));
@media only screen and (max-width: $medium-breakpoint) {
width: calc((100% / 4) - (60px / 4)); // 60px === 20px margin-right * three cards
&:not(:nth-child(4n + 1)) {
margin-left: 20px;
}
}
@media only screen and (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
width: calc((100% / 6) - (100px / 6));
&:not(:nth-child(6n + 1)) {
margin-left: 20px;
}
}
@media only screen and (min-width: $large-breakpoint) {
width: calc((100% / 8) - (140px / 8));
&:not(:nth-child(8n + 1)) {
margin-left: 20px;
}
}
}
}
.card__list--rewards {

View file

@ -5564,9 +5564,9 @@ lazy-val@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
lbry-redux@lbryio/lbry-redux#1739929ecf0eb9eca9ba9cc64fd5b5f2e59c4978:
lbry-redux@lbryio/lbry-redux#be7a07302aab0c5fc40f8c76cff524c7bce327a2:
version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/1739929ecf0eb9eca9ba9cc64fd5b5f2e59c4978"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/be7a07302aab0c5fc40f8c76cff524c7bce327a2"
dependencies:
proxy-polyfill "0.1.6"
reselect "^3.0.0"