general css fixes

This commit is contained in:
Sean Yesmunt 2018-10-04 00:11:08 -04:00
parent 5619a4a030
commit 9c74cd7f64
15 changed files with 82 additions and 104 deletions

View file

@ -40,6 +40,8 @@
"react/require-default-props": 0,
"react/jsx-closing-tag-location": 0,
"jsx-a11y/no-noninteractive-element-to-interactive-role": 0,
"class-methods-use-this": 0
"class-methods-use-this": 0,
"jsx-a11y/interactive-supports-focus": 0,
"jsx-a11y/click-events-have-key-events": 0
}
}

View file

@ -24,6 +24,10 @@ class TransactionListRecent extends React.PureComponent<Props> {
return (
<section className="card card--section">
<div className="card__title">{__('Recent Transactions')}</div>
<div className="card__subtitle">
{__('To view all of your transactions, navigate to the')}{' '}
<Button button="link" navigate="/history" label={__('transactions page')} />.
</div>
{fetchingTransactions && (
<div className="card__content">
<BusyIndicator message={__('Loading transactions')} />

View file

@ -117,21 +117,19 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
/>
</div>
{!!history.length && (
<table className="card--section table table--stretch table--history">
<tbody>
{history.map(item => (
<UserHistoryItem
key={item.uri}
uri={item.uri}
lastViewed={item.lastViewed}
selected={!!itemsSelected[item.uri]}
onSelect={() => {
this.onSelect(item.uri);
}}
/>
))}
</tbody>
</table>
<section className="item-list">
{history.map(item => (
<UserHistoryItem
key={item.uri}
uri={item.uri}
lastViewed={item.lastViewed}
selected={!!itemsSelected[item.uri]}
onSelect={() => {
this.onSelect(item.uri);
}}
/>
))}
</section>
)}
{pageCount > 1 && (
<FormRow padded verticallyCentered centered>

View file

@ -36,27 +36,24 @@ class UserHistoryItem extends React.PureComponent<Props> {
}
return (
<tr
<div
role="button"
onClick={onSelect}
className={classnames({
history__selected: selected,
className={classnames('item-list__item', {
'item-list__item--selected': selected,
})}
>
<td>
<input checked={selected} type="checkbox" onClick={onSelect} />
</td>
<td>{moment(lastViewed).from(moment())}</td>
<td>{title}</td>
<td>
<Button
tourniquet
button="link"
label={name ? `lbry://${name}` : `lbry://...`}
navigate="/show"
navigateParams={{ uri }}
/>
</td>
</tr>
<input checked={selected} type="checkbox" onClick={onSelect} />
<span className="time time--ago">{moment(lastViewed).from(moment())}</span>
<span className="item-list__item--cutoff">{title}</span>
<Button
tourniquet
button="link"
label={name ? `lbry://${name}` : `lbry://...`}
navigate="/show"
navigateParams={{ uri }}
/>
</div>
);
}
}

View file

@ -199,7 +199,7 @@ class HelpPage extends React.PureComponent<Props, State> {
)}
{this.state.uiVersion && ver ? (
<table className="table table--stretch table--help">
<table className="card__content table table--stretch table--help">
<tbody>
<tr>
<td>{__('App')}</td>

View file

@ -39,7 +39,7 @@ html {
}
body {
font-family: 'metropolis-semibold';
font-family: 'metropolis-medium';
font-weight: 400;
font-size: 16px;
line-height: 1.5;
@ -74,7 +74,6 @@ input {
line-height: 1;
cursor: text;
background-color: transparent;
font-family: 'metropolis-medium';
&[type='radio'],
&[type='checkbox'],
@ -109,7 +108,6 @@ input {
}
textarea {
font-family: 'metropolis-medium';
border: 1px solid var(--color-divider);
font-size: 0.8em;
width: 100%;
@ -152,8 +150,6 @@ dd {
}
p {
font-family: 'metropolis-medium';
&:not(:first-of-type) {
margin-top: $spacing-vertical * 1/3;
}
@ -227,7 +223,6 @@ p {
.page__empty {
margin-top: 200px;
text-align: center;
font-family: 'metropolis-medium';
display: flex;
flex-direction: column;
align-items: center;
@ -300,7 +295,6 @@ p {
color: inherit;
font-weight: inherit;
font-size: inherit;
font-family: 'metropolis-medium';
padding: 0;
}
@ -333,10 +327,6 @@ p {
-webkit-box-orient: vertical;
}
.busy-indicator {
font-family: 'metropolis-medium';
}
.busy-indicator__loader {
background: url('../../../static/img/busy.gif') no-repeat center center;
display: inline-block;
@ -355,7 +345,6 @@ p {
.help {
font-size: 12px;
font-family: 'metropolis-medium';
color: var(--color-help);
}
@ -364,7 +353,6 @@ p {
}
.meta {
font-family: 'metropolis-medium';
font-size: 0.8em;
color: var(--color-meta-light);
}

View file

@ -52,6 +52,8 @@ $large-breakpoint: 1921px;
--color-search-placeholder: var(--color-placeholder);
--color-credit-free: var(--color-dark-blue);
--color-credit-price: var(--card-text-color);
--color-text-black: #444;
--color-text-white: #efefef;
/* Shadows */
--box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
@ -60,8 +62,8 @@ $large-breakpoint: 1921px;
--box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05);
/* Text */
--text-color: var(--color-black);
--text-color-inverse: var(--color-white);
--text-color: var(--color-text-black);
--text-color-inverse: var(--color-text-white);
--text-help-color: var(--color-help);
--text-max-width: 660px;
--text-link-padding: 4px;

View file

@ -29,3 +29,5 @@
@import 'component/_toggle.scss';
@import 'component/_search.scss';
@import 'component/_dat-gui.scss';
@import 'component/_item-list.scss';
@import 'component/_time.scss';

View file

@ -19,7 +19,6 @@ button:disabled {
fill: currentColor; // for proper icon color
font-size: 12px;
transition: all var(--animation-duration) var(--animation-style);
font-family: 'metropolis-medium';
&:not(:disabled) {
box-shadow: var(--box-shadow-button);
@ -172,7 +171,6 @@ button:disabled {
}
.btn.btn--header-balance {
font-family: 'metropolis-medium';
font-size: 14px;
color: var(--header-primary-color);

View file

@ -107,6 +107,7 @@
.card__title {
font-size: 18px;
color: var(--text-color);
font-family: 'metropolis-semibold';
}
.card__title--small {
@ -151,7 +152,6 @@
.card__subtitle {
margin: 0;
font-size: 14px;
font-family: 'metropolis-medium';
color: var(--card-text-color);
}
@ -336,6 +336,7 @@
}
.card-row__title {
font-family: 'metropolis-semibold';
display: flex;
align-items: center;
font-size: 18px;

View file

@ -0,0 +1,26 @@
.item-list {
background-color: var(--card-bg);
margin-top: $spacing-vertical;
}
.item-list__item {
display: flex;
align-items: center;
padding: $spacing-vertical * 1/3;
input,
.item-list__item--cutoff {
margin-right: $spacing-vertical;
}
}
.item-list__item--selected {
background-color: var(--table-item-odd);
}
.item-list__item--cutoff {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
max-width: 350px;
}

View file

@ -24,7 +24,6 @@
padding: 10px;
padding-left: 30px;
font-size: 13px;
font-family: 'metropolis-medium';
display: flex;
align-items: center;
justify-content: center;
@ -54,7 +53,6 @@
flex-direction: row;
justify-items: flex-start;
align-items: center;
font-family: 'metropolis-medium';
&:not(:first-of-type) {
border-top: 1px solid var(--search-item-border-color);
@ -75,7 +73,6 @@
.wunderbar__suggestion-label--action {
margin-left: $spacing-vertical * 1/3;
white-space: nowrap;
font-family: 'metropolis-medium';
font-size: 12px;
line-height: 0.1; // to vertically align because the font size is smaller
}

View file

@ -3,7 +3,6 @@ table.table,
word-wrap: break-word;
max-width: 100%;
text-align: left;
margin-top: $spacing-vertical * 2/3;
tr td:first-of-type,
tr th:first-of-type {
@ -107,48 +106,3 @@ table.table--transactions {
width: 15%;
}
}
table.table--history {
margin-top: $spacing-vertical * 1/3;
tbody {
tr {
&:nth-child(even),
&:nth-child(odd) {
background-color: var(--table-item-even);
&.history__selected {
color: red;
background-color: var(--table-item-odd);
}
}
}
td {
cursor: default;
padding: $spacing-vertical * 1/3 0;
}
td:nth-of-type(1) {
width: 7.5%;
}
td:nth-of-type(2) {
width: 17.5%;
}
td:nth-of-type(3) {
width: 40%;
max-width: 30vw;
padding-right: $spacing-vertical * 2/3;
}
td:nth-of-type(4) {
width: 30%;
}
td:nth-of-type(3),
td:nth-of-type(4) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}

View file

@ -0,0 +1,9 @@
// All CSS for date & time ui
.time {
color: var(--color-help);
}
.time--ago {
min-width: 160px;
}

View file

@ -1,5 +1,5 @@
:root {
/* Colors */
--color-divider: #53637C;;
--color-canvas: transparent;
@ -12,7 +12,7 @@
--color-credit-free: var(--color-secondary);
/* Text */
--text-color: var(--color-white);
--text-color: var(--color-text-white);
--text-help-color: var(--color-help);
/* Form */