diff --git a/Resources/js/widget/file_upload.js b/Resources/js/widget/file_upload.js index 41dfb0acd81b67c852f9294c652ff611aa50a764..a3a12f985c1ddba69939759ecdcd367f151c1825 100644 --- a/Resources/js/widget/file_upload.js +++ b/Resources/js/widget/file_upload.js @@ -58,6 +58,8 @@ $this.find('.icon') .removeClass('fa-circle-o-notch fa-spin fa-file-o') .addClass('fa-exclamation-triangle'); + $this.find('.description').remove(); + $this.find('.id').remove(); }, updateDisplay = function() { var hasEntry = false; diff --git a/Resources/less/file_upload.less b/Resources/less/file_upload.less index f6c643181ccc0e048d29b318325607c7dbe67b92..d78dd3ee1dd2564964816470f92e1618e3bc0c8d 100644 --- a/Resources/less/file_upload.less +++ b/Resources/less/file_upload.less @@ -4,18 +4,17 @@ All rights reserved. */ @import "variables.less"; -@import "bootstrap/less/mixins.less"; .fileinput-entry { - .cancel, .delete { - margin-left: 0.5em; + & > * { + margin: 0 0.2em; } .description { display: inline; width: auto; height: auto; padding: @padding-xs-vertical @padding-xs-horizontal; - margin: 0; + //margin: 0; } .progress { height: (@line-height-computed / 2); @@ -24,9 +23,25 @@ All rights reserved. .progress-text { float: right; } + .error { + display: none; + } + .size { + &:before { content: '('; } + &:after { content: ')'; } + } &.alert { padding: @padding-xs-vertical @padding-xs-horizontal; margin-bottom: 0; + .name:after { + content: " :"; + } + .error { + display: inline; + } + .size, .description { + display: none; + } } } diff --git a/Resources/views/Form/file_upload.html.twig b/Resources/views/Form/file_upload.html.twig index 884b6693ebc6cf39aa83d33c8ba3cbcab1711fe8..1a6fd1e8dc4a91a4c27cec50b28ff27a0a66250e 100644 --- a/Resources/views/Form/file_upload.html.twig +++ b/Resources/views/Form/file_upload.html.twig @@ -2,8 +2,9 @@ {% block file_upload_progress_prototype %} <div class="template-upload fileinput-entry"> <div class="progress-text" style="display: none"></div> - <i class="fa fa-circle-o-notch fa-spin icon"></i> <span class="name"></span> (<span class="size"></span>) - <span class="error" style="display: none"></span> + <i class="fa fa-circle-o-notch fa-spin icon"></i> <span class="name"></span> + <span class="size"></span> + <span class="error"></span> <a href="#" class="danger cancel" title="{% trans %}button.cancel{% endtrans %}"> {{- irstea_icon('remove') -}} </a> @@ -19,12 +20,10 @@ <input class="id" type="hidden" name="{{ full_name }}{% if multiple %}[{{index|default('__index__')}}]{% endif %}[id]" value="{{ file.id|default }}"/> <i class="fa fa-file{% if file.icon|default(false) %}-{{ file.icon }}{% endif %}-o icon"></i> <span class="name"> <a{% if file %} href="{{ path('file_upload_get_content', {id: file.id, token: csrf_token}) }}"{% endif %}>{{ file.name|default }}</a> - </span> - (<span class="size"> - {{- file.size|default -}} - </span>) + </span> + <span class="size">{{ file.size|default }}</span> <input class="form-control description" type="text" placeholder="{% trans %}form.file_upload.description.placeholder{% endtrans %}" name="{{ full_name }}{% if multiple %}[{{index|default('__index__')}}]{% endif %}[description]" value="{{ file.description|default }}"/> - <span class="error danger" style="display: none">ERROR</span> + <span class="error"></span> <a href="#" class="danger delete {%- if disabled or read_only %} disabled{% endif -%}" title="{% trans %}button.delete{% endtrans %}"> {{- irstea_icon('remove') -}} </a>