diff options
author | Saptak S <saptak013@gmail.com> | 2020-07-05 20:59:25 +0530 |
---|---|---|
committer | Saptak S <saptak013@gmail.com> | 2020-07-05 20:59:25 +0530 |
commit | 38d3eec42737221a4464cca7a9b3ecadb208b95c (patch) | |
tree | 04ac776ba68a46e3402b1c8b454adbcbcec123a9 /share | |
parent | 172a30d5c9facbf50fe3b11f663b338a8d9a2c73 (diff) | |
download | onionshare-38d3eec42737221a4464cca7a9b3ecadb208b95c.tar.gz onionshare-38d3eec42737221a4464cca7a9b3ecadb208b95c.zip |
Adds responsiveness in receive and share modes webapps
Diffstat (limited to 'share')
-rw-r--r-- | share/static/css/style.css | 72 | ||||
-rw-r--r-- | share/templates/send.html | 55 |
2 files changed, 82 insertions, 45 deletions
diff --git a/share/static/css/style.css b/share/static/css/style.css index af41b155..3747d208 100644 --- a/share/static/css/style.css +++ b/share/static/css/style.css @@ -12,6 +12,13 @@ body { font-family: Helvetica, sans-serif; } +.d-flex { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + header { border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #fcfcfc; @@ -34,14 +41,7 @@ header h1 { color: #666666; } -header .right { - float: right; - font-size: .75rem; -} - -header .right ul li { - display: inline; - margin: 0 0 0 .5rem; +header .information { font-size: 1rem; } @@ -98,13 +98,13 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited { border-bottom: 1px solid #666666; } -table.file-list { +.file-list { width: 100%; margin: 0 auto; border-collapse: collapse; } -table.file-list th { +.file-list .heading { text-align: left; text-transform: uppercase; font-weight: normal; @@ -112,22 +112,59 @@ table.file-list th { padding: 0.5rem; } -table.file-list tr { +.file-list div.d-flex { border-bottom: 1px solid #e0e0e0; + justify-content: flex-start; } -table.file-list td { +.file-list div.d-flex div { white-space: nowrap; - padding: 0.5rem 10rem 0.5rem 0.8rem; + padding: 0.5rem 0.8rem 0.5rem 0.8rem; } -table.file-list td img { +.file-list div.d-flex div img { vertical-align: middle; margin-right: 0.5rem; } -table.file-list td:last-child { - width: 100%; +.file-list div.d-flex div:last-child { + padding-right: 0.8rem; + flex-basis: 0; + flex-grow: 1; +} + +.file-list div.d-flex div:first-child { + flex-basis: 0; + flex-grow: 2; +} + +@media (max-width: 950px) { + .file-list div.d-flex div:last-child { + flex-basis: auto; + flex-grow: 0; + } +} + +@media (max-width: 655px) { + .file-list div.d-flex { + display: block; + } + .file-list div.d-flex span { + max-width: 100%; + word-break: break-all; + white-space: normal; + } + .file-list div.d-flex #size-header { + display: none; + } + .file-list div.d-flex div:last-child { + padding-left: 3.5rem; + font-size: 0.85rem; + padding-top: 0; + } + header .information { + padding: 1rem 0; + } } .upload-wrapper { @@ -204,7 +241,7 @@ ul.flashes { margin: 0; padding: 0; width: 800px; - max-width: 500px; + max-width: 100%; margin: 0 auto; } @@ -213,6 +250,7 @@ ul.flashes li { padding: 5px; list-style: none; text-align: center; + word-break: break-word; } li.error { diff --git a/share/templates/send.html b/share/templates/send.html index 941c4130..85e2c3c5 100644 --- a/share/templates/send.html +++ b/share/templates/send.html @@ -11,15 +11,15 @@ <body> - <header class="clearfix"> - <div class="right"> - <ul> - <li>Total size: <strong>{{ filesize_human }}</strong> {% if is_zipped %} (compressed){% endif %}</li> - <li><a class="button" href='/download'>Download Files</a></li> - </ul> + <header class="d-flex"> + <div class="logo-container"> + <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare"> + <h1>OnionShare</h1> + </div> + <div class="information d-flex"> + <div>Total size: <strong>{{ filesize_human }}</strong> {% if is_zipped %} (compressed){% endif %}</div> + <a class="button" href='/download'>Download Files</a> </div> - <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare"> - <h1>OnionShare</h1> </header> {% if breadcrumbs %} @@ -28,40 +28,39 @@ </ul> {% endif %} - <table class="file-list" id="file-list"> - <tr> - <th id="filename-header">Filename</th> - <th id="size-header">Size</th> - <th></th> - </tr> + <div class="file-list" id="file-list"> + <div class="d-flex"> + <div id="filename-header" class="heading">Filename</div> + <div id="size-header" class="heading">Size</div> + </div> {% for info in dirs %} - <tr> - <td> + <div class="d-flex"> + <div> <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_folder.png" /> <a href="{{ info.basename }}"> - {{ info.basename }} + <span>{{ info.basename }}</span> </a> - </td> - <td>—</td> - </tr> + </div> + <div>—</div> + </div> {% endfor %} {% for info in files %} - <tr> - <td> + <div class="d-flex"> + <div> <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_file.png" /> {% if download_individual_files %} <a href="{{ info.basename }}"> - {{ info.basename }} + <span>{{ info.basename }}</span> </a> {% else %} - {{ info.basename }} + <span>{{ info.basename }}</span> {% endif %} - </td> - <td>{{ info.size_human }}</td> - </tr> + </div> + <div>{{ info.size_human }}</div> + </div> {% endfor %} - </table> + </div> <script async src="{{ static_url_path }}/js/send.js" charset="utf-8"></script> </body> |