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 %}
{% endblock %}
{% 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 %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">
@ -225,7 +225,7 @@
</script>
{% endblock %}
{% 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"] %}
<script src="{{ path | url }}"></script>
{% endfor %}

View File

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

View File

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