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

improve mobile nag style

Browse source
This commit is contained in:
Sean Yesmunt 2020-03-26 11:18:05 -04:00
parent 3f08786514
commit 4cc402e8e0
3 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/common/nag.jsx
View file

@ -21,7 +21,7 @@ export default function Nag(props: Props) {
return ( return (
<div className={classnames('nag', { 'nag--helpful': type === 'helpful', 'nag--error': type === 'error' })}> <div className={classnames('nag', { 'nag--helpful': type === 'helpful', 'nag--error': type === 'error' })}>
{message} <div className="nag__message">{message}</div>
<Button <Button
className={classnames('nag__button', { className={classnames('nag__button', {
'nag__button--helpful': type === 'helpful', 'nag__button--helpful': type === 'helpful',

4
ui/scss/component/_claim-list.scss
View file

@ -417,6 +417,10 @@
.file-properties { .file-properties {
color: var(--color-white); color: var(--color-white);
} }
@media (max-width: $breakpoint-small) {
display: none;
}
} }
.claim-preview--tile { .claim-preview--tile {

21
ui/scss/component/nag.scss
View file

@ -20,6 +20,10 @@ $nag-error-z-index: 100001;
color: var(--color-white); color: var(--color-white);
text-decoration: underline; text-decoration: underline;
} }
@media (max-width: $breakpoint-small) {
text-align: left;
}
} }
.nag--helpful { .nag--helpful {
@ -34,9 +38,21 @@ $nag-error-z-index: 100001;
z-index: $nag-error-z-index; z-index: $nag-error-z-index;
} }
.nag__message {
display: inline;
@media (max-width: $breakpoint-small) {
&::after {
content: '';
display: block;
}
}
}
.nag__button { .nag__button {
line-height: 1; line-height: 1;
margin-left: var(--spacing-small); margin-left: var(--spacing-small);
margin-right: var(--spacing-small);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 1px solid var(--color-white); border: 1px solid var(--color-white);
padding: var(--spacing-miniscule); padding: var(--spacing-miniscule);
@ -47,6 +63,11 @@ $nag-error-z-index: 100001;
background-color: var(--color-white); background-color: var(--color-white);
color: var(--color-nag); color: var(--color-nag);
} }
@media (max-width: $breakpoint-small) {
margin-left: 0;
margin-top: var(--spacing-small);
}
} }
.nag__button--helpful { .nag__button--helpful {