Fix and reuse the page layout across all pages

[daltonfury42]

We should standardise and reuse a common layout across all pages. We have four main pages: Home, Admin, Join and Status. The general layout of all the four pages are like this:

Currently each page has its own layout defined inside it. We should solve it at one place and reuse it across.

Open Question: What should be the approach? Flexbox vs Grid.

[mradenovic]

With grid very complex layout can be achieved.
With flexbox the simplest approach would be to make all sections equal within the main content.

Large screen

Medium screen

Small screen

[daltonfury42]

We need the flex-wrap style in where sections automatically wrap properly so that the same page works without much issues on both desktop and mobile.

[mradenovic]

We need the flex-wrap style in where sections automatically wrap properly so that the same page works without much issues on both desktop and mobile.

This is gonna be much easier to do once we are done with #492 and #516.

[prabureddy]

@daltonfury42 We already using Layout Component in all pages right if I'm not wrong? I don't see any issue here. I think I don't understand this issue. Can you please explain this a bit more.

[daltonfury42]

We style the layout of each page independently. We should define some common css classes and reuse it across all pages, for the general page layout.

@mradenovic Do you have something else in mind?

[shashank1503-cipher]

we can use flex-wrap

[NereidaRondon]

Hello, I would love the opportunity to work on converting the pages to CSS grid. Can I be assigned this issue? 😁

[daltonfury42]

This project is not being actively maintained anymore. Thanks for offering the help!

…

On Wed, 5 Oct 2022 at 9:46 PM, Nereida Rondon ***@***.***> wrote: Hello, I would love the opportunity to work on converting the pages to CSS grid. Can I be assigned this issue? 😁 — Reply to this email directly, view it on GitHub <#490 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACV4EOEWXGQYU6YNHTNU4V3WBWSWJANCNFSM4WS7ZZTQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>