Kookaburra menu behaviour

Backlight 4, 5 & 6 Support
#1

I may be running before the starting pistol has gone off but I’m trying to see where things get done in Kookaburra.
One thing I’ve noticed having cloned my Pangolin menu is the display is nothing like it (deliberate change in colour to give me a vsual reference when I preview the test page in browser.

Screenshot 2022-12-22 at 08.59.19
Screenshot 2022-12-22 at 08.59.192496×1328 191 KB

I tried to capture a still of the Pangolin menu but ended up with a video so best seen at www.tjowens.com
I see that Pallets don’t feature in the layout anymore and the ‘Hamburger’ menu items are not available when viewing in tablet or mobile mode. Is this something that is being dropped or scheduled for a later timebox?
If I’m jumping the gun then please tell me

#2

I can see and use the hamburger menu button on my iPad. The layout of the menu is not what I’m used to with Pangolin.

#4

I don’t see pallets on the Kookuburra road map

#5

I’m seeing the same menu behavior on my test site.

1 Like
#6

There’s this setting in the Navigation section:
image

Not sure what “Outdent Navigation” does, but by the name, it seems like it might cause what we’re seeing. So far I see no difference whether it’s on or off.
Edit: It moves the main nav menu, basically removing padding it looks like.

#7

I was doing a little playing with Kookaburra yesterday and noticed this myself. It made me wonder if there is any kind of post somewhere that explains the basics and the terminology it uses. I searched and looked but didn’t find anything. I realize it may be early in the game for that, but it never hurts to ask.

#8

Re: the mobile menu button. I’m finding that in Firefox, the hamburger menu lines are not appearing. The
The hamburger button background color shows though. Just not the lines.

#9

OK I’m seeing the hamburger without the lines

#10

I tried switching that on without changing any of the defaults and the Title crashed into the menu. Switching it off gave some breathing space to the First menu item

#11

I’ve just looked at the page in Chrome and Safari and the hamburger lines show up in those browsers but not Firefox.
Kookaburra test page

#12

First and most important thing, we’re team pancake over here. It’s a pancake menu.

Seems Firefox doesn’t like inline attributes on SVGs, which is utterly ridiculous. I’ll have this fixed in our next release, but use this CSS in the meantime:

use {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

For the menus, Kookaburra supports only one descendent. Please set your menus accordingly.

I feel that menus any deeper than that become tremendously unwieldy for keyboard users, and keyboard accessibility is a key tenant of Kookaburra. I have mentioned this in places in the docs, but I’m sure it’s easy to overlook.

#13

Oh, and I haven’t decided yet what’s up with columns/pallets yet. Not currently supported. May or may not be supported in the future.

Again, keyboard accessibility. In pangolin, it’s possible to put the navigation in the righthand column, and that’s not going to work for keyboard accessibility. We need to be able to tab into the navigation immediately, so cannot place the nav markup after the body markup. I could put the markup in the right order then use CSS to position it visually, but that the visual order wouldn’t be a match to the tab order, which is also a problem.

So whatever I end up with, I am separating navigation from pallets. If pallets happen in Kookaburra, they will differ from Pangolin.

#14

I’m partial to triple-decker burgers :wink:

#15

:rofl:Pancakes OK
OK. I’ve kicked the menu descendants into the long grass and the weird menu stuff has gone away.
I added the code snippet to my CSS file but can’t help thinking that something extra is required as there is a warning triangle against each line of that snippet. I’m not a coder so it might just be something simple to add as no pancakes show in my pancake button.
Happy to wait for the next release to sort that though. I keep CSS stuff to an absolute minimum.
Thanks. TomO

#16

I’ll watch out for the evolution here as my current Pangolin site makes use of the three columns for layout stuff.

#17

I’m seeing pancakes on your test page when shrunk down to mobile size.

#18

Hi Rod,
I’ve just looked at it on the MacBookPro and is visible but not so on the iMac.
I’ll poke around a bit more tomorrow.
Thanks.
TomO

#19

I’m looking on a Windows machine in Firefox, Chrome, etc. Also seeing the pancakes on my iPhone in Safari.

#20

Hi Rod,
I’ve done some more testing this morning. First on the iPhone8 iOS 16.2 Safari and the pancakes show up. If I click the pancake then the menu appears on the right hand side. If I select another menu item that takes me back to a pangolin page that works as expected but using the back button on the browser to get back to the test page the pancake displays differently.

IMG_93A13B1A8BD0-1
IMG_93A13B1A8BD0-1750×1334 137 KB

Initial look on phone

IMG_60FB4B3FA6AD-1
IMG_60FB4B3FA6AD-1750×1334 138 KB

Returning look with jade halo on phone

If I tap the blue area of the header then the outline of the pancake does not show.

IMG_3033.PNG
IMG_3033.PNG750×1334 124 KB

I have tested this in Monterey using Firefox on the iMAC (rebuilt from scratch a week ago today) and the same result.
Also the same result in Chrome.

Screenshot 2022-12-23 at 08.08.39
Screenshot 2022-12-23 at 08.08.39990×1594 136 KB

Chrome on iMac
The same behaviour in Windows 10 on Parallels using Firefox.

Maybe the display issues on both iPhone, iMac and Windows 10 are to do with moving back and forth from a Kookaburra related menu to Pangolin or maybe I’m just conjuring that idea up as a reason?
If I get an opportunity over the break I’ll try installing a fresh instance of Backlight in another of my domains that is purely Kookaburra.
Thanks.
TomO

#21

@Matthew will probably know for sure, but I think that’s just something the browser does.
It’s not happening on my iPhone (16.2)