improve channel cover upload ux

This commit is contained in:
zeppi 2021-10-28 15:15:47 -04:00 committed by jessopb
parent d15423dc65
commit 4c8920339d
5 changed files with 8 additions and 4 deletions

View file

@ -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--"
} }

View file

@ -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)} />
))} ))}

View file

@ -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()}
/> />

View file

@ -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);
} }
} }
} }

View file

@ -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