feat: responsive design grid

[saberzero1]

closes #455

Replaces #1339

responsive-design-grid-poc.mp4

• remove separate tablet configuration
• refactor to grid layout
  • mobile
  • tablet
  • desktop
• cleanup
• update docs

[saberzero1]

I have the grid layout in a working proof of concept. It's definitely more elegant than the previous version.

@aarnphm Could you give me some feedback?

[aarnphm]

Can you squash into one commit? will need it for offline test

[saberzero1]

Can you squash into one commit? will need it for offline test

Should be done properly now.

[aarnphm]

sorry for the late response, i will take a look tonight

[ChenZhongPu]

sorry for the late response, i will take a look tonight

Any progress now?

[ChenZhongPu]

@jackyzha0

[jackyzha0]

@ChenZhongPu dont tag maintainers to review PRs, we will do things on our own time

all of us have jobs and other life commitments outside of maintaining this project for free

if you want something fixed faster, either sponsor or submit a pr yourself

[aarnphm]

Ok I just got around to finish this (hehe was testing and play around with my site).

Overall I think this is a net positive change for users. For ppl who have a lot of custom scss rules this would be breaking, so we might want to figure out how to notify downstream users on updating their code.

[saberzero1]

Ok I just got around to finish this (hehe was testing and play around with my site).

Overall I think this is a net positive change for users. For ppl who have a lot of custom scss rules this would be breaking, so we might want to figure out how to notify downstream users on updating their code.

Thanks for the review!

I'd gladly assist in a summary/documentation of the (potentially) breaking changes for custom scss. I feel like changes like in this PR will inevitably happen from time to time with large changes such as this (changing from flex to grid layout). I tried to minimize the impact, but some potentially breaking changes were necessary for, in my opinion, a large net positive change.

[jackyzha0]

this is great, thanks! lets increment the minor on the package to mark it too (4.4.0 perhaps)

[aarnphm]

final resolve comments from jacky, then gtg

[saberzero1]

Thanks for the feedback. I have addressed the requested changes.

[aarnphm]

hmm @saberzero1 maybe we should follow up with a PR updating docs wrt to page layout?

idk what jacky uses for drawing the layout image 🤔

[saberzero1]

hmm @saberzero1 maybe we should follow up with a PR updating docs wrt to page layout?

idk what jacky uses for drawing the layout image 🤔

Sure thing, I'll make a follow-up PR with the final layout as soon as possible after this PR has been merged.

It kind of looks like Figma, but I'm not entirely sure.

[saberzero1]

hmm @saberzero1 maybe we should follow up with a PR updating docs wrt to page layout?
idk what jacky uses for drawing the layout image 🤔

Sure thing, I'll make a follow-up PR with the final layout as soon as possible after this PR has been merged.

It kind of looks like Figma, but I'm not entirely sure.

Nevermind, I have included the updated docs in the PR.

[jackyzha0]

docs image is made in figma, lemme DM you the link on discord

[saberzero1]

docs image is made in figma, lemme DM you the link on discord

Thanks, I have updated the layout images.

Apparently I also don't know how to spell 'finalized'.

[jackyzha0]

thanks for this! you might also have to help point users in the right direction if things break for them :')

i apologize in advance for the inbound haha

[saberzero1]

thanks for this! you might also have to help point users in the right direction if things break for them :')

i apologize in advance for the inbound haha

Haha, that's fine.

[Stephen-X]

@saberzero1 Sorry about the ping in a closed PR, please let me know if you prefer a new bug ticket. I think there is a minor issue with the layout: in mobile view, the right section is beneath the footer, as opposed to what the layout doc explains (below the hr break but above the footer?):

---

Thanks for introducing the grid layout btw! I'm also very looking forward to your mobile Explorer PR: #1441 😄 I'm doing this hack right now to make sure mobile visitors can still find links to documents:

left: [
    Component.DesktopOnly(explorerComp),
  ],
  right: [
    // Hide Graph View in mobile view to make room for Explorer
    Component.DesktopOnly(Component.Graph()),
    Component.MobileOnly(explorerComp),
  ],

[saberzero1]

@saberzero1 Sorry about the ping in a closed PR, please let me know if you prefer a new bug ticket. I think there is a minor issue with the layout: in mobile view, the right section is beneath the footer, as opposed to what the layout doc explains (below the hr break but above the footer?):

Thanks for introducing the grid layout btw! I'm also very looking forward to your mobile Explorer PR: #1441 😄 I'm doing this hack right now to make sure mobile visitors can still find links to documents:

left: [
    Component.DesktopOnly(explorerComp),
  ],
  right: [
    // Hide Graph View in mobile view to make room for Explorer
    Component.DesktopOnly(Component.Graph()),
    Component.MobileOnly(explorerComp),
  ],

Fixed and being fixed.

Please open a new issue in the future.

[Stephen-X]

Fixed and being fixed.

Please open a new issue in the future.

Will do. Thanks for the quick turnaround!