@Davis, I've started making my way through adding a global nav bar with your extension. Thank you for creating this extension, because it was our most needed (but missing) puzzle piece for so far. I'm kind of almost there, but I'm having some trouble. I feel like I'm fixing an airplane engine without the service manual; i.e. I think this extension is going to be hard for most people to grasp and use. So I'd like to give you some observations so far, which you may take or leave.
For perspective, I'm not a developer, but I am pretty good with HTML and CSS. Flarum already frustrates me a bit by requiring me to work with overrides on the CSS instead of with the CSS itself (most open source doesn't restrict you like that). The same goes with modifying the template structure, which is quite verbose. For example, I find the naming convention of selectors to not make sense; there's a lot of semantic overlap and similarity to the point it's impossible to know what one is working on by selector names alone. All-in-all a bit of a chore.
But then, just when I think I've got all my overrides mostly in place and working against the core template (I'll be screwed if devs ever change template structure and whacky selector names), along comes an extension that changes the core template structure, making what should be fundamental CSS tweaks a huge challenge against the already challenging process of having to use overrides.
Maybe it's just me and my tendency to want to make things jive with the core template as much as possible, and make CSS fiddling as easy as possible in relation, because that's what's going to dictate any future modifications, presumably, changes to the core template.
In that light I'm not sure it's a good idea to modify the core template DOM when it already has a placeholder for inserting a global navigation bar:
<header>
<div id="header-navigation" class="Header-navigation">
EXTENSION HTML GOES HERE
</div>
</header>
Nothing else about the core template needs to be changed. Then your Extension would simply insert a new div in there with a single new selector, nothing more:
<div id="header-navigation" class="Header-navigation">
<div id="extGlobalNav">
</div>
</div>
Then anyone can add their own HTML in that <div id="extGlobalNav"> as needed, and all CSS focus for this extension centers around adjustments in relation to that single block.
In my case, I'm adding two additional blocks which I had already made override CSS adjustments for (just needed a div to drop markup into):
<div id="header-navigation" class="Header-navigation">
<div id="extGlobalNav">
<div class="identity"> logo elements </div>
<nav class="superior"> global nav elements </nav>
</div>
</div>
By contrast, you've added your custom block (<div id="customHeader">) outside and above the core placeholder location, and introduced a new wrapper block (<div id="flaremHeader">) around other elements that don't have anything to do with your extension, that I can tell. I guess I can safely ignore that one, but then what was the point of adding it?
All that said, I've almost got it figure out, but I'm hitting a wall with Flarum's <div class="Navigation ButtonGroup">, which is suddenly out of place with your extension; pushing down and causing big gaps. Figuring out where this spatial intrusion comes from is the kind of hunt-and-peck headache that might be avoided if the extension doesn't modify the core template at all.
In fact, while working with your extension, I realized for the first time that div is in the template twice(!?), which I know is not caused by your extension, but it's confusing me all the more. The first instance is here:
<div id="app-navigation" class="App-navigation">
<div class="Navigation ButtonGroup App-backControl">
<a class="Button Navigation-back hasIcon" href="/" active="false" type="button">
</div>
</div>
And the second instance is here, with only a class difference:
<div id="header-navigation" class="Header-navigation">
<div class="Navigation ButtonGroup">
<a class="Button Navigation-back hasIcon" href="/" active="false" type="button">
</div>
</div>
The first instance of class="Navigation ButtonGroup App-backControl" makes sense considering the button's position (top-left corner of the header complex). But it's the second instance, in fact, that seems to be controlling that menu/button's appearance, according to my browser's dev tools. I guess that's a question for the core devs as to why there's duplication there, but as it concerns this extension, can the second instance be dropped and the focus be put on the first instance?
What I'm having to try now, in order to get the class="Navigation ButtonGroup menu/button back in its expected position, is use absolute positioning (which wasn't needed before), and it's not really working yet. That's where I'm fiddling currently.
Btw, a bit of a semantic nit-pick here: To my mind, Flarum already has a "header"; it's a bowl of tag/selector soup, but there is a header already. What your extension is adding is the only thing that's actually missing: a global identity/navigation bar. It's probably too late to change the extension's name to something more specific and clear (e.g. "Global Nav"), but you might consider using more specificity in the extension itself, such as using id=extGlobalNav ("ext" to make it clear it's related to an extension and not core) instead of id="customHeader", and then tying that directly to the data fields in the extension's settings. So your field labels would be:
- Global nav HTML
- Global nav CSS
- Global nav JavaScript
- etc
Little details like that can help clear up user confusion.
There could very well be reasons you've done things a certain way that I don't understand yet, and I'm glad to be schooled on them, but I think it's common in open source communities to give feedback on plugin developments so we might get closer to nirvana? ?
