From 952cb8065d6b76a32c7d0e621cd847600ec576b9 Mon Sep 17 00:00:00 2001 From: Michal Date: Thu, 19 Nov 2020 10:12:49 +0100 Subject: [PATCH 1/4] polaroid playlist: add class based on width --- css/flowplayer.css | 98 ++++++++++++++++++------- flowplayer/modules/appearance.module.js | 24 +++++- 2 files changed, 92 insertions(+), 30 deletions(-) diff --git a/css/flowplayer.css b/css/flowplayer.css index 513fee452..1a06f01ba 100644 --- a/css/flowplayer.css +++ b/css/flowplayer.css @@ -1395,6 +1395,76 @@ /* Polaroid Playlist */ +.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: 35.333333333333%; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-2 a:nth-child(2n+1) { + clear: both; +} + +.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-3 a:nth-child(2n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-3 a:nth-child(3n+1) { + clear: both; +} + +.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-4 a:nth-child(2n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-4 a:nth-child(3n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-4 a:nth-child(4n+1) { + clear: both; +} + +.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: 15%; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(2n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(3n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(4n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(5n+1) { + clear: both; +} + +.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: 10%; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(2n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(3n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(4n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(5n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(6n+1) { + clear: both; +} + .fp-playlist-external.fp-playlist-polaroid a, .entry-content .fp-playlist-external.fp-playlist-polaroid a { width: 47%; @@ -1822,35 +1892,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..4b315acb9 100644 --- a/flowplayer/modules/appearance.module.js +++ b/flowplayer/modules/appearance.module.js @@ -87,8 +87,28 @@ 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'); - else playlist.removeClass('is-wide'); + + // cleanup + playlist.removeClass('fp-playlist-items-per-row-2'); + playlist.removeClass('fp-playlist-items-per-row-3'); + playlist.removeClass('fp-playlist-items-per-row-4'); + playlist.removeClass('fp-playlist-items-per-row-5'); + playlist.removeClass('fp-playlist-items-per-row-6'); + playlist.removeClass('is-wide'); + + // add class based on playlist width + if( playlist.parent().width() < 250 ) { + playlist.addClass('fp-playlist-items-per-row-2'); + } else if( playlist.parent().width() >= 250 && playlist.parent().width() < 400 ) { + playlist.addClass('fp-playlist-items-per-row-3'); + } else if( playlist.parent().width() >= 400 && playlist.parent().width() < 600 ) { + playlist.addClass('fp-playlist-items-per-row-4'); + } else if( playlist.parent().width() >= 600 && playlist.parent().width() < 900 ) { + playlist.addClass('fp-playlist-items-per-row-5'); + } else if ( playlist.parent().width() >= 900 ) { + playlist.addClass('is-wide'); + playlist.addClass('fp-playlist-items-per-row-6'); + } }) }).trigger('resize'); From d726d1179c19da79c06e416f61a61a8b96c01807 Mon Sep 17 00:00:00 2001 From: fvmartin Date: Thu, 19 Nov 2020 14:25:11 +0100 Subject: [PATCH 2/4] polaroid playlist: add class based on width - improvements --- css/flowplayer.css | 57 +++++++++++++++++++++++-- flowplayer/modules/appearance.module.js | 44 +++++++++---------- 2 files changed, 75 insertions(+), 26 deletions(-) diff --git a/css/flowplayer.css b/css/flowplayer.css index 1a06f01ba..98731a081 100644 --- a/css/flowplayer.css +++ b/css/flowplayer.css @@ -1397,7 +1397,7 @@ .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: 35.333333333333%; + width: 47%; } .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-2 a:nth-child(2n+1) { clear: both; @@ -1430,7 +1430,7 @@ .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: 15%; + width: 17%; } .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(2n+1) { clear: none; @@ -1447,7 +1447,7 @@ .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: 10%; + width: 14%; } .fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(2n+1) { clear: none; @@ -1465,9 +1465,58 @@ clear: both; } +.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-7 a:nth-child(2n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(3n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(4n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(5n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(6n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(7n+1) { + clear: both; +} + +.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.fp-playlist-items-per-row-8 a:nth-child(2n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(3n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(4n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(5n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(6n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(7n+1) { + clear: none; +} +.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(8n+1) { + clear: both; +} + .fp-playlist-external.fp-playlist-polaroid a, .entry-content .fp-playlist-external.fp-playlist-polaroid a { - width: 47%; + width: 100%; display: inline-block; vertical-align: top; margin: 0 1% 2%; diff --git a/flowplayer/modules/appearance.module.js b/flowplayer/modules/appearance.module.js index 4b315acb9..c11fb5e02 100644 --- a/flowplayer/modules/appearance.module.js +++ b/flowplayer/modules/appearance.module.js @@ -86,30 +86,30 @@ flowplayer(function(api, root) { jQuery(window).on('resize tabsactivate',function(){ jQuery('.fp-playlist-external').each(function(){ - var playlist = jQuery(this); - - // cleanup - playlist.removeClass('fp-playlist-items-per-row-2'); - playlist.removeClass('fp-playlist-items-per-row-3'); - playlist.removeClass('fp-playlist-items-per-row-4'); - playlist.removeClass('fp-playlist-items-per-row-5'); - playlist.removeClass('fp-playlist-items-per-row-6'); - playlist.removeClass('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); - // add class based on playlist width - if( playlist.parent().width() < 250 ) { - playlist.addClass('fp-playlist-items-per-row-2'); - } else if( playlist.parent().width() >= 250 && playlist.parent().width() < 400 ) { - playlist.addClass('fp-playlist-items-per-row-3'); - } else if( playlist.parent().width() >= 400 && playlist.parent().width() < 600 ) { - playlist.addClass('fp-playlist-items-per-row-4'); - } else if( playlist.parent().width() >= 600 && playlist.parent().width() < 900 ) { - playlist.addClass('fp-playlist-items-per-row-5'); - } else if ( playlist.parent().width() >= 900 ) { - playlist.addClass('is-wide'); - playlist.addClass('fp-playlist-items-per-row-6'); + // add class based on playlist width + if ( width >= 900 ) { + playlist.addClass('is-wide'); + } else { + playlist.removeClass('is-wide'); + } } - }) + }); + }).trigger('resize'); flowplayer(function(api, root) { From 1c47398385cf5a3850e7421451de62ed436ac5b4 Mon Sep 17 00:00:00 2001 From: fvmartin Date: Thu, 19 Nov 2020 14:25:54 +0100 Subject: [PATCH 3/4] polaroid playlist: add class based on width --- flowplayer/modules/appearance.module.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/flowplayer/modules/appearance.module.js b/flowplayer/modules/appearance.module.js index c11fb5e02..79b8fa82d 100644 --- a/flowplayer/modules/appearance.module.js +++ b/flowplayer/modules/appearance.module.js @@ -100,13 +100,6 @@ jQuery(window).on('resize tabsactivate',function(){ var fit_thumbs = Math.floor(width/limit); if( fit_thumbs > 8 ) fit_thumbs = 8; playlist.addClass('fp-playlist-items-per-row-'+fit_thumbs); - - // add class based on playlist width - if ( width >= 900 ) { - playlist.addClass('is-wide'); - } else { - playlist.removeClass('is-wide'); - } } }); From 8e699e70033893cb2266d01cb9b454d70a84aaf7 Mon Sep 17 00:00:00 2001 From: fvmartin Date: Thu, 19 Nov 2020 14:33:56 +0100 Subject: [PATCH 4/4] polaroid playlist: add class based on width - simplifying --- css/flowplayer.css | 90 +++------------------------------------------- 1 file changed, 5 insertions(+), 85 deletions(-) diff --git a/css/flowplayer.css b/css/flowplayer.css index 98731a081..e7394b9c8 100644 --- a/css/flowplayer.css +++ b/css/flowplayer.css @@ -1394,129 +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-2 a:nth-child(2n+1) { - clear: both; -} .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-3 a:nth-child(2n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-3 a:nth-child(3n+1) { - clear: both; -} .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-4 a:nth-child(2n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-4 a:nth-child(3n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-4 a:nth-child(4n+1) { - clear: both; -} .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-5 a:nth-child(2n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(3n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(4n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-5 a:nth-child(5n+1) { - clear: both; -} .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-6 a:nth-child(2n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(3n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(4n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(5n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-6 a:nth-child(6n+1) { - clear: both; -} .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-7 a:nth-child(2n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(3n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(4n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(5n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(6n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-7 a:nth-child(7n+1) { - clear: both; -} .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.fp-playlist-items-per-row-8 a:nth-child(2n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(3n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(4n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(5n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(6n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(7n+1) { - clear: none; -} -.fp-playlist-external.fp-playlist-polaroid.fp-playlist-items-per-row-8 a:nth-child(8n+1) { - clear: both; -} .fp-playlist-external.fp-playlist-polaroid a, .entry-content .fp-playlist-external.fp-playlist-polaroid a { - width: 100%; + width: 150px; display: inline-block; vertical-align: top; margin: 0 1% 2%;