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;
}
.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 {

55
share/templates/send.html
View File

@ -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>&mdash;</td>
</tr>
</div>
<div>&mdash;</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>