Gittes-archive/jQuery-File-Upload
2
0
Fork 0
mirror of https://github.com/blueimp/jQuery-File-Upload.git synced 2025-12-11 20:15:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use CSS media queries to define file name display.

Browse Source 
Improve responsive table layout.
This commit is contained in:
Sebastian Tschan 2020-05-22 19:54:46 +09:00
parent 6d1dd9b0a9
commit dbfc819e3f
No known key found for this signature in database
GPG Key ID: 4E0D23DC53601255
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/jquery.fileupload-ui.css
View File

@ -31,6 +31,15 @@
.files video {
max-width: 300px;
}
.files .name {
word-wrap: break-word;
overflow-wrap: anywhere;
-webkit-hyphens: auto;
hyphens: auto;
}
.files button {
margin-bottom: 5px;
}
.toggle[type='checkbox'] {
transform: scale(2);
margin-left: 10px;
@ -46,16 +55,14 @@
.files .btn span {
display: none;
}
.files .name {
width: 80px;
word-wrap: break-word;
}
.files audio,
.files video {
max-width: 80px;
}
.files img,
.files canvas {
max-width: 100%;
}
@media (max-width: 480px) {
.files .image td:nth-child(2) {
display: none;
}
}

24
index.html
View File

@ -213,14 +213,12 @@
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<tr class="template-upload fade{%=o.options.loadImageFileTypes.test(file.type)?' image':''%}">
<td>
<span class="preview"></span>
</td>
<td>
{% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
<p class="name">{%=file.name%}</p>
{% } %}
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
@ -253,7 +251,7 @@
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<tr class="template-download fade{%=file.thumbnailUrl?' image':''%}">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
@ -262,15 +260,13 @@
</span>
</td>
<td>
{% if (window.innerWidth > 480 || !file.thumbnailUrl) { %}
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% } %}
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}