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

Feature suggestion: add prev/next indicators to content tabs #3531

Closed
5 tasks done
Vasperous opened this issue Feb 3, 2022 · 8 comments
Closed
5 tasks done

Feature suggestion: add prev/next indicators to content tabs #3531

Vasperous opened this issue Feb 3, 2022 · 8 comments

Comments

@Vasperous
Copy link
Sponsor

@Vasperous Vasperous commented Feb 3, 2022

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

After upgrading with the new tabbed solution the user is unable to access tabs on the left side after the user has scrolled to the right. This means they need to reload the page to get the left tabs to appear again.

Expected behaviour

With longer tabs the user should be able to scroll back to the left after scrolling to the right.

Tabs before the user clicks on "Hello World 7":
image

Tabs after the user clicks on "Hello World 7":
image

Tabs after the user clicks on "Hello World 3" (note that user cannot access "Hello World 2"):
image

Actual behaviour

The left tabs are hidden and cannot be accessed by the user.

Steps to reproduce

  1. Create a page with more tabs then horizontal space available
  2. Serve the page
  3. Click on the right most tab

Package versions

  • Python: Python 3.10.0
  • MkDocs: mkdocs, version 1.2.3
  • Material: Version: 8.1.9+insiders.4.7.1

Configuration

site_name: 'Page Test'
site_description: 'Test'
site_author: 'Test'
site_url: ''

# Copyright
copyright: 'Copyright © 2021'

# If serving from a website you would want 'true', for offline you want false
use_directory_urls: false

nav:
  - Home:
    - Introduction: index.md

theme:
  name: 'material'
  palette:
    primary: black
    accent: cyan
  font:
    text: 'Roboto'
    code: 'Roboto Mono'
  features:
    - content.tabs.link
    - navigation.indexes
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
    - navigation.tracking
    - search.highlight
    - search.share
    - search.suggest
    - toc.autohide

extra:
  generator: false

markdown_extensions:
  - abbr
  - admonition
  - attr_list
  - def_list
  - footnotes
  - meta
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.highlight:
      use_pygments: true
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.snippets:
      base_path: ext_md
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.tabbed:
      alternate_style: true 
  - toc:
      permalink: '#'
      toc_depth: 5

plugins:
  - search
  - git-revision-date-localized:
      fallback_to_build_date: true

System information

  • Operating system: Mac OS 12.1
  • Browser: Brave
@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 3, 2022

Thanks for reporting. However, the tabs container is scrollable, which is what the new tabs implementation is all about:

Ohne.Titel.mp4

Before, tabs broke into several lines. There was a previous discussion whether to add a previous/next arrow as a clickable indicator to go the previous/next tab, which could be added at some point, but it hasn't been a priority until now.

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Feb 3, 2022

I'm changing the title of this issue to indicate that we should add indicators. If you want to add them yourself until this is resolved in master, #3091 provides some directions.

Related

@squidfunk squidfunk changed the title Unable to access left tabs Feature suggestion: add prev/next indicators to content tabs Feb 3, 2022
@Vasperous
Copy link
Sponsor Author

@Vasperous Vasperous commented Feb 3, 2022

@squidfunk thank you, didn't realize that I could scroll left. Of course the first time I tried I scrolled too far back and it actually triggered the 'back page'.

I tried the changes and they work but the icon is very unreliable in terms of appearance, location etc. so I will need to spend some time on it. Would be great to get the support native in here eventually.

Thank you!

@facelessuser
Copy link
Contributor

@facelessuser facelessuser commented Feb 3, 2022

Changes are unreliable due to recent CSS changes in Material, there are fixes, but I'd have to dig them up.

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Mar 27, 2022

Just a short update: I will definitely revisit this before the next funding goal is reached, at the latest when we're close to it. I'm planning to give content tabs a slight refactor (mainly for internal reasons) and this will also include the addition of proper native and interactive tab indicators.

@squidfunk squidfunk mentioned this issue May 3, 2022
5 tasks
@squidfunk
Copy link
Owner

@squidfunk squidfunk commented May 14, 2022

I've added prev/next buttons in 3cf091f. The scrolling upon keyboard navigation was also changed to always scroll by a whole page (= width), as can be seen in the video, which feels less jaggy than the current "always lock to active tab". The buttons can be interacted with and are shown when the tab label container overflows on either side:

Ohne.Titel.mp4

Note that these changes are currently only available through Insiders, but they will be released together with linked content tabs when the next funding goal is hit, which should be possible to achieve in a few weeks time.

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented May 14, 2022

Released as part of 8.2.15+insiders-4.15.1

@facelessuser
Copy link
Contributor

@facelessuser facelessuser commented May 14, 2022

Nice, looks like I'll get to drop some custom stuff, always a good thing 🙂.

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

No branches or pull requests

3 participants