Fixed scrolling of alternate tabs implementation

This commit is contained in:
squidfunk 2021-10-11 10:32:24 +02:00
parent 4618d04139
commit 7f38cfeb0f
8 changed files with 16 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -39,7 +39,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.2ec5b002.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c856cb08.min.css' | url }}">
{% if config.theme.palette %} {% if config.theme.palette %}
{% set palette = config.theme.palette %} {% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
@ -225,7 +225,7 @@
</script> </script>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.801e7afd.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.9e82f1f8.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %} {% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script> <script src="{{ path | url }}"></script>
{% endfor %} {% endfor %}

View File

@ -52,7 +52,7 @@ export interface ContentTabs {
export function watchContentTabs( export function watchContentTabs(
el: HTMLElement el: HTMLElement
): Observable<ContentTabs> { ): Observable<ContentTabs> {
if (!el.classList.contains(".tabbed-alternate")) if (!el.classList.contains("tabbed-alternate"))
return NEVER return NEVER
else else
return merge(...getElements(":scope > input", el) return merge(...getElements(":scope > input", el)
@ -77,7 +77,11 @@ export function mountContentTabs(
): Observable<Component<ContentTabs>> { ): Observable<Component<ContentTabs>> {
const internal$ = new Subject<ContentTabs>() const internal$ = new Subject<ContentTabs>()
internal$.subscribe(({ active }) => { internal$.subscribe(({ active }) => {
active.scrollIntoView({ behavior: "smooth", block: "nearest" }) active.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start"
})
}) })
/* Create and return component */ /* Create and return component */

View File

@ -176,6 +176,7 @@
// Tab label // Tab label
> label { > label {
z-index: 1; z-index: 1;
flex-shrink: 0;
width: auto; width: auto;
padding: px2em(12px, 12.8px) 1.25em px2em(10px, 12.8px); padding: px2em(12px, 12.8px) 1.25em px2em(10px, 12.8px);
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--light);