Fix cover upload ux (#184)

* do not block submit on thumb or cover error

* improve cover upload UX

* p padding
This commit is contained in:
jessopb 2021-10-29 10:53:46 -04:00 committed by GitHub
parent 08c6df434e
commit f956f9d2fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 17 deletions

View file

@ -115,23 +115,11 @@ function ChannelForm(props: Props) {
isClaimingInitialRewards ||
creatingChannel ||
updatingChannel ||
nameError ||
thumbError ||
coverError ||
bidError ||
(isNewChannel && !params.name)
);
}, [
isClaimingInitialRewards,
creatingChannel,
updatingChannel,
nameError,
thumbError,
coverError,
bidError,
isNewChannel,
params.name,
]);
}, [isClaimingInitialRewards, creatingChannel, updatingChannel, nameError, bidError, isNewChannel, params.name]);
function getChannelParams() {
// fill this in with sdk data
@ -305,7 +293,9 @@ function ChannelForm(props: Props) {
</div>
{params.coverUrl &&
(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)} />
))}

View file

@ -118,7 +118,7 @@ function SelectAsset(props: Props) {
<Button
button="primary"
type="submit"
label={__('Done')}
label={useUrl ? __('Done') : __('Upload')}
disabled={!useUrl && (uploadStatus === SPEECH_UPLOADING || !pathSelected || !fileSelected)}
onClick={() => doUploadAsset()}
/>

View file

@ -40,6 +40,9 @@ $actions-z-index: 2;
width: 100%;
height: 100%;
position: absolute;
p {
padding: var(--padding-m);
}
}
.channel-cover__gradient {
@ -103,7 +106,7 @@ $actions-z-index: 2;
@media (max-width: $breakpoint-small) {
top: 0;
margin-top: var(--spacing-m);
margin-top: var(--spacing-xl);
}
}
@ -259,7 +262,7 @@ $actions-z-index: 2;
margin-top: 0;
.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-l: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 4rem;
// Aspect ratio
--aspect-ratio-bluray: 41.6666666667%; // 12:5