diff --git a/css/flowplayer.css b/css/flowplayer.css index 513fee452..e7394b9c8 100644 --- a/css/flowplayer.css +++ b/css/flowplayer.css @@ -1394,10 +1394,49 @@ #content .flowplayer a, .flowplayer a, .flowplayer a:hover { -wekbit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; border-bottom: 0 !important; text-decoration: none !important; } /* Polaroid Playlist */ +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-1 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-1 a { + width: 100%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-2 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-2 a { + width: 47%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-3 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-3 a { + width: 30.333333333333%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-4 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-4 a { + width: 22%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a { + width: 17%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a { + width: 14%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a { + width: 12%; +} + +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a, +.entry-content .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a { + width: 10.2%; +} .fp-playlist-external.fp-playlist-polaroid a, .entry-content .fp-playlist-external.fp-playlist-polaroid a { - width: 47%; + width: 150px; display: inline-block; vertical-align: top; margin: 0 1% 2%; @@ -1822,35 +1861,7 @@ article .entry-content .fvfp_admin_error p { line-height: 18px } .is-error.flowplayer .fp-player:before {background-size:20%} } - -@media screen and (min-width: 800px) { - .fp-playlist-external.fp-playlist-polaroid a, - .entry-content .fp-playlist-external.fp-playlist-polaroid a { - width: 30.333333333333%; - } - .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) { - clear: none; - } - .fp-playlist-external.fp-playlist-polaroid a:nth-child(3n+1) { - clear: both; - } -} - - @media screen and (min-width: 1020px) { - .fp-playlist-external.fp-playlist-polaroid a, - .entry-content .fp-playlist-external.fp-playlist-polaroid a { - width: 22%; - } - .fp-playlist-external.fp-playlist-polaroid a:nth-child(2n+1) { - clear: none; - } - .fp-playlist-external.fp-playlist-polaroid a:nth-child(3n+1) { - clear: none; - } - .fp-playlist-external.fp-playlist-polaroid a:nth-child(4n+1) { - clear: both; - } .fp-player a.fp-sticky { display: none; } diff --git a/flowplayer/modules/appearance.module.js b/flowplayer/modules/appearance.module.js index 4760cb631..79b8fa82d 100644 --- a/flowplayer/modules/appearance.module.js +++ b/flowplayer/modules/appearance.module.js @@ -86,10 +86,23 @@ flowplayer(function(api, root) { jQuery(window).on('resize tabsactivate',function(){ jQuery('.fp-playlist-external').each(function(){ - var playlist = jQuery(this); - if( playlist.parent().width() >= 900 ) playlist.addClass('is-wide'); + var playlist = jQuery(this), + width = playlist.parent().width(); + if( width >= 900 ) playlist.addClass('is-wide'); else playlist.removeClass('is-wide'); - }) + + if( playlist.hasClass('fp-playlist-polaroid') ) { + var limit = 150, + current_class = playlist.attr('class'); + + playlist.attr('class', current_class.replace(/ fp-playlist-items-per-row-\d+/,'') ); + + var fit_thumbs = Math.floor(width/limit); + if( fit_thumbs > 8 ) fit_thumbs = 8; + playlist.addClass('fp-playlist-items-per-row-'+fit_thumbs); + } + }); + }).trigger('resize'); flowplayer(function(api, root) {