Admin Layout Update - Tabs

hcgtv · 2015-06-25 09:50:19

Got my hands on the new admin layout, looks much more polished than Hive in 4.5.7.

Liking the expanded text areas for Pages and Forms – my eyes thank you.

The write tab looks just as good with it’s new expanded look, can’t wait to start writing blog posts.

What’s kind of hard to adjust to is the lack of tabs, I’ve always used the “Classic” look. One click to bounce from Pages to Forms, now it’s click for the drop down and then click again on the menu choice. It may seem trivial, but over the course of an afternoon’s coding session, it adds up.

I’m not asking for a “Classic” Hive, I can get used to using Hive, time to move on. It’s just years of ingrained habits, and maybe there are others who feel the same way who could get used to Hive easier if there was a way to have the best of both worlds.

Overall, really nice work, can’t wait to start using it as my daily driver.

Bloke · 2015-06-25 09:56:03

hcgtv wrote #292052:

now it’s click for the drop down and then click again on the menu choice.

That bugs me too, but I understand why it’s done that way for touch device support.

I’m used to right-clicking on the top-level menu and being able to open the default page from that group in a new browser tab, but that no longer works; it just opens the same page you’re currently on, which requires a further pair of clicks in the new tab to select the page you actually wanted. I’m having to retrain myself to left-click first, then middle-click the actual panel I want. Takes some getting used to as it’s an extra click either way. The endless march of the mobile *sigh*.

philwareham · 2015-06-25 10:40:49

There will still be a Classic theme, with tabs. It just won’t be responsive. I will work on it once Hive and the layout is more finalised otherwise I’m just chasing a moving target.

The Hive menu is the only way to get the two-tier navigation working satisfactorily on all devices including touch screens and keyboard-only. Believe me, I have looked at every way of navigating on this and other projects I’ve worked on and this was the most robust solution.

philwareham · 2015-06-25 10:43:08

Oh yeah, the new admin-side will be useable using keyboard-only navigation, for better accessibility.

towndock · 2015-06-25 10:45:26

hcgtv wrote #292052:

What’s kind of hard to adjust to is the lack of tabs, I’ve always used the “Classic” look.

This is a point I’ve been meaning to post about. HIVE is a beautiful admin interface, it is the only Textpattern interface that feels contemporary. However, the lack of tabs creates challenges for many of my customers. For my use – no problem. But when I hand a customer or writer a TXP login it is almost always limited (via bot_privs) to the content sections. That is the only place they play in. These non-tech users write content, upload images, upload files. Period.

In HIVE this means in effect everything is a drop down – it ends up being rather non-intuitive. It has forced me in several cases to go back to the Classic admin look, which except for the tabs is inferior in every way.

Bloke · 2015-06-25 11:02:31

philwareham wrote #292057:

I have looked at every way of navigating on this and other projects I’ve worked on and this was the most robust solution.

I’m going through the same pain with a site at work. It’s an e-commerce site so we want the top-tier menus to bring up a sub-menu on hover. But on touch devices, that doesn’t play well so we either have to have an entirely separate hamburger menu that has an “All thingies in this category” link as its first item, or compromise desktop users by making the top-level link accept a click to view the menu, sacrificing the ability to see all products in that category inside the menu, unless we add the “All” option there too which still takes you to a dedicated page, and all the bandwidth transfer overhead that entails.

The goal is to reduce clicks and appear intuitive. Seems these two things are at odds with one another. Allowing people to filter their search first without visiting another page is desirable, but the option to just say “go to the top level category page, I wanna browse” is equally valid.

The Currys site is a close approximation. They have two menus, one desktop that shows at widths >1024, and the other hamburger menu only shows below that, which is tap-to-navigate. This is all well and good but doesn’t cater for the touch-screen laptop crowd who have >1024 and tap capability.

If it’s possible to detect the type of input event (tap vs click), then it may be possible to do something different. Like, I dunno, hover menu appears if supported, follow the top-tier link to the ‘All Products In This Category’ anchor if clicked, but show sub-menu with an extra ‘All products’ tap target added on the fly if tapped. Is that even possible? I don’t know.

It’s a thorny issue, and I take towndock’s point about how it looks having a a single dropdown when every other group is hidden. It just looks a bit strange. Perhaps if there’s space and only one visible menu, we could spread the menu items out across the available width. Sounds tricky, but I’ve seen something similar done on Firebox. Notice how their menu items (uuhhh, sort of) progressively jump from being inline to appearing in the hamburger as the width decreases. Nice idea.

Last edited by Bloke (2015-06-25 11:09:27)

philwareham · 2015-06-25 11:17:08

I’m not changing the navigation menu. If others want to do a custom theme based on Hive with a different navigation method at some point then I will support that – I just won’t be doing it myself. It’s a headache I have already had and solved and have no desire to revisit. There is no way of determining touch versus click that I know of, at least not in the way you’d want.

My Mac has had menus that function in the same fashion as Hive for about 30 years and I’ve never found it unintuitive.

Edit: please bear in mind that any navigation method needs to be ARIA compliant and accessible via the keyboard too (I’m using Bootstrap’s menu script as it is both of those things).

Bloke · 2015-06-25 11:25:45

philwareham wrote #292061:

It’s a headache I have already had and solved

Yeah, it’s no fun.

There is no way of determining touch

Thanks for the link. That makes the decision on how to implement my menus easier. Sorry for wandering OT.

My Mac has had menus that function in the same fashion as Hive for about 30 years and I’ve never found it unintuitive.

True, but the Mac doesn’t support right-click on the menu bar so click-to-open makes perfect sense and feels natural. It’s just me. I’m trying to break the habit of five years of being under Windows with the ability to right-click as a shortcut to hop between the default panel under a different group.

Thumbs up for keyboard navigation, btw. That’ll speed things up no end as the issue goes away if the pointer is taken out of the equation.

philwareham · 2015-06-25 11:37:32

Bloke wrote #292062:

Thumbs up for keyboard navigation, btw. That’ll speed things up no end as the issue goes away if the pointer is taken out of the equation.

If you have ‘Tab to highlight each item on webpage’ on in your browser prefs (or similar, depending on browser) you can keyboard navigate the UI. For the nav menu once tabbed into it you can use the space or return to open dropdown, up/down arrow keys to choose an item, return to activate the link. Escape closes the dropdown.

Bloke · 2015-06-25 11:44:02

philwareham wrote #292063:

If you have ‘Tab to highlight each item on webpage’ on in your browser prefs (or similar, depending on browser) you can keyboard navigate the UI.

I do that already for some sites, but it’s sometimes slower for big menus so tend to shy away from it. I’ll try it out on Hive and see how I go as it may well be fast enough for me.

Think I misunderstood. When you said keyboard navigation I thought you meant keyboard access modifiers like ‘a’ then ‘p’ for Admin->Prefs and so forth.

hcgtv · 2015-06-25 15:43:55

philwareham wrote #292057:

The Hive menu is the only way to get the two-tier navigation working satisfactorily on all devices including touch screens and keyboard-only.

Tested it out on my Android tablet, the backend works great, I see your point.

hcgtv · 2015-06-30 13:13:24

Phil,

How stable is this branch compared to the dev branch?

I want to start redoing my “Themes” site, which is running Textpattern 4.4.1, with the latest Textpattern code.

Really liking the new Pages, Forms and Write tabs, a huge time saver when working with “Themes”. I keep adding quotes to remind me it’s “Themes” now, not “Templates”.

Textpattern CMS

Textpattern CMS support forum

#1 2015-06-25 09:50:19