Fallback for browsers that disables javascript

Conflicts:
	stylesheets/style.css
	templates/post_form.html
This commit is contained in:
marktaiwan 2015-03-18 18:44:47 +08:00 committed by czaks
parent d7f82c58fd
commit 3bd7f94861
3 changed files with 91 additions and 1 deletions

View File

@ -140,7 +140,8 @@ var dropHandlers = {
} }
}; };
$('.dropzone').css('user-select', 'none') // let jquery add browser specific prefix $('#upload input[type=file]').hide(); // hide the original file selector
$('.dropzone-wrap').css('user-select', 'none').show(); // let jquery add browser specific prefix
// attach handlers // attach handlers
$(document).on(dropHandlers, '.dropzone'); $(document).on(dropHandlers, '.dropzone');

View File

@ -959,3 +959,84 @@ span.pln {
cursor: pointer; cursor: pointer;
} }
#youtube-size input {
width: 50px;
}
/* File selector */
.dropzone {
color: #000;
cursor: default;
margin: auto;
padding: 0px 4px;
text-align: center;
min-height: 50px;
max-height: 140px;
transition: 0.2s;
background-color: rgba(200, 200, 200, 0.5);
overflow-y: auto;
}
.dropzone-wrap {
width: 100%;
}
.dropzone .file-hint {
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
position: relative;
margin-bottom: 5px;
padding: 10px 0px;
top: 5px;
transition: 0.2s;
border: 2px dashed rgba(125, 125, 125, 0.4);
}
.file-hint:hover, .dropzone.dragover .file-hint {
color: rgba(0, 0, 0, 1);
border-color: rgba(125, 125, 125, 0.8);
}
.dropzone.dragover {
background-color: rgba(200, 200, 200, 1);
}
.dropzone .file-thumbs {
text-align: left;
width: 100%;
}
.dropzone .tmb-container {
padding: 3px;
overflow-x: hidden;
white-space: nowrap;
}
.dropzone .file-tmb {
height: 40px;
width: 70px;
cursor: pointer;
display: inline-block;
text-align: center;
background-color: rgba(187, 187, 187, 0.5);
background-size: cover;
background-position: center;
}
.dropzone .file-tmb span {
font-weight: 600;
position: relative;
top: 13px;
}
.dropzone .tmb-filename {
display: inline-block;
vertical-align: bottom;
bottom: 12px;
position: relative;
margin-left: 5px;
}
.dropzone .remove-btn {
cursor: pointer;
color: rgba(125, 125, 125, 0.5);
display: inline-block;
vertical-align: bottom;
bottom: 10px;
position: relative;
margin-right: 5px;
font-size: 20px
}
.dropzone .remove-btn:hover {
color: rgba(125, 125, 125, 1);
}

View File

@ -98,6 +98,14 @@
</th> </th>
<td> <td>
<input type="file" name="file" id="upload_file"> <input type="file" name="file" id="upload_file">
<div class="dropzone-wrap" style="display: none;">
<div class="dropzone">
<div class="file-hint">Select/drop/paste files here</div>
<div class="file-thumbs"></div>
</div>
</div>
{% if config.allow_upload_by_url %} {% if config.allow_upload_by_url %}
<div style="float:none;text-align:left" id="upload_url"> <div style="float:none;text-align:left" id="upload_url">
<label for="file_url">{% trans %}Or URL{% endtrans %}</label>: <label for="file_url">{% trans %}Or URL{% endtrans %}</label>: