Wide mode with sidebar visible also for posts?

[szpak]

I've come across that idea recently and I wonder what you think about that.

Looking at stats, I see that people usually jump into one article and that's all. It might be blog-specific behavior - find what you are looking for, however, I wonder, if presenting them some other context (in addition to "see also" and "next/prev") could help?

In my old WordPress blog, I liked that it was wider and there was a sidebar visible also in the "post mode" and people entering there from Google has a chance to see the "about" section and recent posts. I'm experimenting a little with that mode and it turned out to be possible to do it with not so much changes also in ZZO. Of course it's quick & dirty hack and require additional work (also with styling), but I wonder, if you would like to incorporate that "wideMode` in your really nice theme? :-)

Just in case, here are my thoughts about that:

• enableWideMode - to enable wide mode - 1280px? (currently I have div.wrapper { max-width: 1280px; } in custom.css, but it would need to be incorporated into sass)
• enableSidebarSingle - to enable displaying sidebar in single pages (I was thinking mostly about posts, but possibly also other)
• enableSidebarSingle would disable toc sidebar (ignore it silently)

[zzossig]

enableWideMode - to enable wide mode

Most people didn't notice that there are some options to customize the grid system.
Just copy-paste the file at root/themes/zzo/data/grid.toml file to your root/data/grid.toml.
And then edit the grid.toml file as you want.(make sure to restart Hugo after edit some code at data folder)

But since the feature is not recognized for many people, it makes sense to make it as an option in the params.toml file. I'm thinking now the param name would be viewportSize and use it something like this.

...
viewportSize = "wide" #widest, #wider, #wide, #normal, #narrow 

enableSidebarSingle - to enable displaying sidebar in single pages

I don't want to add more complexity to maintaining the viewport page.
But we can utilize the empty space before/after the viewport page like the tocPosition = "outer" did.

How do you think about this

[szpak]

Thanks for your suggestion with the empty space on the left. However, while it is good for outer toc, I would like to reuse existing sidebar, with expected background, etc. It could make it necessary to do some more changes there.

I ended up with the following changes - maybe someone would like to use it in the future. Especially for the about and talks pages it was as easy as wrapping the default main with the one with a sidebar. For post pages, I disabled inline toc as there are some glitches with wrapper and grid which causes displaying toc in wrong place, but it is definitely doable (but most likely no-one would like to have it anyway).

It seems to work and it is simple (less chance to get conflict on merge with your version :-) ), but I'm new to CSS/HTML. Do you have any suggestion which could improved there (or what should be avoided)?

And thanks for adding viewportSize, it simplified my configuration 👍 .

Update. I forgot to mention as it is possible to disable sidebar per page with enableSidebarSingle: false which could be especially useful for some about-like pages.

[zzossig]

The code you have linked did not consider the mobile.
And the search logic double executed.

If you want to consider mobile, you should understand how I made the grid system in the theme.
https://github.com/zzossig/hugo-theme-zzo/blob/b8ba839d012db16e07674da546230363963deebc/README.md

[szpak]

Thanks for your remarks. In fact, I left mobile on my todo list before deployment...

I have an another version. It reuses #222 to show/hide sidebar also on other pages. In addition, I had to add the wrapper class to that div to be considered as a grid container. It seems to work also on mobile, but it was rather hit-and-miss, as I don't know CSS (and as a backend developer I would prefer to do not dive into it ;-) ). Maybe you have some other proposals, what could be improved?

It can be seen in action at: hxxps://disposable-wide4--solidsoft-blog-disposable.netlify.com/
(please replace it to https manually - I don't want that page to be crawled - although robots.txt shouldn't allow to do that).

Update. I have noticed one glitch. When you resize the windows with post on desktop. There is a moment when sidebar slightly overlays the post content. It's not crucial (unless your screen has just that width :-) ), but maybe you know what is it caused by and if it could be easily improved?

Update2. To some degree it is occurs also on the post list (not the main, but /posts). But only if I have long blog name which causes the breadcrumb longer. With short blog name I cannot observe it on that page.

Update3. As it might be related to "Update2". You might visit hxxps://blog.solidsoft.pl/posts/ on mobile (regular version with normal width, without my recent changes). You can swipe left there to see that the breadcrumb for longer names causes white background on the right. Maybe the fix for that could also help with my issue?

[zzossig]

Sorry, Once again,

I don't want to add more complexity to maintaining the viewport page.

The side menus on every page are not considered when I made this project.
It takes much time for me to make it work.

Some pages made main-main main-side combination and other pages made main and inside l m r combination.
And if I have to make it, I have to redesign the grid CSS and the whole grid css should be changed.
And many options should be considered(enableSidebar, sidebarPotision, tocPosition ...)

I'm sorry. It is too much work for me.

But one possible solution is that just replace the toc component to menu(sidebar menu) and then move toc to outer.(of course this will work only in a post page which has toc component)

[szpak]

I to clear. I understood that you don't want to add that complexity to your theme and that's why closed the issue after your first reply. And I completely agree that it might be problematic to cover all the cases and I do not insist on implementing it in your version.

However, I would like to add it to my blog instance and I'm exploring possible (easy) ways of adding it (even at the cost of dropping the features I personally don't need - e.g. the sidebar on the left, ltr or inner toc). Unfortunately, I'm not familiar with CSS and therefore, I was asking for some suggestions how it could be done (possibly) non invasive, to be able to still merge from your upstream version on a regular basis.

And thanks with your suggestion about replacing the inner toc with the sidebar! I will play with it.

[szpak]

I tried to the toc column, but there was too much thing to handle with styling. In the end I tune up the original idea with embedded sections. The problem with overlapping sections was cased by grid-template-columns: minmax(350px,5fr) minmax(250px,2fr); in .wrapper. It didn't allow the post column to shrink unless narrow more was enabled. In addition I had to do ugly hack with margin to cope with top margin with embedded wrapper. I ended up with this, available at:
https://disposable-wide4--solidsoft-blog-disposable.netlify.com/

In addition, there "hacky" changes in custom.css - just for people bumping into that issue later on:

/* Sidebar in posts - ugly hack */
main.main-embedded {
    margin-top: -50px;
}
/* Sidebar in posts - 350px is too much for posts and overflow occurs, changed to 200px */
.wrapper-embedded {
    grid-template-columns: minmax(200px,5fr) minmax(250px,2fr);
    @media only screen and (max-width: 769px) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
    }
}
/* Sidebar in posts - right sidebar min column grid doesn't allow post column to shrink below 266px */
.inner-for-embedding[data-sidebar-position="right"] {
    @media only screen and (max-width: 769px) {
        grid-template-columns: 1fr 1fr minmax(0px, 266px);
    }
}
.inner-for-embedding {
    @media only screen and (max-width: 769px) {
        grid-template-columns: minmax(0px, 266px) 1fr 1fr;
    }
}

It seems to work with Firefox and Chrome/Chromium on desktop and mobile, but if you see any possible issues (besides over complicated embedded grid layout) please let me know!