From 6f3284dae3f030be655e95f55176ec96a17e9570 Mon Sep 17 00:00:00 2001 From: rvisser7 Date: Sat, 5 Sep 2026 21:00:05 -0400 Subject: [PATCH 1/5] Some small tweaks to the LMFDB left blue sidebar --- lmfdb/templates/sidebar.html | 19 ++++++++++++------- lmfdb/templates/style.css | 29 +++++++++++++++++++---------- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/lmfdb/templates/sidebar.html b/lmfdb/templates/sidebar.html index dbdc9e0eb9..7d1015abc8 100644 --- a/lmfdb/templates/sidebar.html +++ b/lmfdb/templates/sidebar.html @@ -24,7 +24,7 @@ {%- endif -%} {%- if entry.collapsible and entry.part2 -%} - {{entry.title | safe}} + {{entry.url | safe}}
{%- for pt2 in entry.part2 -%} {%- if not BETA and pt2.status == "notonbeta" -%} @@ -51,13 +51,13 @@ {%- for pt3 in pt2.part3 -%} {%- if (BETA and pt3.status == 'beta') or not pt3.status -%} {%- if pt3.status == "beta" -%} - + {%- else -%} {%- endif -%} - {%- endif -%} {{ pt3.url | safe}} + {%- endif -%} {%- endfor -%}{# for pt3 in pt2.part3 #}
{%- endif -%} {# if pt2.part3 #} @@ -95,14 +95,17 @@ $('.collapsible-container').each(function(index) { var $container = $(this); var $content = $container.find('.collapsible-content'); - // Key from the container's OWN text only, excluding child elements - var ownText = $.trim($container.clone().children().remove().end().text()); + // Key from the container's own label, excluding the submenu itself. + // (The label may be a link, so we cannot just drop all children.) + var $label = $container.clone(); + $label.find('.collapsible-content').remove(); + var ownText = $.trim($label.text()); var key = 'lmfdb_sidebar_entry_' + ownText.replace(/\s+/g, '_').substring(0, 30); var contentId = 'lmfdb-sidebar-entry-' + index; $content.attr('id', contentId); - var $chev = $(''); + var $chev = $(''); $chev.attr('aria-controls', contentId); $content.before($chev); @@ -117,6 +120,8 @@ $container.on('click', function(e) { // Let clicks inside the submenu through (links must work) if ($(e.target).closest('.collapsible-content').length) return; + // Let the parent's own link through as well + if ($(e.target).closest('a').length) return; e.stopPropagation(); e.preventDefault(); @@ -141,7 +146,7 @@ $section.attr('id', sectionId); // Append the chevron into the h2 - var $chev = $(''); + var $chev = $(''); $chev.attr('aria-controls', sectionId); $h2.append($chev); $h2.css('cursor', 'pointer'); diff --git a/lmfdb/templates/style.css b/lmfdb/templates/style.css index f64a6db4e3..df871895fa 100644 --- a/lmfdb/templates/style.css +++ b/lmfdb/templates/style.css @@ -1610,7 +1610,7 @@ div.maassformplot img { #sidebar table td a { display: block; - padding: 2px; + padding: 3px 6px; } #sidebar table td .subtitle { @@ -1641,10 +1641,19 @@ div.maassformplot img { justify-content: space-between; align-items: center; width: 100%; - cursor: pointer; min-width: 100%; - padding-left: 2pt; - color: {{color.col_sidebar_header_links}} + color: {{color.col_sidebar_links}}; +} + +/* The label is a link to the section's own page; let it fill the row so the + chevron stays flush right, as in the h2 headings. */ +#sidebar .collapsible-container > a { + flex: 1; + min-width: 0; +} + +#sidebar .collapsible-container > .collapsible-chevron { + color: {{color.col_sidebar_links}}; } #sidebar .collapsible-chevron { @@ -1655,7 +1664,7 @@ div.maassformplot img { border: 0; border-radius: 0; min-width: 0; - padding: 0; + padding: 2px; margin-right: 4px; margin-left: auto; display: flex; @@ -1664,8 +1673,8 @@ div.maassformplot img { #sidebar .collapsible-chevron > svg { - width: 16px; - height: 16px; + width: 14px; + height: 14px; object-fit: contain; transform: rotate(0deg); transition: transform 0.15s ease; @@ -1678,8 +1687,8 @@ div.maassformplot img { #sidebar .collapsible-content { flex-basis: 100%; - border-left: 2px solid {{color.col_sidebar_header_links}}; - margin-left: 2px; + border-left: 2px solid {{color.col_main_l}}; + margin-left: 10px; margin-top: 2px; padding-left: 6px; } @@ -1690,7 +1699,7 @@ div.maassformplot img { #sidebar .collapsible-content .subtitle a { display: block; - padding: 2px; + padding: 3px 6px; } #sidebar .section-content { From bcaf4f761b1269e25e8030a0df2b50aa1360368f Mon Sep 17 00:00:00 2001 From: rvisser7 Date: Sat, 5 Sep 2026 21:11:38 -0400 Subject: [PATCH 2/5] Further fixes to the LMFDB blue sidebar, keep vertical scaling as before --- lmfdb/templates/sidebar.html | 11 +++-------- lmfdb/templates/style.css | 21 ++++++++------------- 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/lmfdb/templates/sidebar.html b/lmfdb/templates/sidebar.html index 7d1015abc8..dab93425bb 100644 --- a/lmfdb/templates/sidebar.html +++ b/lmfdb/templates/sidebar.html @@ -24,7 +24,7 @@ {%- endif -%} {%- if entry.collapsible and entry.part2 -%} - {{entry.url | safe}} + {{entry.title | safe}}
{%- for pt2 in entry.part2 -%} {%- if not BETA and pt2.status == "notonbeta" -%} @@ -95,11 +95,8 @@ $('.collapsible-container').each(function(index) { var $container = $(this); var $content = $container.find('.collapsible-content'); - // Key from the container's own label, excluding the submenu itself. - // (The label may be a link, so we cannot just drop all children.) - var $label = $container.clone(); - $label.find('.collapsible-content').remove(); - var ownText = $.trim($label.text()); + // Key from the container's OWN text only, excluding child elements + var ownText = $.trim($container.clone().children().remove().end().text()); var key = 'lmfdb_sidebar_entry_' + ownText.replace(/\s+/g, '_').substring(0, 30); var contentId = 'lmfdb-sidebar-entry-' + index; @@ -120,8 +117,6 @@ $container.on('click', function(e) { // Let clicks inside the submenu through (links must work) if ($(e.target).closest('.collapsible-content').length) return; - // Let the parent's own link through as well - if ($(e.target).closest('a').length) return; e.stopPropagation(); e.preventDefault(); diff --git a/lmfdb/templates/style.css b/lmfdb/templates/style.css index df871895fa..89afae578e 100644 --- a/lmfdb/templates/style.css +++ b/lmfdb/templates/style.css @@ -1610,7 +1610,7 @@ div.maassformplot img { #sidebar table td a { display: block; - padding: 3px 6px; + padding: 2px 6px; } #sidebar table td .subtitle { @@ -1641,17 +1641,12 @@ div.maassformplot img { justify-content: space-between; align-items: center; width: 100%; + cursor: pointer; min-width: 100%; + padding-left: 6px; color: {{color.col_sidebar_links}}; } -/* The label is a link to the section's own page; let it fill the row so the - chevron stays flush right, as in the h2 headings. */ -#sidebar .collapsible-container > a { - flex: 1; - min-width: 0; -} - #sidebar .collapsible-container > .collapsible-chevron { color: {{color.col_sidebar_links}}; } @@ -1664,7 +1659,7 @@ div.maassformplot img { border: 0; border-radius: 0; min-width: 0; - padding: 2px; + padding: 0; margin-right: 4px; margin-left: auto; display: flex; @@ -1673,8 +1668,8 @@ div.maassformplot img { #sidebar .collapsible-chevron > svg { - width: 14px; - height: 14px; + width: 16px; + height: 16px; object-fit: contain; transform: rotate(0deg); transition: transform 0.15s ease; @@ -1688,7 +1683,7 @@ div.maassformplot img { #sidebar .collapsible-content { flex-basis: 100%; border-left: 2px solid {{color.col_main_l}}; - margin-left: 10px; + margin-left: 4px; margin-top: 2px; padding-left: 6px; } @@ -1699,7 +1694,7 @@ div.maassformplot img { #sidebar .collapsible-content .subtitle a { display: block; - padding: 3px 6px; + padding: 2px 6px; } #sidebar .section-content { From f30b49294223a110708eaf45cd0dc82c85b57b89 Mon Sep 17 00:00:00 2001 From: rvisser7 Date: Sat, 5 Sep 2026 21:17:43 -0400 Subject: [PATCH 3/5] Align the chevron in submenus properly --- lmfdb/templates/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lmfdb/templates/style.css b/lmfdb/templates/style.css index 89afae578e..3dd1630f2a 100644 --- a/lmfdb/templates/style.css +++ b/lmfdb/templates/style.css @@ -1640,6 +1640,8 @@ div.maassformplot img { flex-wrap: wrap; justify-content: space-between; align-items: center; + /* border-box, so padding-left does not push the row past its own cell */ + box-sizing: border-box; width: 100%; cursor: pointer; min-width: 100%; @@ -1649,6 +1651,9 @@ div.maassformplot img { #sidebar .collapsible-container > .collapsible-chevron { color: {{color.col_sidebar_links}}; + /* 2px less than the h2 chevron, cancelling the table cell's own padding, + so this chevron lines up with the section chevron above it */ + margin-right: 2px; } #sidebar .collapsible-chevron { From 481760b4175c9d25b1f91a6fb13e7d047a7553e2 Mon Sep 17 00:00:00 2001 From: rvisser7 Date: Sat, 5 Sep 2026 21:29:39 -0400 Subject: [PATCH 4/5] Add some small vertical spacing for submenus in left sidebar --- lmfdb/templates/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lmfdb/templates/style.css b/lmfdb/templates/style.css index 3dd1630f2a..8bf4733aa4 100644 --- a/lmfdb/templates/style.css +++ b/lmfdb/templates/style.css @@ -1699,7 +1699,7 @@ div.maassformplot img { #sidebar .collapsible-content .subtitle a { display: block; - padding: 2px 6px; + padding: 3px 6px; } #sidebar .section-content { From b50db54ab9958d7835d0744e21d236a0d40c303b Mon Sep 17 00:00:00 2001 From: rvisser7 Date: Sat, 12 Sep 2026 16:12:09 -0400 Subject: [PATCH 5/5] Make the Chevron HTML its own variable, move stroke-width into CSS style file --- lmfdb/templates/sidebar.html | 12 ++++++++++-- lmfdb/templates/style.css | 17 ++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/lmfdb/templates/sidebar.html b/lmfdb/templates/sidebar.html index dab93425bb..d457e0cba6 100644 --- a/lmfdb/templates/sidebar.html +++ b/lmfdb/templates/sidebar.html @@ -91,6 +91,14 @@ $toggle.attr('aria-label', (expanded ? 'Collapse ' : 'Expand ') + label); } + // HTML for the chevron arrow, shared by the sub-menu and section toggles. + var chevronHTML = + ''; + // ── Collapsible sub-menu toggles (Elliptic curves, Abstract groups, …) ── $('.collapsible-container').each(function(index) { var $container = $(this); @@ -102,7 +110,7 @@ var contentId = 'lmfdb-sidebar-entry-' + index; $content.attr('id', contentId); - var $chev = $(''); + var $chev = $(chevronHTML); $chev.attr('aria-controls', contentId); $content.before($chev); @@ -141,7 +149,7 @@ $section.attr('id', sectionId); // Append the chevron into the h2 - var $chev = $(''); + var $chev = $(chevronHTML); $chev.attr('aria-controls', sectionId); $h2.append($chev); $h2.css('cursor', 'pointer'); diff --git a/lmfdb/templates/style.css b/lmfdb/templates/style.css index 8bf4733aa4..410879baba 100644 --- a/lmfdb/templates/style.css +++ b/lmfdb/templates/style.css @@ -1649,13 +1649,6 @@ div.maassformplot img { color: {{color.col_sidebar_links}}; } -#sidebar .collapsible-container > .collapsible-chevron { - color: {{color.col_sidebar_links}}; - /* 2px less than the h2 chevron, cancelling the table cell's own padding, - so this chevron lines up with the section chevron above it */ - margin-right: 2px; -} - #sidebar .collapsible-chevron { flex-shrink: 0; cursor: pointer; @@ -1671,6 +1664,12 @@ div.maassformplot img { align-items: center; } +#sidebar .collapsible-container > .collapsible-chevron { + color: {{color.col_sidebar_links}}; + /* 2px less than the h2 chevron, cancelling the table cell's own padding, + so this chevron lines up with the section chevron above it */ + margin-right: 2px; +} #sidebar .collapsible-chevron > svg { width: 16px; @@ -1680,6 +1679,10 @@ div.maassformplot img { transition: transform 0.15s ease; } +#sidebar .collapsible-chevron > svg path { + stroke-width: 2.5; +} + #sidebar .collapsible-chevron.open > svg { transform: rotate(90deg); }