From 4ca4fe5ffec2c4c8afb92b0352b0c8982091bee8 Mon Sep 17 00:00:00 2001
From: Armin Friedl <dev@friedl.net>
Date: Fri, 22 May 2020 08:30:06 +0200
Subject: [PATCH] Fix mobile layout for upload

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.
---
 web/fling/src/components/admin/Upload.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/fling/src/components/admin/Upload.jsx b/web/fling/src/components/admin/Upload.jsx
index 437243f..a6dfea4 100644
--- a/web/fling/src/components/admin/Upload.jsx
+++ b/web/fling/src/components/admin/Upload.jsx
@@ -138,9 +138,9 @@ export default function Upload(props) {
             return(
                 <>
                   <img className="dropzone-icon" alt="dropzone icon" src={drop}
-                       onDragOver={stopEvent} onDragLeave={stopEvent} />
+                       onDragLeave={stopEvent} />
                   <h5 className="text-primary"
-                      onDragOver={stopEvent} onDragLeave={stopEvent}>
+                      onDragLeave={stopEvent}>
                     Drop now!
                   </h5>
                 </>
@@ -149,8 +149,8 @@ export default function Upload(props) {
             return(
                 <>
                   <img className="dropzone-icon-upload" alt="dropzone icon" src={upload}
-                       onDragOver={stopEvent} onDragLeave={stopEvent} />
-                  <h5 onDragOver={stopEvent} onDragLeave={stopEvent}>
+                       onDragLeave={stopEvent} />
+                  <h5 onDragLeave={stopEvent}>
                     Click or Drop
                   </h5>
                 </>
@@ -162,21 +162,21 @@ export default function Upload(props) {
         <div className="container">
           {logFiles()}
           <div className="columns">
-            <div className="column col-4 pl-0"
+            <div className="column col-4 col-sm-12"
                  onDrop={handleDrop}
                  onClick={handleClick}
                  onDragOver={stopEvent}
                  onDragEnter={handleOnDragEnter}
                  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
                        onDragLeave={stopEvent} onChange={handleFileInputChange} />
                 {zoneContent(dragging)}
               </div>
             </div>
 
-            <div className="column col-8 pr-0" >
+            <div className="column col-8 col-sm-12" >
               <div className="file-list">
                 <div className="row">
                   <div className="container">