Hello, I'm currently redesigning a website for the french ubuntu community.
We're thinking about migrating its forum from fluxbb to flarum (whenever it is stable).
I'm already trying to embed flarum in the main website design, using the Appearance's Custom Header field (I'm also integrating there an external CSS file, it better suits my workflow than the Custom Styles field).
Here is what it looks like for now : ufr-forum.crachecode.net
However I run into many issues. I could fix much of it overriding styles with CSS, but right now I really don't know how to handle the left
Since you use the limit of the screen to hide it and its
left property is managed by JS I have to use
margin-left to have it back on the page with the rest of the body (calculating the margin, not very elegant). But then it is visible on the left website margin, since it is not included in a parent with
overflow: hidden (and could not be : it is positioned with
fixed - we need a
fixed container as a replacement).
Having it positioned with
absolute (in a relative parent) fixes the issue but make it goes with the flow...
An elegant solution would be to have it as a child of the top bar (btw this topbar is also kind of a mess...) since it is also
fixed (whereas it rather be
sticky) and the left panel top corresponds to the topbar bottom. But of course I can't do this using CSS. What would be your advice ?
.panePinned classes on the main
#app element (this is clever because we can use this info wherever on the app using a CSS selector) and handle animations with CSS transitions and properties only. (I think we can drop IE support, right ?)
Anyway, thank you for your overall great work, and for any advice or consideration about that !