Skip to content

Commit

Permalink
fix: video upload page layout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArturGaspar
ArturGaspar committed Oct 17, 2023
1 parent cfa4577 commit 6adf4e0
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 199 deletions.
46 changes: 24 additions & 22 deletions src/editors/containers/VideoUploadEditor/VideoUploader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,39 +17,41 @@ const URLUploader = () => {
const intl = useIntl();
return (
<div className="d-flex flex-column">
<div style={{ backgroundColor: '#F2F0EF' }} className="justify-content-center align-self-center rounded-circle p-5">
<Icon src={FileUpload} className="text-muted" size="lg" />
<div className="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5">
<Icon src={FileUpload} className="text-muted" style={{ height: '2rem', width: '2rem' }} />
</div>
<div className="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5">
<span className="small">{intl.formatMessage(messages.dropVideoFileHere)}</span>
<span className="align-self-center" style={{ fontSize: '0.8rem' }}>{intl.formatMessage(messages.info)}</span>
<div className="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3">
<span>{intl.formatMessage(messages.dropVideoFileHere)}</span>
<span className="x-small align-self-center pt-2">{intl.formatMessage(messages.info)}</span>
</div>
<div className="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal">OR</div>
<div className="zindex-9 video-id-prompt p-4">
<div className="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3">
OR
</div>
<div className="zindex-9 video-id-prompt py-3">
<InputGroup className="video-upload-input-group">
<FormControl
className="m-0"
placeholder={intl.formatMessage(messages.pasteURL)}
aria-label={intl.formatMessage(messages.pasteURL)}
aria-describedby="basic-addon2"
borderless
onClick={(event) => { event.stopPropagation(); }}
onChange={(event) => { setTextInputValue(event.target.value); }}
/>
<div className="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button">
<IconButton
className="text-muted"
alt={intl.formatMessage(messages.submitButtonAltText)}
src={ArrowForward}
iconAs={Icon}
size="inline"
onClick={(event) => {
event.stopPropagation();
if (textInputValue.trim() !== '') {
onURLUpload(textInputValue);
}
}}
/>
</div>
<IconButton
className="position-absolute align-self-center text-muted bg-transparent shadow-none"
style={{ marginLeft: '20.25rem' }}
alt={intl.formatMessage(messages.submitButtonAltText)}
src={ArrowForward}
iconAs={Icon}
size="inline"
onClick={(event) => {
event.stopPropagation();
if (textInputValue.trim() !== '') {
onURLUpload(textInputValue);
}
}}
/>
</InputGroup>
</div>
</div>
Expand Down
144 changes: 66 additions & 78 deletions src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@ Object {
class="d-flex flex-column"
>
<div
class="justify-content-center align-self-center rounded-circle p-5"
style="background-color: rgb(242, 240, 239);"
class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
>
<span
class="pgn__icon pgn__icon__lg text-muted"
class="pgn__icon text-muted"
style="height: 2rem; width: 2rem;"
>
<svg
aria-hidden="true"
Expand All @@ -84,33 +84,30 @@ Object {
</span>
</div>
<div
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
>
<span
class="small"
>
<span>
Drag and drop video here or click to upload
</span>
<span
class="align-self-center"
style="font-size: 0.8rem;"
class="x-small align-self-center pt-2"
>
Upload MP4 or MOV files (5 GB max)
</span>
</div>
<div
class="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal"
class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
>
OR
</div>
<div
class="zindex-9 video-id-prompt p-4"
class="zindex-9 video-id-prompt py-3"
>
<div
class="video-upload-input-group input-group"
>
<div
class="pgn__form-control-decorator-group"
class="pgn__form-control-decorator-group m-0"
>
<input
aria-describedby="basic-addon2"
Expand All @@ -120,39 +117,36 @@ Object {
value=""
/>
</div>
<div
class="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
style="margin-left: 20.25rem;"
type="button"
>
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline text-muted"
type="button"
<span
class="btn-icon__icon-container"
>
<span
class="btn-icon__icon-container"
class="pgn__icon btn-icon__icon"
>
<span
class="pgn__icon btn-icon__icon"
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</button>
</div>
</span>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -218,11 +212,11 @@ Object {
class="d-flex flex-column"
>
<div
class="justify-content-center align-self-center rounded-circle p-5"
style="background-color: rgb(242, 240, 239);"
class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
>
<span
class="pgn__icon pgn__icon__lg text-muted"
class="pgn__icon text-muted"
style="height: 2rem; width: 2rem;"
>
<svg
aria-hidden="true"
Expand All @@ -242,33 +236,30 @@ Object {
</span>
</div>
<div
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-5"
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
>
<span
class="small"
>
<span>
Drag and drop video here or click to upload
</span>
<span
class="align-self-center"
style="font-size: 0.8rem;"
class="x-small align-self-center pt-2"
>
Upload MP4 or MOV files (5 GB max)
</span>
</div>
<div
class="x-small align-self-center justify-content-center mx-2 text-dark font-weight-normal"
class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
>
OR
</div>
<div
class="zindex-9 video-id-prompt p-4"
class="zindex-9 video-id-prompt py-3"
>
<div
class="video-upload-input-group input-group"
>
<div
class="pgn__form-control-decorator-group"
class="pgn__form-control-decorator-group m-0"
>
<input
aria-describedby="basic-addon2"
Expand All @@ -278,39 +269,36 @@ Object {
value=""
/>
</div>
<div
class="light-300 justify-content-center align-self-center bg-light rounded-circle p-0 x-small url-submit-button"
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
style="margin-left: 20.25rem;"
type="button"
>
<button
aria-label="Submit"
class="btn-icon btn-icon-primary btn-icon-inline text-muted"
type="button"
<span
class="btn-icon__icon-container"
>
<span
class="btn-icon__icon-container"
class="pgn__icon btn-icon__icon"
>
<span
class="pgn__icon btn-icon__icon"
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
fill="currentColor"
/>
</svg>
</span>
</button>
</div>
</span>
</button>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 6adf4e0

Please sign in to comment.