Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sidebar toggle misbehaves #3

Open
ferroao opened this issue Jul 7, 2020 · 8 comments
Open

sidebar toggle misbehaves #3

ferroao opened this issue Jul 7, 2020 · 8 comments

Comments

@ferroao
Copy link

ferroao commented Jul 7, 2020

thx for your format. I wanted the toc near content.
Is there any idea to fix the toc cut in half when clicking the sidebar toggle button?
For example, disappearing it completely.

@CrumpLab
Copy link
Owner

CrumpLab commented Jul 7, 2020

I don't know of any options for this specifically. But, I'm sure you could produce the desired behavior by editing the css directly. I usually load the page into a browser and use a dev mode to look at page source, then use the target mode to mouse over the html element I'm interested in, then click it, and inspect the css controlling the behavior. After I figure out which bits need to be changed, I add them to the style.css file (this usually takes precedence over the other .css files, and if it doesn't I use !important). Good luck!

@ferroao
Copy link
Author

ferroao commented Jul 7, 2020

Oh , I see, I did what you said for several hours without success, so I decided to write you. I only managed to do approximately the same as your behavior of sidebar.

@CrumpLab
Copy link
Owner

CrumpLab commented Jul 7, 2020

I see, I'm not sure if I can help further. Could you be more specific, for example, are you talking about how the words in the sidebar get cut off with ellipses, like in this picture?

Screen Shot 2020-07-07 at 3 07 54 PM

@ferroao
Copy link
Author

ferroao commented Jul 7, 2020

Well I didn't see the problem in your picture, here it is: (after clicking toc menu icon)

https://imgur.com/yDOXPzC

Left side of toc is missing

@CrumpLab
Copy link
Owner

CrumpLab commented Jul 7, 2020

OK, I think I understand what you are talking about. Sorry, I'm a bit distracted.

Is it pressing this sidebar button?

Screen Shot 2020-07-07 at 3 21 31 PM

You're saying that when you press that, the sidebar only half hides and doesn't disappear? For example, you don't get this?

Screen Shot 2020-07-07 at 3 21 21 PM

Hmmm, after some more digging I was able to reproduce something like the problem:

Screen Shot 2020-07-07 at 3 26 02 PM

And with some more testing, I was able to totally reproduce the problem in two different browsers.

If I make my screen resolution very high, and then systemically decrease the font size of the page, at some point this problem starts occurring. I'm not sure if this is also a bug of the original gitbook style that I modified from, or has something to do with my changes...actually, just tested the above on a different gitbook, and did not find the problem. So, it seems I made some breaking changes. This was a while ago when I was hacking the css to achieve what I thought was working, without really understanding what I was doing.

In any case, thanks for letting me know. It seems that there isn't a problem for certain resolution/font-size combos. Otherwise, not sure what the fix is. If I find time to look into this I'll add to this issue, but I'm not sure if/when I'll get around to this.

@ferroao
Copy link
Author

ferroao commented Jul 7, 2020

As you said, the original bookdown does not have this problem. I think the problem comes from bookdown never disappearing the sidebar truly, but moving it to the left. So, as we changed the bookdown sidebar to be more to the right, when clicking the toggle ("hiding"), it does not hide, because it does not move enough to the left.

@CrumpLab
Copy link
Owner

CrumpLab commented Jul 7, 2020

I think the issue might have to do with the maxwidth parameter in tufte.css...or at least interacts with this parameter.

body { width: 100%;
       margin-left: auto;
       margin-right: auto;
       padding-left: 0%;
       font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
       /*background-color: #fffff8;*/
       color: #111;
       max-width: 1400px;
       counter-reset: sidenote-counter; }

If you make max-width larger, say 2000px or more then the issue goes away with higher resolutions. I'm not sure if this breaks other things, but hopefully this helps you start tracking things down.

@ferroao
Copy link
Author

ferroao commented Jul 8, 2020

Thx, I cloned this repository and render here locally. I found the unexpected effect (with 2000px) of the content no more being centered in the screen. Content is to the left side now.

Some mods. before building

 cp figures/Loop.png figures/loop.png
 cp figures/Rlogo.jpg figures/rlogo.jpg
 cp figures/FigRStudio.pdf figures/FigRstudio.pdf
 cp figures/fig4cAnalyzing.pdf figures/Fig4cAnalyzing.pdf
 cp figures/fig4dCommunicating.pdf figures/Fig4dCommunicating.pdf

# remove chunk names 
sed -i -e 's/\br\b [0-9A-Za-z]*,/r ,/' *.Rmd

rm Programming_Crump.Rmd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants