Responsive design for all high DPI displays

[akippnn]

Is your feature request related to a problem? Please describe.

The current limit of 1510px wide is inconsistent with scaling relative to other websites. When the website is viewed at FWXGA (144 pixels less than the needed width), both sidebars are hidden.

This is a case for HiDPI screens, which are common on laptops smaller than 15", so the viewport size could possibly be around QuadVGA due to scaling. FWXGA is still a common standard for low- to mid-range laptops, and WXGA+ should also be considered, as it is included as a "Laptop with HiDPI screen" in Mozilla Firefox's responsive design viewer presets. With this information, it's obvious that the width of 1510px is a huge barrier for laptops, when many other websites can show two sidebars with large whitespaces and is still considered acceptable. See this comment for more information.

Describe the solution you'd like

Have the left sidebar max size viewport size be less than iPad Pro's viewport size (1366x1024). Ideally, it should be 1279 to include WXGA as well, and this should also be mirrored to the right sidebar's max size as well.

See this and this.

Describe alternatives you've considered

I have considered changing the sizes manually via the variables.scss file or by modifying the CSS. This is not difficult, but a more elegant solution + less steps to merge changes from upstream is much appreciated.

Additional context

The problem I initially had with the current element sizes is that the new table of contents (TOC) is placed on the left sidebar and is not shown in the page. Solution attempt with this comment, although I'm not sure whether it's better to leave in another issue or to include it in the scope of this issue.

I hope this much clarifies the issue. Thank you for your time and consideration.

[akippnn]

Another implementation is to also move all elements dynamically to the left sidebar like so:

Ideally, the sidebar position: sticky should be set as a replacement to fixed and have it follow the page scroll (don't know how to pull this off), only stopping at the end of the sidebar content with top: 6rem and bottom: 4rem.

[quantumgardener]

Your description is better than mine. Same issue I was getting at with #453

[akippnn]

Your description is better than mine. Same issue I was getting at with #453

Oh, I was wondering why it wasn't an issue yet but I never thought of checking the ones that were already closed. Thanks for linking it to me (love what you wrote on your site, by the way). I feel like there's not a lot of love for small laptops, especially since it's actually much less cumbersome to work with when you're always on the go.

Either get a bigger screen or adjust the trigger widths yourself in quartz/styles/variables.scss

Adjusting the trigger widths, I assume they only change the widths, (EDIT: Sorry, they also allow changing the widths of the flex containers, so I wouldn't call them trigger widths but...point stands) so there's more to be done than simply adjusting them in quartz/styles/variables.scss. I don't like this approach, and I see the current design as a wasted space rather than a whitespace.

Here's a comparison chart:

Viewport	Quartz	Reddit	Twitter
1511px wide (Quartz needed width)
1440px wide (WXGA+ width)
1366px wide (FWXGA width)
1280px wide (WXGA width & Twitter right sidebar max-width at 1264)
1200px wide (Reddit left sidebar needed width)
987px wide (Reddit right sidebar needed width)

In this comparison chart, Quartz will always use the mobile layout below 1510px wide, while both Reddit and Twitter use the desktop layout down until 1265px and 1200px respectively. Only Reddit (among many existing websites afaik) changes the width of it's content, while Quartz and Twitter uses a fixed size of 750px and 598px respectively whenever possible.

This comparison is only to show the absurd viewport size that the two well-known sites support (particularly Twitter as it's current design served as an inspiration for newer UI/UX designs) despite the large whitespaces. This is also accurate (not precise) with many others (Facebook, Instagram, etc.) that start making element adjustments at approximately 1260-1280px wide.

This is Wikipedia's approach:

1000px sidebar	1000px hidden	999px

The TOC can be set as a sidebar down until 1000px. Consequently, the content is resized to fit the sidebar.

[quantumgardener]

I'll play around with this at the weekend. Agree, we need to find a solution better than changing values to fit based on whatever our individual set up is.

Thanks for taking some time to look at my site and commenting.

[nweii]

I'm looking for a similar solution. Personally, I'd like Quartz to follow the same responsive behavior as Obsidian Publish websites (example):

• Large view (>1000px): All three columns visible with the center column shrinking to fit
• Medium view (750-1000): two columns visible with the right column either (1) hidden, (2) collapsed horizontally under the center column as it already does at mobile size, or (3) appended to the left column (I think 2 is more elegant). Center column fills space and shrinks to accomodate the left column
• Small view (≤750): Stacked single column with simplified 'sidebars', or left sidebar available in a hamburger menu

[yanghua-ola]

I'm looking for a similar solution. Personally, I'd like Quartz to follow the same responsive behavior as Obsidian Publish websites (example):

• Large view (>1000px): All three columns visible with the center column shrinking to fit
• Medium view (750-1000): two columns visible with the right column either (1) hidden, (2) collapsed horizontally under the center column as it already does at mobile size, or (3) appended to the left column (I think 2 is more elegant). Center column fills space and shrinks to accomodate the left column
• Small view (≤750): Stacked single column with simplified 'sidebars', or left sidebar available in a hamburger menu

I created a PR to enable the 2 columns layout. Check it out.

[Aubermean]

Facing this issue on iPad Pro 12.9in, I couldn’t figure out why https://quartz.jzhao.xyz/ has no navigation… when I zoomed out of the page the navigation appeared. Completely new to quartz, was just trying to read the docs to get set up. I found this issue via duplicate #1006

[ooker777]

This comment doesn't mean to expect the author to prioritize this issue over his other million important tasks. But:

• it's almost a year since the issue is opened
• many duplicated issues has been opened
• the issue is kind of important
• the fix doesn't seem to be complicated
• there is already a PR to fix this (draft: mobile burger menu #754)

Is there any reason for not having this fix for all that time? @jackyzha0 if you don't mind the ping

FYI, you can try this fork which has the burger menu on phones: Enveloppe/Enveloppe-Quartz

[sudiptosarkar]

I wrote my own implementation before seeing @Mara-Li's PR. That PR is way prettier than mine, but here is mine: https://sudipto.me/.

I don't know why this PR - #754 is delayed, but if mine looks good, I'll raise a PR.

This PR was for my forked repo: k0r0pt/sudipto.me-quartz#6

[MasssiveJuice08]

Hi @sudiptosarkar , we've been testing out your hamburger menu on the Morrowind Modding Wiki Quartz site, and it works fine for the most part.

One current limitation of your implementation, however, is that the Explorer does not expand to the full length of the page; its height seems to be capped and I'm not sure what is determining this. Essentially it will only take up half the page or less, limiting how many files you can view at once and necessitating a lot of scrolling.

You may not have encountered this yet, as your own Quartz does not have many published folders or notes yet. For testing, perhaps add a number dummy notes and folders?

Apart from the height issue, it worked fine and looked great! I thought it would be good to test it out on another Quartz like ours as we've made a number of tweaks to the layout of our Quartz site, so I figured if it works on ours it would be a good contender to get merged upstream :)

[saberzero1]

Hi @sudiptosarkar , we've been testing out your hamburger menu on the Morrowind Modding Wiki Quartz site, and it works fine for the most part.

One current limitation of your implementation, however, is that the Explorer does not expand to the full length of the page; its height seems to be capped and I'm not sure what is determining this. Essentially it will only take up half the page or less, limiting how many files you can view at once and necessitating a lot of scrolling.

You may not have encountered this yet, as your own Quartz does not have many published folders or notes yet. For testing, perhaps add a number dummy notes and folders?

Apart from the height issue, it worked fine and looked great! I thought it would be good to test it out on another Quartz like ours as we've made a number of tweaks to the layout of our Quartz site, so I figured if it works on ours it would be a good contender to get merged upstream :)

Hey, I'm working on redesigning my own Quartz theme and I was struggling with this as well.

The solution turned out to be related the following part of the styling:

quartz/quartz/styles/base.scss

Lines 507 to 510 in 34fde07

	ul.overflow,
	ol.overflow {
	max-height: 400;
	overflow-y: auto;

Any ul or ol with the overflow class will not exceed 400px in height.

The sidebar navigation html looks something like this:

<div class="explorer desktop-only">
    <div id="explorer-content" class="">
        <ul class="overflow no-background" id="explorer-ul">
            <li>
                ...
            </li>
            <li id="explorer-end"></li>
        </ul>
    </div>
</div>

Notice the overflow class on the ul.

To change this either override the overflow class for the sidebar in custom.scss. Something like this:

#explorer-content > ul.overflow {
    max-height: unset;
}

Or change the sidebar code and remove the overflow class.

quartz/quartz/components/Explorer.tsx

Line 112 in 34fde07

<ul class="overflow" id="explorer-ul">

[MasssiveJuice08]

Hi @sudiptosarkar , we've been testing out your hamburger menu on the Morrowind Modding Wiki Quartz site, and it works fine for the most part.
One current limitation of your implementation, however, is that the Explorer does not expand to the full length of the page; its height seems to be capped and I'm not sure what is determining this. Essentially it will only take up half the page or less, limiting how many files you can view at once and necessitating a lot of scrolling.
You may not have encountered this yet, as your own Quartz does not have many published folders or notes yet. For testing, perhaps add a number dummy notes and folders?
Apart from the height issue, it worked fine and looked great! I thought it would be good to test it out on another Quartz like ours as we've made a number of tweaks to the layout of our Quartz site, so I figured if it works on ours it would be a good contender to get merged upstream :)

Hey, I'm working on redesigning my own Quartz theme and I was struggling with this as well.

The solution turned out to be related the following part of the styling:

quartz/quartz/styles/base.scss

Lines 507 to 510 in 34fde07

	ul.overflow,
	ol.overflow {
	max-height: 400;
	overflow-y: auto;

Any ul or ol with the overflow class will not exceed 400px in height.

The sidebar navigation html looks something like this:

<div class="explorer desktop-only">
    <div id="explorer-content" class="">
        <ul class="overflow no-background" id="explorer-ul">
            <li>
                ...
            </li>
            <li id="explorer-end"></li>
        </ul>
    </div>
</div>

Notice the overflow class on the ul.

To change this either override the overflow class for the sidebar in custom.scss. Something like this:

#explorer-content > ul.overflow {
    max-height: unset;
}

Or change the sidebar code and remove the overflow class.

quartz/quartz/components/Explorer.tsx

Line 112 in 34fde07

<ul class="overflow" id="explorer-ul">

Hi there, I tested out your suggested fix, but removing the height property has the unwanted side effect of preventing the Explorer from adding a scrollbar if the content overflows its container.

I instead increased the max-height to 600px, and that worked better for mobile and tablet displays, as well as being a better height for desktopOnly Explorer.

[MasssiveJuice08]

@sudiptosarkar I encountered another problem: Configuring folderClickBehavior: to "link" breaks the hamburger menu

I configured quartz.layout.ts like so:

    Component.MobileOnly(Component.ModalFullPage(Component.Explorer({ 
      folderDefaultState: "collapsed",
      folderClickBehavior: "link",
      filterFn: (node) => node.name !== "templates",
    }))),

However, if you click on a folder link, it does the following:

1. closes the hamburger menu (that's good!)
2. hides the hamburger menu icon, preventing you from opening it again (that's bad)
3. scrolling the page becomes unresponsive (that's really baaaaaad)

You can bring back the hamburger menu by refreshing the page at least. You can also click on links and that also brings back the burger, but you can't click on it - clicking on it instead registers as you clicking on our website logo. Refreshing the page fixes that too.

hamburger-folderclick-issue.webm

Link to the branch in our repo: hamburgerMenu

[saberzero1]

Hi @sudiptosarkar , we've been testing out your hamburger menu on the Morrowind Modding Wiki Quartz site, and it works fine for the most part.
One current limitation of your implementation, however, is that the Explorer does not expand to the full length of the page; its height seems to be capped and I'm not sure what is determining this. Essentially it will only take up half the page or less, limiting how many files you can view at once and necessitating a lot of scrolling.
You may not have encountered this yet, as your own Quartz does not have many published folders or notes yet. For testing, perhaps add a number dummy notes and folders?
Apart from the height issue, it worked fine and looked great! I thought it would be good to test it out on another Quartz like ours as we've made a number of tweaks to the layout of our Quartz site, so I figured if it works on ours it would be a good contender to get merged upstream :)

Hey, I'm working on redesigning my own Quartz theme and I was struggling with this as well.

The solution turned out to be related the following part of the styling:

quartz/quartz/styles/base.scss

Lines 507 to 510 in 34fde07

	ul.overflow,
	ol.overflow {
	max-height: 400;
	overflow-y: auto;

Any ul or ol with the overflow class will not exceed 400px in height.

The sidebar navigation html looks something like this:

<div class="explorer desktop-only">
    <div id="explorer-content" class="">
        <ul class="overflow no-background" id="explorer-ul">
            <li>
                ...
            </li>
            <li id="explorer-end"></li>
        </ul>
    </div>
</div>

Notice the overflow class on the ul.

To change this either override the overflow class for the sidebar in custom.scss. Something like this:

#explorer-content > ul.overflow {
    max-height: unset;
}

Or change the sidebar code and remove the overflow class.

quartz/quartz/components/Explorer.tsx

Line 112 in 34fde07

<ul class="overflow" id="explorer-ul">

Hi there, I tested out your suggested fix, but removing the height property has the unwanted side effect of preventing the Explorer from adding a scrollbar if the content overflows its container.

I instead increased the max-height to 600px, and that worked better for mobile and tablet displays, as well as being a better height for desktopOnly Explorer.

That's because it no longer has overflow set. If you want a scrollbar when the explorer's content gets too large to contain, add overflow-y: auto;.

In addition, you can also change the height based on whether it is a desktop or mobile viewing the page.

.explorer {
    /* Desktop */
    &.desktop-only {
        .explorer-content > ul.overflow {
            max-height: unset;
            overflow-y: auto;
        }
    }
    /* Mobile */
    .explorer-content > ul.overflow {
        max-height: unset;
        overflow-y: auto;
    }
}

[MasssiveJuice08]

@saberzero1 I tried that, but overflow scroll doesn't work if the height of the container isn't specified, so max-height: unset won't work with overflow: auto (x or y). Same case with setting height to 100%.

Looks like using calc( ) may be a better option than having a hardcoded max-height like 600px.

Any idea about what might be causing the issue with having "link" for folderClickBehavior?

[saberzero1]

@saberzero1 I tried that, but overflow scroll doesn't work if the height of the container isn't specified, so max-height: unset won't work with overflow: auto (x or y). Same case with setting height to 100%.

Looks like using calc( ) may be a better option than having a hardcoded max-height like 600px.

Any idea about what might be causing the issue with having "link" for folderClickBehavior?

Well, yeah. My example was to show how to set separate height for mobile and desktop. You probably have to change the height and/or max-height to suit your template. This could possibly be done with calc, as you mentioned. You could also consider trying view-height instead of percentage. (100vh for example)

As for the folderClickBehavior, I noticed in your video that there are two errors being logged to the console, but they disappear when the hamburger menu disappears. Perhaps you're running into an error causing the behaviour.

If you could share your error, I might be able to help.

[MasssiveJuice08]

@saberzero1 I tried that, but overflow scroll doesn't work if the height of the container isn't specified, so max-height: unset won't work with overflow: auto (x or y). Same case with setting height to 100%.

Looks like using calc( ) may be a better option than having a hardcoded max-height like 600px.

Any idea about what might be causing the issue with having "link" for folderClickBehavior?

Well, yeah. My example was to show how to set separate height for mobile and desktop. You probably have to change the height and/or max-height to suit your template. This could possibly be done with calc, as you mentioned. You could also consider trying view-height instead of percentage. (100vh for example)

As for the folderClickBehavior, I noticed in your video that there are two errors being logged to the console, but they disappear when the hamburger menu disappears. Perhaps you're running into an error causing the behaviour.

If you could share your error, I might be able to help.

Oh, good spotting about the errors! I'll check it and send it to you in a couple of hours

[MasssiveJuice08]

@saberzero1 Here are the console errors. Most are just Giscus errors and are unrelated. The one that you were seeing get generated though is actually just the Ignoring Event: localhost error. Don't know what that's about, but it happens any time I click a link (regardless of whether or not it is a link clicked on from the hamburger menu - clicking any link generates the console error).

If you feel like taking a closer look at the code, here's the repository branch: https://github.com/morrowind-modding/morrowind-modding.github.io/tree/hamburgerMenu

[Aubermean]

Does anyone know what @jackyzha0 thinks about all this? Surely he knows best? Despite lots of different efforts it seems the community on its own is struggling to find a resolution (no pun intended)...

[Aubermean]

I'm looking for a similar solution. Personally, I'd like Quartz to follow the same responsive behavior as Obsidian Publish websites (example):

• Large view (>1000px): All three columns visible with the center column shrinking to fit
• Medium view (750-1000): two columns visible with the right column either (1) hidden, (2) collapsed horizontally under the center column as it already does at mobile size, or (3) appended to the left column (I think 2 is more elegant). Center column fills space and shrinks to accomodate the left column
• Small view (≤750): Stacked single column with simplified 'sidebars', or left sidebar available in a hamburger menu

I want to stress that this message quoted above, is the actual robust full fix. But nobody has managed to do it yet.

The PRs #754 and k0r0pt/sudipto.me-quartz#6 add a hamburger menu but this doesn't cover everyones issue and cause other issues as someone has pointed out. I personally lack the frontend knowledge to figure it out.

People on mobile, tablet, and on 13in Macbooks or similar are unable to see the navigation on any Quartz site including the docs page, it can be very confusing, when for newcomers a digital garden hypertext is confusing enough...

I understand @jackyzha0 you might not face this issue yourself personally, but a large subset of visits to all Quartz sites are coming from mobile and HiDPI displays. Please help us!

PS. Sponsor Jacky here if you can afford it: https://github.com/sponsors/jackyzha0

[saberzero1]

I'm looking for a similar solution. Personally, I'd like Quartz to follow the same responsive behavior as Obsidian Publish websites (example):

• Large view (>1000px): All three columns visible with the center column shrinking to fit
• Medium view (750-1000): two columns visible with the right column either (1) hidden, (2) collapsed horizontally under the center column as it already does at mobile size, or (3) appended to the left column (I think 2 is more elegant). Center column fills space and shrinks to accomodate the left column
• Small view (≤750): Stacked single column with simplified 'sidebars', or left sidebar available in a hamburger menu

I want to stress that this message quoted above, is the actual robust full fix. But nobody has managed to do it yet.

The PRs #754 and k0r0pt/sudipto.me-quartz#6 add a hamburger menu but this doesn't cover everyones issue and cause other issues as someone has pointed out. I personally lack the frontend knowledge to figure it out.

People on mobile, tablet, and on 13in Macbooks or similar are unable to see the navigation on any Quartz site including the docs page, it can be very confusing, when for newcomers a digital garden hypertext is confusing enough...

I understand @jackyzha0 you might not face this issue yourself personally, but a large subset of visits to all Quartz sites are coming from mobile and HiDPI displays. Please help us!

PS. Sponsor Jacky here if you can afford it: https://github.com/sponsors/jackyzha0

I have cooked up a proof of concept. See #1339

responsive-design-poc.mp4

I'm still working out some small things (mostly mobile padding), but any feedback is welcome.

[saberzero1]

Screen.Recording.2024-08-16.171557.mp4

I just need to update the documentation with configuration options, but otherwise it is ready for review.

The PR is ready for review. #1339 #1354

[saberzero1]

responsive-design-grid-poc.mp4

[schlittenhardtm]

responsive-design-grid-poc.mp4

Is the explorer available in the mobile view or a hamburger menu or else for accessing the explorer? I am curious because I did not catch it in the video. Thanks

[saberzero1]

responsive-design-grid-poc.mp4

Is the explorer available in the mobile view or a hamburger menu or else for accessing the explorer? I am curious because I did not catch it in the video. Thanks

The video showcases the default layout, thus there is no explorer in mobile view.

A hamburger menu toggle for mobile is out of scope for this pull request anyway, as this only makes sure the layout is fully responsive.

I could look into it, but that would be a separate pull request.

[satrujit11]

It defiightly need a hamburger menu for accessing the explorer, otherwise it is a pain to navigate on mobile

[saberzero1]

It defiightly need a hamburger menu for accessing the explorer, otherwise it is a pain to navigate on mobile

I agree, but it's still out of scope for this PR.

Currently, there is no hamburger menu on mobile either, regardless of this PR.

I have a working proof of concept for implementing this, but the exact implementation differs slightly depending on the current layout or grid layout. Expect a PR for that after the grid layout has been has been merged.