Layout changes

[merowin]

Proposed Changes

• Pull pageWrapper into each View
• in Home View, move the games list into the right column
• in Game View, add Divs for left and right column

Reasoning

With the first change, it is easier for each view to define its layout individually. This also helps with the second change. In the right column, the games list is easier accessible on desktop. For mobile it moves below as usual. In the Game view, previously each added html element was positioned as a new element in the grid layout, resulting in elements being positioned seemingly randomly. I think it makes more sense to have a left- and right column that encapsulate all other elements.

Screenshots

[JonKo314]

Pull pageWrapper into each View

With the first change, it is easier for each view to define its layout individually.

This is bugging me a bit. Why does this help? Could the same be achieved by applying the necessary styling to the <main> element?

<div class="pageWrapper">
  <Suspense><RouterView /></Suspense>
</div>

"Everything" should already be wrapped inside a .pageWrapper <div>, because the <RouterView> is wrapped inside it.

[merowin]

"Everything" should already be wrapped inside a .pageWrapper <div>, because the <RouterView> is wrapped inside it.

Yes, but what if a View doesn't want to have a grid layout, or doesn't want to have the pageWrapper as the outmost element?

For example, with the status quo I can't pull the games list into the right column, unless I pull it out of the <main> element.

Could the same be achieved by applying the necessary styling to the <main> element?

I'm not sure what you mean.

[JonKo314]

I guess our styling structure is not very thought through. 🤔

I'm okay with doing what works, maybe I find the motivation to come up with a better concept at some point.

[merowin]

I guess our styling structure is not very thought through. 🤔

To be honest I'm not good at layouting, or styling in general. But I can see that there is much that can be improved about the layout / styling on our site. So much that I think maybe even I can improve it 😝

[merowin]

I wonder if it would help to be a bit more descriptive about what pageWrapper entails, now that we're not using it for every page. Something like "grid-page-layout" or similar. (I also slipped in kebab-case, I think this is more widespread convention for CSS)

I agree, renamed it to grid-page-layout