[WIP/Public beta] Apocalypse theme

[JBlaze]

Ant, I thought you were done creating stuff for this theme

[Antechinus]

Yeah well you know how it is.

[JBlaze]

Yeah well you know how it is.

Tell me about it. I actually rejoined the team when I said I never would again

[Antechinus]

Oh FFS, that's really sinking to new depths.

[live627]

lmao

[Antechinus]

Here ya go. Another example of me being finished with making stuff for stupid theme.

I suddenly realised, while taking a break from coding up the XML for the page index mod, that my nifty collapsing main menu on small screens would work much better as a two column setup. Fits twice the buttons in the same height, and after a bit of tweaking of the drop menus is still perfectly usable.

It's currently running a 12 button main menu, not counting the unread and new replies buttons (they're not actually part of the main menu) and there's easily enough height on a standard iThing screen to take 20 buttons (if you're mental enough to run 20 buttons in your main menu).

So why not just use tiny icons that have no descriptions of what the hell they do, I hear your ask? Everyone is using tiny icons that have no description of what the hell they do, so obviously this must be the best idea ever, right?

Umm, not necessarily. I've seen and heard people grumbling about tiny icons which have no description of what the hell they do. I'm not that keen on them myself either. Some people like having a menu that tells you what all the buttons do. Some people are weird like that.

Oh and messing around with this made me realise I could dramatically simplify the code for my old centered menu mod, as well as easily making that responsive.

Then there's the collapsing sidebar menu for admin etc, which works much the same way. I've decided I'm actually going to ditch the "new" 2.0.x drop menu system from admin, etc and just run the sidebar (which obviously has second level flyouts to offer the same functionality, but with a more informative top level). I think one top level menu with one level of flyouts/drop menus is fine, but when you get to two or three levels of flyouts it gets to be a PITA to remember where everything is. Since there's no need for that crap, even on phones, I can't see the point of keeping it.

I suppose I could even sort the old mod to include all this stuff. Wouldn't be difficult.

[Antechinus]

So I'm still working on the install XML for the page index mod, but also did a bit more faffing around with menus. First thing I did was to realise the nifty collapsing code for the sidebar and main menu would default to collapsed if javascript went down the chute for any reason. Umm, no menu at all no good.

So, I switched the code around so it will fail to an expanded menu if js vanishes. It'll hog some screen space, but at least you'll have a menu. Usability FTW.

Some people probably like the default admin drop menus even if I don't. I was too lazy to get rid of them from the template and Sources so thought of something else. I made them into a dropline menu for screens of 800 or less so that all content stays within the screen boundaries, then at 480 width they pick up the same CSS as the main menu and go to the same two column layout. This seems to give the most compact and least confusing layout on a small screen.

Due to many admin sections having a large number of third level links, I also made the admin third level menu the full width of the screen with the links inside that also being in two columns. The positioning gets tweaked according to whether the parent link is in the left or right column. This is done just by using nth-child(even) on the parent li's.

Code Select Expand

#admin_menu .menulevel3 {
top: 100%;
left: -1%;
width: 210%;
}
#admin_menu .listlevel2:nth-child(even) .menulevel3 {
left: auto;
right: -5%;
}

[Bloc]

Hey idea. I can combine this with tweaks to the next/previous topics links. All it needs is an extra span dropped into div.nextlinks, holding the default $txt['board_topics'], and then it can use the same CSS to style the previous/next topics stuff as well as the page index, which will save on CSS. Also means no hacking of language strings required. Keep those for a11y, and just hide them with text-indent.

Good thing about this is that the new topics stuff will be more compact, so can fit on the same line as the page index even on a 320 wide screen, and will make it clear which previous/next links do what.

I haven't fully delved into it yet, but the premise is great. I will prob. just do my own version of it, learning how to and all that.

Another concept I been thinking about when reading this, is simply using "next" and "prev" only..with a small icon to put up the select box or input box in a popup. If you think about it..when a page have many pages, all you really need is either 1) next/prev page or 2) you guess what page its in. But here it might be better to re-think what you actually might need, like "go half" or "go 10 pages ahead". Even when using a dropdown menu/selectbox you will end up with a lot of scrolling if pages are 40+. Using just < > and 10+ and 10-, plus a icon for an input bx might be better to operate, especially on touch devices. Gonna try it out.

[Antechinus]

That's a bloody good idea too.