attic/fling
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix mobile layout for upload

Browse source 
Upload and file-list tiles appeared side-by-side even on small viewports.

Upload and file-list tiles are now full width on small viewports.
This commit is contained in:
Armin Friedl 2020-05-22 08:30:06 +02:00
parent b0a7e8b443
commit 4ca4fe5ffe
Signed by: armin
GPG key ID: 48C726EEE7FBCBC8
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/fling/src/components/admin/Upload.jsx
View file

@ -138,9 +138,9 @@ export default function Upload(props) {
return( return(
<> <>
<img className="dropzone-icon" alt="dropzone icon" src={drop} <img className="dropzone-icon" alt="dropzone icon" src={drop}
onDragOver={stopEvent} onDragLeave={stopEvent} /> onDragLeave={stopEvent} />
<h5 className="text-primary" <h5 className="text-primary"
onDragOver={stopEvent} onDragLeave={stopEvent}> onDragLeave={stopEvent}>
Drop now! Drop now!
</h5> </h5>
</> </>
@ -149,8 +149,8 @@ export default function Upload(props) {
return( return(
<> <>
<img className="dropzone-icon-upload" alt="dropzone icon" src={upload} <img className="dropzone-icon-upload" alt="dropzone icon" src={upload}
onDragOver={stopEvent} onDragLeave={stopEvent} /> onDragLeave={stopEvent} />
<h5 onDragOver={stopEvent} onDragLeave={stopEvent}> <h5 onDragLeave={stopEvent}>
Click or Drop Click or Drop
</h5> </h5>
</> </>
@ -162,21 +162,21 @@ export default function Upload(props) {
<div className="container"> <div className="container">
{logFiles()} {logFiles()}
<div className="columns"> <div className="columns">
<div className="column col-4 pl-0" <div className="column col-4 col-sm-12"
onDrop={handleDrop} onDrop={handleDrop}
onClick={handleClick} onClick={handleClick}
onDragOver={stopEvent} onDragOver={stopEvent}
onDragEnter={handleOnDragEnter} onDragEnter={handleOnDragEnter}
onDragLeave={handleOnDragLeave}> onDragLeave={handleOnDragLeave}>
<div className="dropzone c-hand py-2" onDragLeave={stopEvent} > <div className="dropzone c-hand py-2" >
<input className="d-hide" ref={fileInputRef} type="file" multiple <input className="d-hide" ref={fileInputRef} type="file" multiple
onDragLeave={stopEvent} onChange={handleFileInputChange} /> onDragLeave={stopEvent} onChange={handleFileInputChange} />
{zoneContent(dragging)} {zoneContent(dragging)}
</div> </div>
</div> </div>
<div className="column col-8 pr-0" > <div className="column col-8 col-sm-12" >
<div className="file-list"> <div className="file-list">
<div className="row"> <div className="row">
<div className="container"> <div className="container">