diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css index 915b518..d276aa4 100644 --- a/core/modules/responsive_preview/css/responsive-preview.theme.css +++ b/core/modules/responsive_preview/css/responsive-preview.theme.css @@ -51,6 +51,10 @@ .toolbar .toolbar-tab-responsive-preview.tab .options .device.active { color: black; } +.toolbar .toolbar-tab-responsive-preview.tab .options .device[disabled] { + color: #ccc; + cursor: default; +} /* Toolbar tab triangle toggle. */ .toolbar-tab-responsive-preview .trigger:after { @@ -193,3 +197,7 @@ margin: 0; padding: 0.25em 0; } +#block-responsive-preview-controls .content .device[disabled] { + color: #ccc; + cursor: default; +} diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js index b55772a..2948f81 100644 --- a/core/modules/responsive_preview/js/responsive-preview.js +++ b/core/modules/responsive_preview/js/responsive-preview.js @@ -355,7 +355,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || { this.tabModel.set('isDeviceListOpen', false); } else { - this.tabModel.set('isDeviceListOpen', !this.model.get('isDeviceListOpen')); + this.tabModel.set('isDeviceListOpen', !this.tabModel.get('isDeviceListOpen')); } event.preventDefault(); @@ -805,6 +805,7 @@ function updateDeviceList () { var bleed = this.bleed; var viewportWidth = this.envModel.get('viewportWidth'); var $devices = this.$el.find('.device'); + var fittingDeviceCount = $devices.length; // Remove devices whose previews won't fit the current viewport. $devices.each(function (index, element) { @@ -813,10 +814,17 @@ function updateDeviceList () { var dppx = parseFloat($this.data('responsive-preview-dppx'), 10); var previewWidth = width / dppx; var fits = ((previewWidth + (gutter * 2) + (bleed * 2)) <= viewportWidth); - $this.parent('li').toggleClass('element-hidden', !fits); + if (!fits) { + fittingDeviceCount--; + } + // Set the button to disabled if the device doesn't fit in the current + // viewport. + // Toggle between the prop() and removeProp() methods. + $this.prop('disabled', !fits) + .attr('aria-disabled', !fits); }); // Set the number of devices that fit the current viewport. - this.model.set('fittingDeviceCount', $devices.parent('li').not('.element-hidden').length); + this.model.set('fittingDeviceCount', fittingDeviceCount); } /**