general css fixes
This commit is contained in:
parent
5619a4a030
commit
9c74cd7f64
15 changed files with 82 additions and 104 deletions
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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')} />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
26
src/renderer/scss/component/_item-list.scss
Normal file
26
src/renderer/scss/component/_item-list.scss
Normal 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;
|
||||
}
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
9
src/renderer/scss/component/_time.scss
Normal file
9
src/renderer/scss/component/_time.scss
Normal file
|
@ -0,0 +1,9 @@
|
|||
// All CSS for date & time ui
|
||||
|
||||
.time {
|
||||
color: var(--color-help);
|
||||
}
|
||||
|
||||
.time--ago {
|
||||
min-width: 160px;
|
||||
}
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in a new issue