rstudio / revealjs

R Markdown Format for reveal.js Presentations
Other
325 stars 86 forks source link

allow toc to overflow #128

Open atusy opened 2 years ago

atusy commented 2 years ago

Current implementation hides TOC when it has too many items.

This PR let TOC be scrollable.

cderv commented 2 years ago

Hi @atusy !

you're quick - this is just new feature I am experimenting while working on revealjs. Glad to know someone is watching 😄

Indeed, pandoc implementation of toc is not great for too many title. I wasn't sure yet how to deal with this.

I don't know if just adding an overflow is great, because you would get a big scrollable bar on the screen and it is really not nice.

---
title: "Untitled"
output: 
  revealjs::revealjs_presentation: 
    toc: true
---

```{r, echo=FALSE, results='asis'}
for (i in 1:20) {
  cat("# Title ", i)
  cat("\n")
}
![image](https://user-images.githubusercontent.com/6791940/134553426-958fca11-7f82-4c3c-b000-70c0f18c141c.png)

So I think we should find another solution for that. Either doing columns or vertical slide. 
Or offer another mechanism than Pandoc own TOC if we really want this feature. 

Note that correctly putting content on slide is left to the user on any slide. If you are writing to much content, it will not be shown on screen, and we don't want to make all the slides scrollable 

````markdown
---
title: "Untitled"
output: 
  revealjs::revealjs_presentation: default
---

# Content too long 

```{r, echo=FALSE, results='asis'}
for (i in 1:15) {
  cat("Sentence", i, "\n")
  cat("\n")
}

![image](https://user-images.githubusercontent.com/6791940/134554066-6dfeb084-986d-4194-94ff-998f028bd828.png)

Same happens some time with code chunk + plot or table. 

For now, the user has to know what fits on the screen and adjust the style or split the slide if not ok. 

Probably the same should be possible for TOC but Pandoc does not offer this. 

Anyway, I think I need more time to decide what to do with this. I really don't like the vertical scroll bar. I prefer user to reduce the font size.

````markdown
---
title: "Untitled"
output: 
  revealjs::revealjs_presentation: 
    toc: true
    keep_md: true
---

```{r, echo=FALSE, results='asis'}
for (i in 1:20) {
  cat("# Title ", i)
  cat("\n")
}
.reveal #TOC {
  font-size: 70%
}

![image](https://user-images.githubusercontent.com/6791940/134554755-1d6060de-c839-40a5-9757-62ac7fe0b6c5.png)

Or split in columns even using CSS

````markdown
---
title: "Untitled"
output: 
  revealjs::revealjs_presentation: 
    toc: true
toc-title: "Table Of Content"
---

```{r, echo=FALSE, results='asis'}
for (i in 1:20) {
  cat("# Title ", i)
  cat("\n")
}
.reveal #TOC ul {
  column-count: 2;
  column-gap: 10rem;
  height: 100%
}

![image](https://user-images.githubusercontent.com/6791940/134556255-3b492b1c-80a7-4f5c-abc4-c064557d459b.png)

Even if it means CSS customization, I find this better. 

What do you think ? 

Overall, I need more time to think about this. We are just starting working on this, and we will spend time on design and good default. 

Thanks for the contribution anyway.