3-column mode support for wider screens #996

Closed
opened 2020-11-03 20:52:53 +00:00 by hj · 2 comments
Owner

After some experimentation and exploration I found a decent way on how to implement 3-column mode:

  1. Change our main layout to Grid
  2. Add another breaking point (approx >=1200px) where new layout is used
  3. Use portal/teleport to move notifications panel away from sidebar into main layout so it could be assigned a cell in the grid.

However, Vue2 doesn't have support for portals, and portal-vue doesn't support maintaining local state while Vue3 has native portals (called teleports) which move DOM node around and don't re-render the component. Unfortunately, not only portal-vue solution makes you lose your reply draft, it also causes a fuckton of statuses to re-rended, which causes rather serious lag, so this depends on #995

See exploratory branch experimental-3-column

Another option could be just using grid layout always but it necessitates making scrolling per-panel, i.e. sidebar doesn't scroll but notifications panel does, same for main column. Neither of those conditions are satisfactory because:

  • at smaller screens scrollable notifications panel would be incredibly tiny
  • at bigger screens you won't be able to scroll main column with cursor being on blank area
After some experimentation and exploration I found a decent way on how to implement 3-column mode: 1. Change our main layout to Grid 2. Add another breaking point (approx >=1200px) where new layout is used 3. Use portal/teleport to move notifications panel away from sidebar into main layout so it could be assigned a cell in the grid. However, Vue2 doesn't have support for portals, and portal-vue [doesn't support maintaining local state](https://github.com/LinusBorg/portal-vue/issues/113) while Vue3 has native portals (called teleports) which [move DOM node around and don't re-render the component](https://v3.vuejs.org/api/built-in-components.html#teleport). Unfortunately, not only portal-vue solution makes you lose your reply draft, it also causes a fuckton of statuses to re-rended, which causes rather serious lag, so this depends on #995 See exploratory branch `experimental-3-column` Another option could be just using grid layout always but it necessitates making scrolling per-panel, i.e. sidebar doesn't scroll but notifications panel does, same for main column. Neither of those conditions are satisfactory because: * at smaller screens scrollable notifications panel would be incredibly tiny * at bigger screens you won't be able to scroll main column with cursor being on blank area
Member

I messed around with the CSS and I think I've figured out some CSS styling that will work perfect for a three-column layout. See example screenshot below:

image

I messed around with the CSS and I think I've figured out some CSS styling that will work perfect for a three-column layout. See example screenshot below: ![image](/attachments/c9badc78-c56f-4792-bc47-e9f6ea0c9617)
356 KiB
Member

Implemented by #2770

Should be closed.

Implemented by https://git.pleroma.social/pleroma/pleroma-fe/pulls/2770 Should be closed.
Sign in to join this conversation.
No milestone
No project
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe#996
No description provided.