Changeset 47 in code

Timestamp:

Oct 20, 2021, 4:09:09 PM (4 years ago)

Author:

dev

Message:

Improve interface with simple drag and drop capability

Location:

trunk

Files:

• static/dz.js (added)
• static/partage.css (modified) (3 diffs)
• templates/index.html (modified) (1 diff)

trunk/static/partage.css

@@ -3 +3 @@
         margin: auto;
         max-width: 540px;
-        text-align: center;
         font-family: serif;
         font-size: 1.5rem;
+        text-align: center;
         background-color: #eeeeee;
         color: #222222;
@@ -18 +18 @@
 }
 
+section {
+        display: flex;
+        justify-content: flex-end;
+        font-size: initial;
+}
 
-img#logo { height: 100%; max-height: 30vh; }
-h1 { font-size: 4.5rem; }
-ul { list-style: none; padding: 0; }
+section#formsettings > * {
+        margin-top: 20px;
+        margin-left: 20px;
+}
+
+img#logo {
+        height: 100%;
+        max-height: 30vh;
+}
+
+h1 {
+        font-size: 4.0rem;
+}
+
+ul {
+        list-style: none;
+        text-align: left;
+        display: inline-block;
+}
+
+.dropzone {
+        padding-top: 60px;
+        padding-bottom: 60px;
+        border: 2px dashed #888888;
+        border-radius: 8px;
+        text-align: center;
+        margin: auto;
+        color: #888888;
+}
+
+.dropzone.dragover {
+        color: #222222;
+        border-color: #222222;
+}
 
 /* font attributes are not inherited by default */
@@ -57 +93 @@
         }
 }
-

trunk/templates/index.html

@@ -15 +15 @@
                 <h1>partage</h1>
         </header>
-        <p>
-                Use the box below to upload and share files. File size is
-                limited to {{.Maxsize}}.
-        </p>
         <form enctype="multipart/form-data" method="post">
-                <input id="uck" name="uck" type="file" multiple/>
-                <input id="output" name="output" type="hidden" value='html' />
-                <input type="submit" value="...Share"/>
+                <div id="dropzone"></div>
+                <div id="fallbackform" class="dropzone">
+                        <input id="filebox" name="file" type="file" multiple/>
+                        <input id="output" name="output" type="hidden" value='html' />
+                        <input type="submit" value="Upload"/>
+                </div>
+                <section id="formsettings">
+                        <label for="expiry"> Destroy after </label>
+                        <select id="expiry" name="expiry">
+                                <option value="900"> 15 minutes </option>
+                                <option value="3600"> 1 hour </option>
+                                <option value="28800"> 8 hours </option>
+                                <option value="86400" selected> 1 day </option>
+                                <option value="604800"> 1 week </option>
+                        </select>
+                </section>
         </form>
+        <p>File size limited to {{.Maxsize}}.</p>
+        <div id="uploads"></div>
+        <script src="/dz.js"></script>
 </body>
 </html>