diff --git a/.gitignore b/.gitignore index 65d69ba..ae1e509 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ -.nova -config.codekit -config.codekit3 \ No newline at end of file +.nova +config.codekit +config.codekit3 +prepros.config diff --git a/admin-bar-wrap-fix.css b/admin-bar-wrap-fix.css index 4845013..7ed1f8c 100644 --- a/admin-bar-wrap-fix.css +++ b/admin-bar-wrap-fix.css @@ -1,5 +1,5 @@ -@media screen and (min-width: 782px) { #wpadminbar .quicklinks { justify-content: space-between; } #wpadminbar .quicklinks > ul > li { float: none !important; } #wpadminbar .quicklinks > ul > li, #wpadminbar .quicklinks .ab-item { white-space: nowrap; text-overflow: ellipsis; min-width: 0 !important; } #wpadminbar .quicklinks .ab-item { overflow: hidden; } #wpadminbar .quicklinks .ab-item .ab-label, #wpadminbar .quicklinks .ab-item .display-name { float: none; display: inline; } #wpadminbar .quicklinks, #wpadminbar .quicklinks > ul { display: -ms-flexbox; display: flex; flex-wrap: nowrap; -ms-flex-wrap: nowrap; min-width: 0 !important; } #wpadminbar #wp-admin-bar-top-secondary { flex-direction: row-reverse; -ms-flex-direction: row-reverse; } } - -@media screen and (max-width: 782px) { #wpcontent { padding-top: 15px; } #wpadminbar { display: flex; flex-wrap: nowrap; padding-bottom: 15px; overflow-x: scroll; overflow-y: hidden; } #wpadminbar > *, #wpadminbar .ab-top-menu { display: flex; flex-wrap: nowrap; } #wpadminbar .ab-sub-wrapper { display: none !important; } } - +@media screen and (min-width: 782px) { #wpadminbar .quicklinks { justify-content: space-between; } #wpadminbar .quicklinks > ul > li { float: none !important; } #wpadminbar .quicklinks > ul > li, #wpadminbar .quicklinks .ab-item { white-space: nowrap; text-overflow: ellipsis; min-width: 0 !important; } #wpadminbar .quicklinks .ab-item { overflow: hidden; } #wpadminbar .quicklinks .ab-item .ab-label, #wpadminbar .quicklinks .ab-item .display-name { float: none; display: inline; } #wpadminbar .quicklinks, #wpadminbar .quicklinks > ul { display: -ms-flexbox; display: flex; flex-wrap: nowrap; -ms-flex-wrap: nowrap; min-width: 0 !important; } #wpadminbar #wp-admin-bar-top-secondary { flex-direction: row-reverse; -ms-flex-direction: row-reverse; } } + +@media screen and (max-width: 782px) { #wpcontent { padding-top: 15px; } #wpadminbar { display: flex; flex-wrap: nowrap; padding-bottom: 15px; overflow-x: scroll; overflow-y: hidden; } #wpadminbar > *, #wpadminbar .ab-top-menu { display: flex; flex-wrap: nowrap; } #wpadminbar .ab-sub-wrapper { display: none !important; } } + /*# sourceMappingURL=admin-bar-wrap-fix.css.map */ \ No newline at end of file diff --git a/admin-bar-wrap-fix.css.map b/admin-bar-wrap-fix.css.map index bc13084..412af20 100644 --- a/admin-bar-wrap-fix.css.map +++ b/admin-bar-wrap-fix.css.map @@ -1,9 +1,9 @@ -{ - "version": 3, - "file": "admin-bar-wrap-fix.css", - "sources": [ - "admin-bar-wrap-fix.scss" - ], - "names": [], - "mappings": "AAAA,MAAM,8BAGJ,GADD,AACC,WADU,CACV,WAAW,CAAC,EACX,eAAe,EAAE,aAAa,GAkB9B,CApBF,AAGE,WAHS,CACV,WAAW,GAER,EAAE,GAAG,EAAE,CAAC,EACT,KAAK,EAAE,eAAe,GACtB,CALH,AAME,WANS,CACV,WAAW,GAKR,EAAE,GAAG,EAAE,EANX,WAAW,CACV,WAAW,CAMV,QAAQ,CAAC,EACR,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,YAAY,GACvB,CAXH,AAYE,WAZS,CACV,WAAW,CAWV,QAAQ,CAAC,EACR,QAAQ,EAAE,MAAM,GAMhB,CAnBH,AAcG,WAdQ,CACV,WAAW,CAWV,QAAQ,CAEP,SAAS,EAdZ,WAAW,CACV,WAAW,CAWV,QAAQ,CAGP,aAAa,CAAC,EACb,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,MAAM,GACf,CAlBJ,AAqBC,WArBU,CAqBV,WAAW,EArBZ,WAAW,CAsBV,WAAW,GAAG,EAAE,CAAC,EAChB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,YAAY,GACvB,CA5BF,AA6BC,WA7BU,CA6BV,2BAA2B,CAAC,EAC3B,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,WAAW,GAC/B,EAZA;;AAeH,MAAM,8BAEL,GAAA,AAAA,UAAU,CAAC,EACV,WAAW,EAAE,IAAI,GACjB,CACD,AAAA,WAAW,CAAC,EACX,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,IAAI,EACpB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GASlB,CAdD,AAMC,WANU,GAMR,CAAC,EANJ,WAAW,CAOV,YAAY,CAAC,EACZ,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,GACjB,CAVF,AAWC,WAXU,CAWV,eAAe,CAAC,EACf,OAAO,EAAE,eAAe,GACxB,EAdD" +{ + "version": 3, + "file": "admin-bar-wrap-fix.css", + "sources": [ + "admin-bar-wrap-fix.scss" + ], + "names": [], + "mappings": "AAAA,MAAM,8BAGJ,GADD,AACC,WADU,CACV,WAAW,CAAC,EACX,eAAe,EAAE,aAAa,GAkB9B,CApBF,AAGE,WAHS,CACV,WAAW,GAER,EAAE,GAAG,EAAE,CAAC,EACT,KAAK,EAAE,eAAe,GACtB,CALH,AAME,WANS,CACV,WAAW,GAKR,EAAE,GAAG,EAAE,EANX,WAAW,CACV,WAAW,CAMV,QAAQ,CAAC,EACR,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,YAAY,GACvB,CAXH,AAYE,WAZS,CACV,WAAW,CAWV,QAAQ,CAAC,EACR,QAAQ,EAAE,MAAM,GAMhB,CAnBH,AAcG,WAdQ,CACV,WAAW,CAWV,QAAQ,CAEP,SAAS,EAdZ,WAAW,CACV,WAAW,CAWV,QAAQ,CAGP,aAAa,CAAC,EACb,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,MAAM,GACf,CAlBJ,AAqBC,WArBU,CAqBV,WAAW,EArBZ,WAAW,CAsBV,WAAW,GAAG,EAAE,CAAC,EAChB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,YAAY,GACvB,CA5BF,AA6BC,WA7BU,CA6BV,2BAA2B,CAAC,EAC3B,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,WAAW,GAC/B,EAZA;;AAeH,MAAM,8BAEL,GAAA,AAAA,UAAU,CAAC,EACV,WAAW,EAAE,IAAI,GACjB,CACD,AAAA,WAAW,CAAC,EACX,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,IAAI,EACpB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GASlB,CAdD,AAMC,WANU,GAMR,CAAC,EANJ,WAAW,CAOV,YAAY,CAAC,EACZ,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,GACjB,CAVF,AAWC,WAXU,CAWV,eAAe,CAAC,EACf,OAAO,EAAE,eAAe,GACxB,EAdD" } \ No newline at end of file diff --git a/admin-bar-wrap-fix.php b/admin-bar-wrap-fix.php index e7eff85..994b617 100755 --- a/admin-bar-wrap-fix.php +++ b/admin-bar-wrap-fix.php @@ -1,28 +1,28 @@ - ul > li { - float: none !important; - } - > ul > li, - .ab-item { - white-space: nowrap; - text-overflow: ellipsis; - min-width: 0 !important; - } - .ab-item { - overflow: hidden; - .ab-label, - .display-name { - float: none; - display: inline; - } - } - } - .quicklinks, - .quicklinks > ul { - display: -ms-flexbox; - display: flex; - flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - min-width: 0 !important; - } - #wp-admin-bar-top-secondary { - flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - } - } -} -@media screen and (max-width: 782px) { - // Prevent wrapping of admin bar that has more items than admin bar area on mobile layout - #wpcontent { - padding-top: 15px; // Browser scrollbar dimension per https://codepen.io/sambible/post/browser-scrollbar-widths(with the overflow-y:hidden; handling the difference between them) - } - #wpadminbar { - display: flex; - flex-wrap: nowrap; - padding-bottom: 15px; // Browser scrollbar dimension per https://codepen.io/sambible/post/browser-scrollbar-widths (with the overflow-y:hidden; handling the difference between them) - overflow-x: scroll; - overflow-y: hidden; - > *, - .ab-top-menu { - display: flex; - flex-wrap: nowrap; - } - .ab-sub-wrapper { - display: none !important; - } - } -} +@media screen and (min-width: 782px) { + // Prevent wrapping of admin bar that has more items than admin bar area on desktop/tablet layout + #wpadminbar { + .quicklinks { + justify-content: space-between; + > ul > li { + float: none !important; + } + > ul > li, + .ab-item { + white-space: nowrap; + text-overflow: ellipsis; + min-width: 0 !important; + } + .ab-item { + overflow: hidden; + .ab-label, + .display-name { + float: none; + display: inline; + } + } + } + .quicklinks, + .quicklinks > ul { + display: -ms-flexbox; + display: flex; + flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + min-width: 0 !important; + } + #wp-admin-bar-top-secondary { + flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + } + } +} +@media screen and (max-width: 782px) { + // Prevent wrapping of admin bar that has more items than admin bar area on mobile layout + #wpcontent { + padding-top: 15px; // Browser scrollbar dimension per https://codepen.io/sambible/post/browser-scrollbar-widths(with the overflow-y:hidden; handling the difference between them) + } + #wpadminbar { + display: flex; + flex-wrap: nowrap; + padding-bottom: 15px; // Browser scrollbar dimension per https://codepen.io/sambible/post/browser-scrollbar-widths (with the overflow-y:hidden; handling the difference between them) + overflow-x: scroll; + overflow-y: hidden; + > *, + .ab-top-menu { + display: flex; + flex-wrap: nowrap; + } + .ab-sub-wrapper { + display: none !important; + } + } +} diff --git a/readme.txt b/readme.txt index 25343f9..d7f92a2 100644 --- a/readme.txt +++ b/readme.txt @@ -1,160 +1,172 @@ -=== Admin Bar Wrap Fix === -Contributors: KZeni -Donate link: https://www.paypal.me/KZeni -License: GPLv3 -Tags: Admin Bar, adminbar, ui, ui fix, overflow, wrapping -Stable tag: 1.2.4 -Tested up to: 6.1 -Requires at least: 4.6 -Requires PHP: 5.4 - -Fixes the wrap behavior of the WordPress admin bar when it has too many items. Keep it neat; don't spill/overflow into the content. - -== Description == - -Fixes the wrap behavior of the WordPress admin bar when it has too many items. Keep it neat; don't spill/overflow into the content. - -Check things out on GitHub at [https://github.com/KZeni/Admin-Bar-Wrap-Fix](https://github.com/KZeni/Admin-Bar-Wrap-Fix) - -== Frequently Asked Questions == - -= Shouldn't this be fixed within WordPress itself? = - -I would think so. This has been submitted as a patch at [core ticket #44438](https://core.trac.wordpress.org/ticket/28983) & [core GitHub pull request #1082](https://github.com/WordPress/wordpress-develop/pull/1082), but I figured it would still be beneficial as a plugin to solve things for people in the meantime. - -== Screenshots == - -1. Too many items to show with plugin (it at least shows the left icon & truncates text as needed). -2. Fewer items shown with plugin (shows normally). -3. What WordPress currently does without this plugin (overlapping items hijack hover and makes things inaccessible, and the user experience is generally broken). - -== Changelog == - -= 1.2.4 = - -Released October 31st, 2022 - -* Confirmed WordPress 6.1 compliance. - -= 1.2.3 = - -Released May 6th, 2022 - -* Confirmed WordPress 6.0 compliance. - -= 1.2.2 = - -Released January 24th, 2022 - -* Confirmed WordPress 5.9 compliance. - -= 1.2.1 = - -Released July 12th, 2021 - -* Confirmed WordPress 5.8 compliance. - -= 1.2 = - -Released May 31st, 2021 - -* Mobile admin bar is now accounted for as plugins have recently been adding their own items to the mobile menu as well & potentially causing items wrap onto a new line outside of the admin bar given the available space. Instead of wrapping to overlap the actual content, it simply offers a horizontal scroll for when there are too many items to show on screen at once (keeping the items all within the admin bar's one row of icons.) - -= 1.1 = - -Released March 25th, 2021 - -* Removed an unnecessary truncation. -* Made the CSS code smaller & simpler. -* Updated info to point to the current WordPress Core [Trac ticket](https://core.trac.wordpress.org/ticket/28983) and [GitHub pull request](https://github.com/WordPress/wordpress-develop/pull/1082). - -= 1.0.7 = - -Released March 3rd, 2021 - -* Confirmed WordPress 5.7 compliance. - -= 1.0.6 = - -Released November 23rd, 2020 - -* Confirmed WordPress 5.6 compliance. - -= 1.0.5 = - -Released August 14th, 2020 - -* Added GPLv3 license declaration to the plugin details. - -= 1.0.4 = - -Released August 3rd, 2020 - -* Made it so the stylesheet is only included when the admin bar is being shown. -* Updated to confirm WordPress 5.5 compatibility. Minor plugin metadata updates. - -= 1.0.3 = - -Released June 22nd, 2020 - -* Updated to confirm WordPress 5.4.2 compatibility. Minor plugin metadata updates. - -= 1.0.2 = - -Released March 6th, 2020 - -* Updated to confirm WordPress 5.4 compatibility. - -= 1.0.1 = - -Released January 9th, 2020 - -* Added GitHub info to description. - -= 1.0.0 = - -Released January 9th, 2020 - -* Implemented further CSS refinements (thanks, [@lunacodes](https://profiles.wordpress.org/lunacodes/)). -* Bumped to 1.0.0 given the positive feedback, growing usage, and lack of anyone reporting any bugs along the way. - -= 0.9.3 = - -Released December 9th, 2018 - -* Updated to confirm WordPress 5.0 compatibility. - -= 0.9.2 = - -Released August 15th, 2018 - -* Got the plugin listed & working on the WP.org plugin repository. - -= 0.9.1 = - -Released August 13th, 2018 - -* Implemented all necessary assets and submitted to WP.org plugin repository. - -= 0.9 = - -Released July 30th, 2018 - -* Packaged as a plugin. - -= 0.5 = - -Released July 6th, 2018 - -* Updated version of the original Patch for admin-bar.css to make it friendly for admin bars which don't have too many items shown. - -= 0.1 = - -Released June 22nd, 2018 - -* Initial implementation via [core ticket #44438](https://core.trac.wordpress.org/ticket/44438). - -== Upgrade Notice == - -= 0.9.2 = -This version is the first one available via the WP.org plugin repository. As such, this should be the starting point rather than using older versions/implementations. +=== Admin Bar Wrap Fix === +Contributors: KZeni +Donate link: https://www.paypal.me/KZeni +License: GPLv3 +Tags: Admin Bar, adminbar, ui, ui fix, overflow, wrapping +Stable tag: 1.2.6 +Tested up to: 6.3 +Requires at least: 4.6 +Requires PHP: 5.4 + +Fixes the wrap behavior of the WordPress admin bar when it has too many items. Keep it neat; don't spill/overflow into the content. + +== Description == + +Fixes the wrap behavior of the WordPress admin bar when it has too many items. Keep it neat; don't spill/overflow into the content. + +Check things out on GitHub at [https://github.com/KZeni/Admin-Bar-Wrap-Fix](https://github.com/KZeni/Admin-Bar-Wrap-Fix) + +== Frequently Asked Questions == + += Shouldn't this be fixed within WordPress itself? = + +I would think so. This has been submitted as a patch at [core ticket #44438](https://core.trac.wordpress.org/ticket/28983) & [core GitHub pull request #1082](https://github.com/WordPress/wordpress-develop/pull/1082), but I figured it would still be beneficial as a plugin to solve things for people in the meantime. + +== Screenshots == + +1. Too many items to show with plugin (it at least shows the left icon & truncates text as needed). +2. Fewer items shown with plugin (shows normally). +3. What WordPress currently does without this plugin (overlapping items hijack hover and makes things inaccessible, and the user experience is generally broken). + +== Changelog == + += 1.2.6 = + +Released July 24th, 2023 + +* Confirmed WordPress 6.3 compliance. + += 1.2.5 = + +Released March 20th, 2023 + +* Confirmed WordPress 6.2 compliance. + += 1.2.4 = + +Released October 31st, 2022 + +* Confirmed WordPress 6.1 compliance. + += 1.2.3 = + +Released May 6th, 2022 + +* Confirmed WordPress 6.0 compliance. + += 1.2.2 = + +Released January 24th, 2022 + +* Confirmed WordPress 5.9 compliance. + += 1.2.1 = + +Released July 12th, 2021 + +* Confirmed WordPress 5.8 compliance. + += 1.2 = + +Released May 31st, 2021 + +* Mobile admin bar is now accounted for as plugins have recently been adding their own items to the mobile menu as well & potentially causing items wrap onto a new line outside of the admin bar given the available space. Instead of wrapping to overlap the actual content, it simply offers a horizontal scroll for when there are too many items to show on screen at once (keeping the items all within the admin bar's one row of icons.) + += 1.1 = + +Released March 25th, 2021 + +* Removed an unnecessary truncation. +* Made the CSS code smaller & simpler. +* Updated info to point to the current WordPress Core [Trac ticket](https://core.trac.wordpress.org/ticket/28983) and [GitHub pull request](https://github.com/WordPress/wordpress-develop/pull/1082). + += 1.0.7 = + +Released March 3rd, 2021 + +* Confirmed WordPress 5.7 compliance. + += 1.0.6 = + +Released November 23rd, 2020 + +* Confirmed WordPress 5.6 compliance. + += 1.0.5 = + +Released August 14th, 2020 + +* Added GPLv3 license declaration to the plugin details. + += 1.0.4 = + +Released August 3rd, 2020 + +* Made it so the stylesheet is only included when the admin bar is being shown. +* Updated to confirm WordPress 5.5 compatibility. Minor plugin metadata updates. + += 1.0.3 = + +Released June 22nd, 2020 + +* Updated to confirm WordPress 5.4.2 compatibility. Minor plugin metadata updates. + += 1.0.2 = + +Released March 6th, 2020 + +* Updated to confirm WordPress 5.4 compatibility. + += 1.0.1 = + +Released January 9th, 2020 + +* Added GitHub info to description. + += 1.0.0 = + +Released January 9th, 2020 + +* Implemented further CSS refinements (thanks, [@lunacodes](https://profiles.wordpress.org/lunacodes/)). +* Bumped to 1.0.0 given the positive feedback, growing usage, and lack of anyone reporting any bugs along the way. + += 0.9.3 = + +Released December 9th, 2018 + +* Updated to confirm WordPress 5.0 compatibility. + += 0.9.2 = + +Released August 15th, 2018 + +* Got the plugin listed & working on the WP.org plugin repository. + += 0.9.1 = + +Released August 13th, 2018 + +* Implemented all necessary assets and submitted to WP.org plugin repository. + += 0.9 = + +Released July 30th, 2018 + +* Packaged as a plugin. + += 0.5 = + +Released July 6th, 2018 + +* Updated version of the original Patch for admin-bar.css to make it friendly for admin bars which don't have too many items shown. + += 0.1 = + +Released June 22nd, 2018 + +* Initial implementation via [core ticket #44438](https://core.trac.wordpress.org/ticket/44438). + +== Upgrade Notice == + += 0.9.2 = +This version is the first one available via the WP.org plugin repository. As such, this should be the starting point rather than using older versions/implementations.