Left align upload page (#1320)

In addition, the submit button on the upload page will now be disabled as long as the form is invalid (i.e. a mandatory field like the title hasn't been filled out yet).
elan-ev · Jan 27, 2025 · f4b7d76 · f4b7d76
2 parents e5af633 + 6c79070
commit f4b7d76
Showing 1 changed file with 41 additions and 41 deletions.
diff --git a/frontend/src/routes/Upload.tsx b/frontend/src/routes/Upload.tsx
@@ -89,7 +89,6 @@ const Upload: React.FC<Props> = ({ knownRolesRef }) => {
 
     return (
         <div css={{
-            margin: "0 auto",
             height: "100%",
             display: "flex",
             flexDirection: "column",
@@ -232,8 +231,7 @@ const UploadMain: React.FC<UploadMainProps> = ({ knownRoles }) => {
                 alignItems: "stretch",
                 gap: 32,
                 width: "100%",
-                maxWidth: 800,
-                margin: "0 auto",
+                maxWidth: 900,
             }}>
                 <UploadState state={uploadState.current} />
                 <div>
@@ -353,7 +351,7 @@ const UploadErrorBox: React.FC<{ error: unknown }> = ({ error }) => {
 
 
     return (
-        <div css={{ margin: "0 auto" }}>
+        <div css={{ maxWidth: 750 }}>
             <Card kind="error">
                 <ErrorDisplay info={info} failedAction={t("upload.errors.failed-to-upload")} />
             </Card>
@@ -761,7 +759,7 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
         }],
     ]);
 
-    const { register, handleSubmit, control, formState: { errors } } = useForm<Metadata>({
+    const { register, handleSubmit, control, formState: { isValid, errors } } = useForm<Metadata>({
         mode: "onChange",
         defaultValues: { acl: defaultAcl },
     });
@@ -806,41 +804,43 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
                 {boxError(errors.title?.message)}
             </InputContainer>
 
-            {/* Description */}
-            <InputContainer>
-                <label htmlFor={descriptionFieldId}>{t("upload.metadata.description")}</label>
-                <TextArea id={descriptionFieldId} {...register("description")} />
-            </InputContainer>
-
-            {/* Series */}
-            <InputContainer>
-                <label htmlFor={seriesFieldId}>
-                    {t("series.series")}
-                    {CONFIG.upload.requireSeries && <FieldIsRequiredNote />}
-                    <WithTooltip
-                        tooltip={t("upload.metadata.note-writable-series")}
-                        tooltipCss={{ width: 400 }}
-                        css={{
-                            display: "inline-block",
-                            verticalAlign: "middle",
-                            fontWeight: "normal",
-                            marginLeft: 8,
-                        }}
-                    >
-                        <span><LuInfo tabIndex={0} /></span>
-                    </WithTooltip>
-                </label>
-                <VideoListSelector
-                    type="series"
-                    inputId={seriesFieldId}
-                    writableOnly
-                    menuPlacement="top"
-                    onChange={data => onSeriesChange({ opencastId: data?.opencastId })}
-                    onBlur={seriesField.onBlur}
-                    required={CONFIG.upload.requireSeries}
-                />
-                {boxError(errors.series?.message)}
-            </InputContainer>
+            <div css={{ maxWidth: 750 }}>
+                {/* Description */}
+                <InputContainer>
+                    <label htmlFor={descriptionFieldId}>{t("upload.metadata.description")}</label>
+                    <TextArea id={descriptionFieldId} {...register("description")} />
+                </InputContainer>
+
+                {/* Series */}
+                <InputContainer>
+                    <label htmlFor={seriesFieldId}>
+                        {t("series.series")}
+                        {CONFIG.upload.requireSeries && <FieldIsRequiredNote />}
+                        <WithTooltip
+                            tooltip={t("upload.metadata.note-writable-series")}
+                            tooltipCss={{ width: 400 }}
+                            css={{
+                                display: "inline-block",
+                                verticalAlign: "middle",
+                                fontWeight: "normal",
+                                marginLeft: 8,
+                            }}
+                        >
+                            <span><LuInfo tabIndex={0} /></span>
+                        </WithTooltip>
+                    </label>
+                    <VideoListSelector
+                        type="series"
+                        inputId={seriesFieldId}
+                        writableOnly
+                        menuPlacement="top"
+                        onChange={data => onSeriesChange({ opencastId: data?.opencastId })}
+                        onBlur={seriesField.onBlur}
+                        required={CONFIG.upload.requireSeries}
+                    />
+                    {boxError(errors.series?.message)}
+                </InputContainer>
+            </div>
 
             {/* ACL */}
             <InputContainer>
@@ -880,7 +880,7 @@ const MetaDataEdit: React.FC<MetaDataEditProps> = ({ onSave, disabled, knownRole
             {/* Submit button */}
             <Button
                 kind="call-to-action"
-                disabled={disabled}
+                disabled={!isValid || disabled}
                 css={{ marginTop: 32, marginBottom: 160 }}
                 onClick={onSubmit}>
                 {t("upload.metadata.save")}