embed flarum in another website layout / front-end considerations

kro

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 .DiscussionPage-list panel.
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 ?

On a general consideration I would recommend to use as little JavaScript as possible. Since it is much easier to override CSS than JavaScript I would for instance recommend to simply use the .paneShowing and .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 !

kro

finally I could have the sidebar working as intended.
I used div.DiscussionPage-list as a transparent fixed container (taking the page width) and its child div.DiscussionList as a removable Pane :

#app .DiscussionPage-list {
  pointer-events: none;
  box-shadow: none;
  background: transparent;
  border: none;
  width: var(--page-width);
  transition: width .8s, margin .8s;
  position: fixed;
  left: 50%;
  margin-left: calc(var(--page-width) / -2);
}
#app .DiscussionPage-list .DiscussionList {
  pointer-events: auto;
  background-color: var(--td-background-color);
  box-shadow: 0 0 6px rgba(0,0,0,0.35);
  position: absolute;
  height: 100%;
  width: 400px;
  left: -406px;
  transition: left .4s;
}

For anyone interested (might be useful if you intend to integrate Flarum in a limited space on a web page) here are the CSS file I'm writing : https://gitlab.com/ubuntu-fr/code/ufr-forum/-/blob/master/data/assets/css/forum.css
(pardon my french comments 😉

JohnP

kro finally I could have the sidebar working as intended.

Good job!

For a logged out user the 'Se connecter pour répondre' text in the scrubber button is much longer than the button itself and hangs out of the content section on to the purple background. I don't think it was doing it yesterday when I looked or maybe I just didn't notice it?

We are currently working on implementing Flarum in a site where the page should look consistent with the rest of the site and the challenge I'm facing right now is getting the scrubber to not overlap the custom footer.

ctml

JohnP the challenge I'm facing right now is getting the scrubber to not overlap the custom footer.

I have this issue too when using a custom footer, if you figure out a solution please tag me 🙂

kro

JohnP For a logged out user the 'Se connecter pour répondre' text in the scrubber button is much longer than the button itself

Yes. This is the case with the original flarum theme when we select the french langage (which unfortunately is way longer than a simple login to reply).
I've decided not to fix "native" issues at the moment. I might submit pull requests on flarum when I have the time which is probably not that soon... or when it goes stable and I achieve the migration.

about the scrubber, would that be useful ? https://github.com/the-turk/flarum-scrubber-fix

JohnP

ctml I have this issue too when using a custom footer, if you figure out a solution please tag me

This solution is working for me at the moment...

https://discuss.flarum.org/d/26130-css-problem-with-discussionpage-nav

JohnP

kro about the scrubber, would that be useful ? https://github.com/the-turk/flarum-scrubber-fix

Thanks, I have already looked at that, it's not working in the latest beta for some reason and I haven't found the time yet to dive much deeper into it.

luceos

A good example of an extension that adds a whole new layout (because flarum supports different frontends - https://discuss.flarum.org/d/9849-targeting-flarum-with-extensions) is flarum/embed: https://github.com/flarum/embed. Maybe scouring through that might help you modify your code to better suite the need of integration?

kro

luceos flarum supports different frontends

that's great. this will be very useful to anyone intending to build a smartphone app e.g.
I guess it would also be nice to have some kind of store / marketplace / webpage that references available frontends then.
And also to have some kind of skeleton / starter frontend for developers to build around ! is that what flarum/embed is ? I can't get it very clearly...

Anyway I find the current "main" frontend to be pretty neat, and to suit my needs almost perfectly. So I thought it would probably be quicker and easier to maintain to override styles than to reinvent the wheel.

The only issues I have are related to the fact this frontend behave with the screen more than its container. Let me address this in another way (I think I get it clearer now), pretty straightforward. It would be much easier for developers to embed Flarum in their personal website / layout if :

the frontend was not relying on screen borders to hide content. use containers with overflow: hidden; and pointer-events: none; if needed. (check my 2nd message)
it should not rely on screen width or height to position or extend any element. instead rely on available space around the forum. in other term avoid vw or vh unities and prefer % or flex. this advice would probably also be important for the scrubber I guess.
do not set styles inline or handle position, styles or animations with JavaScript. JavaScript should only be used to add or remove classes. Position, styles and animation should then be handled 100% with CSS.
on the same idea try to rely on new CSS more than JS for positioning (use sticky for the header e.g.). (we can still have a .scrolled class to add a nice shadow down the header)
avoid fixed elements (also prefer sticky or absolute when possible). and for this to work we need to have the sticky elements direct children of the main scrolling element.

sorry for the dogmatic tone. these are simple general advices. I might submit pull requests in this direction if / when I have the time.