Merge pull request #917 from mig5/916_messaging_above_send_button

Make progress, noscript warning, and flashes appear above the form, but beneath the logo

onionshare/web/receive_mode.py

@@ -112,12 +112,14 @@ class ReceiveModeWeb(object):
                 else:
                     flash(msg, 'info')
             else:
+                msg = 'Sent '
                 for filename in filenames:
-                    msg = 'Sent {}'.format(filename)
-                    if ajax:
-                        info_flashes.append(msg)
-                    else:
-                        flash(msg, 'info')
+                    msg += '{}, '.format(filename)
+                msg = msg.rstrip(', ')
+                if ajax:
+                    info_flashes.append(msg)
+                else:
+                    flash(msg, 'info')
 
             if self.can_upload:
                 if ajax:

share/static/css/style.css

@@ -176,7 +176,7 @@ ul.flashes {
   margin: 0;
   padding: 0;
   width: 800px;
-  max-width: 90%;
+  max-width: 500px;
   margin: 0 auto;
 }
 
@@ -184,7 +184,7 @@ ul.flashes li {
   margin: 0 0 5px 0;
   padding: 5px;
   list-style: none;
-  text-align: left;
+  text-align: center;
 }
 
 li.error {
@@ -224,17 +224,15 @@ li.info {
 }
 
 div#noscript {
-  border: 1px solid #e55454;
-  text-align: left;
-  color: #e55454;
+  text-align: center;
+  color: #d709df;
   padding: 1em;
   line-height: 150%;
-  max-width: 900px;
-  margin: 100px 2em 0 2em;
+  margin: 0 auto;
 }
 
 div#noscript a, div#noscript a:visited {
-  color: #e27f7f;
+  color: #d709df;
 }
 
 .disable-noscript-xss-wrapper {

share/templates/receive.html

@@ -13,16 +13,24 @@
     </header>
 
     <div class="upload-wrapper">
+      <!--
+      We are not using a <noscript> tag because it only works when the security slider is set to
+      Safest, not Safer: https://trac.torproject.org/projects/tor/ticket/29506
+      -->
+      <div id="noscript">
+        <p>
+          <img src="/static/img/warning.png" title="Warning" /><strong>Warning:</strong> Due to a bug in Tor Browser and Firefox, uploads
+          sometimes never finish. To upload reliably, either set your Tor Browser
+          <a rel="noreferrer" target="_blank" href="https://tb-manual.torproject.org/en-US/security-slider/">security slider</a>
+          to Standard or
+          <a target="_blank" href="/noscript-xss-instructions">turn off your Tor Browser's NoScript XSS setting</a>.</p>
+      </div>
+
       <p><img class="logo" src="/static/img/logo_large.png" title="OnionShare"></p>
 
       <p class="upload-header">Send Files</p>
       <p class="upload-description">Select the files you want to send, then click "Send Files"...</p>
 
-      <form id="send" method="post" enctype="multipart/form-data" action="{{ upload_action }}">
-         <p><input type="file" id="file-select" name="file[]" multiple /></p>
-         <p><button type="submit" id="send-button" class="button">Send Files</button></p>
-      </form>
-
       <div id="uploads"></div>
 
       <div>
@@ -37,21 +45,13 @@
         </ul>
       </div>
 
-      <!--
-      We are not using a <noscript> tag because it only works when the security slider is set to
-      Safest, not Safer: https://trac.torproject.org/projects/tor/ticket/29506
-      -->
-      <div id="noscript">
-        <p>
-          <strong>Warning:</strong> Due to a bug in Tor Browser and Firefox, uploads
-          sometimes never finish. To upload reliably, either set your Tor Browser
-          <a rel="noreferrer" target="_blank" href="https://tb-manual.torproject.org/en-US/security-slider/">security slider</a>
-          to Standard or
-          <a target="_blank" href="/noscript-xss-instructions">turn off your Tor Browser's NoScript XSS setting</a>.</p>
-      </div>
-      <script src="/static/js/receive-noscript.js"></script>
+      <form id="send" method="post" enctype="multipart/form-data" action="{{ upload_action }}">
+         <p><input type="file" id="file-select" name="file[]" multiple /></p>
+         <p><button type="submit" id="send-button" class="button">Send Files</button></p>
+      </form>
 
     </div>
+    <script src="/static/js/receive-noscript.js"></script>
     <script src="/static/js/jquery-3.3.1.min.js"></script>
     <script src="/static/js/receive.js"></script>
   </body>