I'm liking this, because it duplicates the way the images folder on Android phones works.
On Android the list of sub-folders in the images folder is compact, swipeable (or scrollable on desktop) and, importantly, if you have a sub-folder selected it always moves to the centre of the screen. This means you don't get lost. Not getting lost is good.
I never liked the default phpBB CP menu much, particularly on phones, so decided to see how hard it would be to emulate the Android style of menu. It turns out to be really easy. The amount of CSS and javascript required is very small, and it can all be done on default markup.
For CSS, all you need is this:Do note that it is necessary to
For the javascript, it's simply this:The onload event is the safest one to use here. I tried a few other tricks (DOMContentLoaded, etc), but the results weren't as good IMO.
Anyway, one Android style menu. You can swipe/scroll to any subsection, and when the target page loads the active subsection is centred on the screen. If you want one, you can have one.
On Android the list of sub-folders in the images folder is compact, swipeable (or scrollable on desktop) and, importantly, if you have a sub-folder selected it always moves to the centre of the screen. This means you don't get lost. Not getting lost is good.
I never liked the default phpBB CP menu much, particularly on phones, so decided to see how hard it would be to emulate the Android style of menu. It turns out to be really easy. The amount of CSS and javascript required is very small, and it can all be done on default markup.
For CSS, all you need is this:
Code:
.section-mcp .navigation,.section-ucp .navigation {position: relative;display: flex;padding: 0 0 .5em;font-size: 1.3rem;overflow-x: auto;overflow-y: clip;scrollbar-width: thin;scroll-behavior: smooth;border-bottom: 1px solid var(--groovetop);box-shadow: 0 2px 0 var(--groovebot);& hr {display: none;}& ul {display: flex;list-style: none;}& li {white-space: nowrap;}& a {display: block;padding: 0 8px;font-size: 1.3rem;line-height: 2.5rem;border: 1px solid #0000;}& a:hover, a:focus, .active-subsection a {background: var(--lightebac);background: linear-gradient(var(--groovebot) 9%, var(--darkerbac));border-color: var(--outsetbor);text-decoration: none;}}display: none; the default hr tags. They will screw things up if you don't. Most of the rest is necessary too (apart from the obvious eye candy).For the javascript, it's simply this:
Code:
{% if S_IN_UCP or S_IN_MCP %}<script>const nav = document.getElementById('navigation');const navWidth = nav.clientWidth;const navScroll = nav.scrollWidth;if (navWidth < navScroll) {const active = document.getElementById('active-subsection');const activeWidth = active.clientWidth;const activeLeft = active.offsetLeft;window.onload = (event) => {nav.scrollLeft += (activeLeft - ((navWidth - activeWidth) / 2))};}</script>{% endif %}Anyway, one Android style menu. You can swipe/scroll to any subsection, and when the target page loads the active subsection is centred on the screen. If you want one, you can have one.
Statistics: Posted by Gumboots — Sun Apr 13, 2025 9:49 am