diff --git a/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css index 21e83c9..734f786 100644 --- a/core/themes/seven/css/components/dropzone.css +++ b/core/themes/seven/css/components/dropzone.css @@ -121,7 +121,6 @@ */ .dropzone-enabled table { margin: 10px 0; - table-layout: fixed; } .dropzone-enabled table tr td:nth-child(2), .dropzone-enabled table tr td:last-child { @@ -131,13 +130,37 @@ .dropzone-enabled table tr td:last-child { text-align: right; } +.field--widget-file-generic td .form-managed-file .form-item { + padding: 10px 0 0 0; +} +@media screen and (min-width: 414px) { + .field--widget-image-image td .image-widget-data .form-item { + padding-left: 27px; + } + + .field--widget-file-generic td .form-managed-file .form-item { + padding: 10px 0 0 27px; + } +} + .dropzone-enabled table tr th:nth-child(2), .dropzone-enabled table tr td:nth-child(2), .dropzone-enabled table tr th:last-child, .dropzone-enabled table tr td:last-child { - width: 45%; + width: 30%; white-space: nowrap; } + +.field--type-image .details-wrapper, +.field--type-file .details-wrapper { + overflow: auto; +} + +.dropzone-enabled table { + margin: 10px 0; + width: auto; +} + @media screen and (min-width: 414px) { .dropzone-enabled table tr th:last-child, .dropzone-enabled table tr td:last-child, @@ -146,7 +169,11 @@ width: 30%; white-space: nowrap; } + .dropzone-enabled table { + table-layout: fixed; + } } + @media screen and (min-width: 767px) { .dropzone-enabled table tr th:last-child, .dropzone-enabled table tr td:last-child, @@ -157,6 +184,9 @@ } } + + + .field--widget-image-image td .image-widget-data { float: none; } @@ -201,7 +231,7 @@ vertical-align: top; box-sizing: border-box; } -.managed-file { +span.ajax-new-content.managed-file { display: block; } .dropzone .has-file, @@ -255,17 +285,23 @@ .dropzone.empty .dropzone-trigger { display: table-cell; - background: url('../../../../misc/icons/bebebe/dropzone-new.svg') 0 center no-repeat; + background-position: 0 center; } + .dropzone .dropzone-trigger.is-hovering { - background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -100px center no-repeat; + background-position: -100px center; } .dropzone .dropzone-trigger.is-complete, .field--type-image .dropzone .dropzone-trigger.is-complete, .field--type-file .dropzone .dropzone-trigger.is-complete { - background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -200px center no-repeat; + background-position: -200px center; +} + + +.dropzone.empty .dropzone-trigger.is-complete { + background-position: 0 center; } .dropzone-description { @@ -308,10 +344,3 @@ background-image: none; } -.field--widget-image-image td .image-widget-data .form-item { - padding-left: 27px; -} - -.field--widget-file-generic td .form-managed-file .form-item { - padding: 10px 0 0 27px; -} diff --git a/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js index 03386a9..66871a5 100644 --- a/core/themes/seven/js/dropzone.js +++ b/core/themes/seven/js/dropzone.js @@ -3,7 +3,7 @@ 'use strict'; Drupal.behaviors.dropzone = { - attach: function (context, settings) { + attach: function (context) { var formFile = $(context).find('.js-form-file'); var detailsWrapper = $(context).find('.dropzone').parents('details'); @@ -43,22 +43,22 @@ .filter(function (instance) { if (instance && instance.element) { var element = $(instance.element); + return element.length > 0 && element.hasClass('upload-button') && element.once('magic').length > 0; } else { - return; + return null; } - return element.length > 0 && element.hasClass('upload-button') && element.once('magic').length > 0; }) .forEach(function (instance) { var element = $(instance.element); - element.closest('.dropzone').find('.js-upload-image').on('click', function() { + element.closest('.dropzone').find('.js-upload-image').on('click', function () { $(this).closest('.js-form-item').find('input[type="file"]').trigger('click'); }); var beforeSend = instance.beforeSend; element.bind('beforeSend', beforeSend); - instance.beforeSend = function(xmlhttprequest, options) { + instance.beforeSend = function (xmlhttprequest, options) { beforeSend.call(this, xmlhttprequest, options); element.trigger('beforeSend'); element.closest('.dropzone').find('.dropzone-trigger').addClass('is-hidden'); @@ -89,13 +89,12 @@ // If the focus hasn't be changed by the ajax commands, try to refocus the // triggering element or one of its parents if that element does not exist // anymore. + var target; if (!focusChanged && this.element && !$(this.element).data('disable-refocus')) { - var target = false; - + target = false; for (var n = elementParents.length - 1; !target && n > 0; n--) { target = document.querySelector('[data-drupal-selector="' + elementParents[n].getAttribute('data-drupal-selector') + '"]'); } - if (target) { $(target).trigger('focus'); }