simplQ-frontend icon indicating copy to clipboard operation
simplQ-frontend copied to clipboard

Published 20 hours ago • verified publisher icon SimplQ

Fix and reuse the page layout across all pages

Open daltonfury42 opened this issue 4 years ago • 9 comments

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:

image

image

image

image

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.

daltonfury42 avatar Jan 26 '21 07:01 daltonfury42

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 Large Medium screen Medium Small screen Small

mradenovic avatar Jan 26 '21 15:01 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.

daltonfury42 avatar Feb 14 '21 07:02 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.

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

mradenovic avatar Feb 14 '21 13:02 mradenovic

@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.

prabureddy avatar Feb 14 '21 14:02 prabureddy

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?

daltonfury42 avatar Feb 14 '21 15:02 daltonfury42

we can use flex-wrap

shashank1503-cipher avatar Jul 07 '21 03:07 shashank1503-cipher

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

NereidaRondon avatar Oct 05 '22 16:10 NereidaRondon

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 https://github.com/SimplQ/simplQ-frontend/issues/490#issuecomment-1268648404, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACV4EOEWXGQYU6YNHTNU4V3WBWSWJANCNFSM4WS7ZZTQ . You are receiving this because you were mentioned.Message ID: @.***>

daltonfury42 avatar Oct 05 '22 16:10 daltonfury42

I would like to work on the pages to create a global layout which can be reused just like an HOC.

nehagupta1504 avatar Jan 31 '24 07:01 nehagupta1504