mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-23 17:47:24 +00:00
improve channel cover upload ux
This commit is contained in:
parent
d15423dc65
commit
4c8920339d
5 changed files with 8 additions and 4 deletions
|
@ -2215,5 +2215,6 @@
|
||||||
"If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.": "If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.",
|
"If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.": "If you set a limit, playing videos may exceed your limit until cleanup runs every 30 minutes.",
|
||||||
"Enable Data Hosting": "Enable Data Hosting",
|
"Enable Data Hosting": "Enable Data Hosting",
|
||||||
"Data over the limit will be deleted within 30 minutes. This will make the Yrbl cry a little bit.": "Data over the limit will be deleted within 30 minutes. This will make the Yrbl cry a little bit.",
|
"Data over the limit will be deleted within 30 minutes. This will make the Yrbl cry a little bit.": "Data over the limit will be deleted within 30 minutes. This will make the Yrbl cry a little bit.",
|
||||||
|
"Choose %asset%": "Choose %asset%",
|
||||||
"--end--": "--end--"
|
"--end--": "--end--"
|
||||||
}
|
}
|
||||||
|
|
|
@ -292,7 +292,9 @@ function ChannelForm(props: Props) {
|
||||||
</div>
|
</div>
|
||||||
{params.coverUrl &&
|
{params.coverUrl &&
|
||||||
(coverError && isUpload.cover ? (
|
(coverError && isUpload.cover ? (
|
||||||
<div className="channel-cover__custom--waiting">{__('This will be visible in a few minutes.')}</div>
|
<div className="channel-cover__custom--waiting">
|
||||||
|
<p>{__('Uploaded image will be visible in a few minutes.')}</p>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<img className="channel-cover__custom" src={coverSrc} onError={() => setCoverError(true)} />
|
<img className="channel-cover__custom" src={coverSrc} onError={() => setCoverError(true)} />
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -118,7 +118,7 @@ function SelectAsset(props: Props) {
|
||||||
<Button
|
<Button
|
||||||
button="primary"
|
button="primary"
|
||||||
type="submit"
|
type="submit"
|
||||||
label={__('Done')}
|
label={useUrl ? __('Done') : __('Upload')}
|
||||||
disabled={!useUrl && (uploadStatus === SPEECH_UPLOADING || !pathSelected || !fileSelected)}
|
disabled={!useUrl && (uploadStatus === SPEECH_UPLOADING || !pathSelected || !fileSelected)}
|
||||||
onClick={() => doUploadAsset()}
|
onClick={() => doUploadAsset()}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -103,7 +103,7 @@ $actions-z-index: 2;
|
||||||
|
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
top: 0;
|
top: 0;
|
||||||
margin-top: var(--spacing-m);
|
margin-top: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -259,7 +259,7 @@ $actions-z-index: 2;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
margin-top: var(--spacing-l);
|
margin-top: var(--spacing-xxl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,7 @@ $breakpoint-large: 1600px;
|
||||||
--spacing-m: calc(2rem / 2);
|
--spacing-m: calc(2rem / 2);
|
||||||
--spacing-l: 2rem;
|
--spacing-l: 2rem;
|
||||||
--spacing-xl: 3rem;
|
--spacing-xl: 3rem;
|
||||||
|
--spacing-xxl: 4rem;
|
||||||
|
|
||||||
// Aspect ratio
|
// Aspect ratio
|
||||||
--aspect-ratio-bluray: 41.6666666667%; // 12:5
|
--aspect-ratio-bluray: 41.6666666667%; // 12:5
|
||||||
|
|
Loading…
Add table
Reference in a new issue