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:
parent
08c6df434e
commit
f956f9d2fe
4 changed files with 11 additions and 17 deletions
|
@ -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)} />
|
||||
))}
|
||||
|
|
|
@ -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()}
|
||||
/>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue