Refactor the frontend

[docjyJ]

This is best reviewed like this: https://github.com/nextcloud/all-in-one/pull/5016/files?diff=unified&w=1

---

Nextcloud AIO offers a lot of features.
The containers.twig file is very long and complicated.

My suggestion to improve and simplify future addition of new functionality is:

• Separate each section into "components".
• Improved accessibility by using html5 semantic elements like main or section
• Improve the stylesheet and try to follow the Nextcloud theme more.

What do you think @szaimen?

If you think it's a good thing to work on, I can work on it.
If you have another vision to implement this, do not hesitate to share it.

[docjyJ]

[szaimen]

Hi @docjyJ, thanks a lot for working on this! :)

I think refactoring this into smaller components and improving the html definitely makes sense.

However lets keep redesigning stuff for follow-ups (e.g. I would like to keep the header inside the body and outside the blue header bar for now)

[docjyJ]

What do you think about that ?

https://symfony.com/bundles/ux-twig-component/current/index.html

[szaimen]

What do you think about that ?

https://symfony.com/bundles/ux-twig-component/current/index.html

Looks cool in general :)
Currently not sure where we could use that though...

[docjyJ]

@szaimen, maybe we could merge this PR with the #5007?

[szaimen]

@szaimen, maybe we could merge this PR with the #5007?

I'd personally like to keep it separate. However you could base this PR on top of my changes in #5007 if you want :)

[docjyJ]

It's quite complicated to separate into several files. I don't think it's relevant and it risks breaking the interface.

I think this PR can be merged.
List of additions:

• Use <main> instead of the content class
• Paragraphs are in <p> and remove the <br>
• Added an alt to the nextcloud logo.
• Fix the logout button.

[szaimen]

All right. I try to review and schedule it for the next release :)

[docjyJ]

It's quite complicated to separate into several files. I don't think it's relevant and it risks breaking the interface.

I think this PR can be merged. List of additions:

• Use instead of the content class
• Paragraphs are in

  and remove the
  

• Added an alt to the nextcloud logo.
• Fix the logout button.

I forgot that github supports html syntax...
I just saw the unreadable rendering with the tags...

[szaimen]

Tested and works apart from two small problems with buttons that can be addressed in a follow-up:

Thanks a lot! :)

[szaimen]

This is now released with 9.5.0 Beta. Testing and feedback is welcome! See https://github.com/nextcloud/all-in-one#how-to-switch-the-channel