Git-Mirrors/onionshare
1
0
Fork 0
mirror of https://github.com/onionshare/onionshare.git synced 2024-10-01 01:35:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adds responsiveness in receive and share modes webapps

Browse Source
This commit is contained in:
Saptak S 2020-07-05 20:59:25 +05:30
parent 172a30d5c9
commit 38d3eec427
No known key found for this signature in database
GPG Key ID: 2D9B32E54C68A3FB
2 changed files with 82 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
share/static/css/style.css
View File

@ -12,6 +12,13 @@ body {
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
} }
.d-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
header { header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: #fcfcfc; background: #fcfcfc;
@ -34,14 +41,7 @@ header h1 {
color: #666666; color: #666666;
} }
header .right { header .information {
float: right;
font-size: .75rem;
}
header .right ul li {
display: inline;
margin: 0 0 0 .5rem;
font-size: 1rem; font-size: 1rem;
} }
@ -98,13 +98,13 @@ ul.breadcrumbs li a:link, ul.breadcrumbs li a:visited {
border-bottom: 1px solid #666666; border-bottom: 1px solid #666666;
} }
table.file-list { .file-list {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
border-collapse: collapse; border-collapse: collapse;
} }
table.file-list th { .file-list .heading {
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
@ -112,22 +112,59 @@ table.file-list th {
padding: 0.5rem; padding: 0.5rem;
} }
table.file-list tr { .file-list div.d-flex {
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
justify-content: flex-start;
} }
table.file-list td { .file-list div.d-flex div {
white-space: nowrap; 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; vertical-align: middle;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
table.file-list td:last-child { .file-list div.d-flex div:last-child {
width: 100%; 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 { .upload-wrapper {
@ -204,7 +241,7 @@ ul.flashes {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 800px; width: 800px;
max-width: 500px; max-width: 100%;
margin: 0 auto; margin: 0 auto;
} }
@ -213,6 +250,7 @@ ul.flashes li {
padding: 5px; padding: 5px;
list-style: none; list-style: none;
text-align: center; text-align: center;
word-break: break-word;
} }
li.error { li.error {

53
share/templates/send.html
View File

@ -11,15 +11,15 @@
<body> <body>
<header class="clearfix"> <header class="d-flex">
<div class="right"> <div class="logo-container">
<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>
</div>
<img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare"> <img class="logo" src="{{ static_url_path }}/img/logo.png" title="OnionShare">
<h1>OnionShare</h1> <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>
</header> </header>
{% if breadcrumbs %} {% if breadcrumbs %}
@ -28,40 +28,39 @@
</ul> </ul>
{% endif %} {% endif %}
<table class="file-list" id="file-list"> <div class="file-list" id="file-list">
<tr> <div class="d-flex">
<th id="filename-header">Filename</th> <div id="filename-header" class="heading">Filename</div>
<th id="size-header">Size</th> <div id="size-header" class="heading">Size</div>
<th></th> </div>
</tr>
{% for info in dirs %} {% for info in dirs %}
<tr> <div class="d-flex">
<td> <div>
<img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_folder.png" /> <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_folder.png" />
<a href="{{ info.basename }}"> <a href="{{ info.basename }}">
{{ info.basename }} <span>{{ info.basename }}</span>
</a> </a>
</td> </div>
<td>&mdash;</td> <div>&mdash;</div>
</tr> </div>
{% endfor %} {% endfor %}
{% for info in files %} {% for info in files %}
<tr> <div class="d-flex">
<td> <div>
<img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_file.png" /> <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_file.png" />
{% if download_individual_files %} {% if download_individual_files %}
<a href="{{ info.basename }}"> <a href="{{ info.basename }}">
{{ info.basename }} <span>{{ info.basename }}</span>
</a> </a>
{% else %} {% else %}
{{ info.basename }} <span>{{ info.basename }}</span>
{% endif %} {% endif %}
</td> </div>
<td>{{ info.size_human }}</td> <div>{{ info.size_human }}</div>
</tr> </div>
{% endfor %} {% endfor %}
</table> </div>
<script async src="{{ static_url_path }}/js/send.js" charset="utf-8"></script> <script async src="{{ static_url_path }}/js/send.js" charset="utf-8"></script>
</body> </body>