diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index 8931dcd7d..6d6a2d194 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -126,6 +126,9 @@ this.canvas.empty(); this.buttons.empty(); + + this.$main.addClass( 'metadata-panel-is-closed' ) + .removeClass( 'metadata-panel-is-open' ); }; /** @@ -205,9 +208,11 @@ // cross-communication between panel and canvas, sort of this.$postDiv.on( 'mmv-metadata-open.lip', function () { - ui.$main.addClass( 'metadata-panel-is-open' ); + ui.$main.addClass( 'metadata-panel-is-open' ) + .removeClass( 'metadata-panel-is-closed' ); } ).on( 'mmv-metadata-close.lip', function () { - ui.$main.removeClass( 'metadata-panel-is-open' ); + ui.$main.removeClass( 'metadata-panel-is-open' ) + .addClass( 'metadata-panel-is-closed' ); } ); this.$wrapper.on( 'mmv-panel-close-area-click.lip', function () { ui.panel.scroller.toggle( 'down' ); diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index bab7cab50..9ef6db282 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -72,10 +72,10 @@ color: #555; padding: 0 0 @padding-right; font-size: 0.85em; - height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; // needs explicit height for text truncation logic - &.mw-mmv-ttf-untruncated { - height: auto; + .metadata-panel-is-closed { + height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; // needs explicit height for text truncation logic + line-height: @metadatabar-below-fold-pushup-height - @space-above-credit - @fold-separator-border-width; } &.empty { @@ -173,6 +173,13 @@ display: none; } + // Make sure the next list item is not visible when the + // metadata panel is closed + .metadata-panel-is-closed &.mw-mmv-license-li { + height: @metadatabar-below-fold-pushup-height - @space-above-credit; + line-height: @metadatabar-below-fold-pushup-height - @space-above-credit; + } + &:before { display: inline-block; vertical-align: middle;