Skip to content

Small cosmetic tweak to the blue left sidebar #7199

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.

Sign up for GitHub

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

Merged
roed314 merged 5 commits into from
Sep 18, 2026
+30 −10
Merged

Small cosmetic tweak to the blue left sidebar #7199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f3284d
Some small tweaks to the LMFDB left blue sidebar
rvisser7 Sep 6, 2026
bcaf4f7
Further fixes to the LMFDB blue sidebar, keep vertical scaling as before
rvisser7 Sep 6, 2026
f30b492
Align the chevron in submenus properly
rvisser7 Sep 6, 2026
481760b
Add some small vertical spacing for submenus in left sidebar
rvisser7 Sep 6, 2026
b50db54
Make the Chevron HTML its own variable, move stroke-width into CSS st…
rvisser7 Sep 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions lmfdb/templates/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,13 @@
{%- for pt3 in pt2.part3 -%}
{%- if (BETA and pt3.status == 'beta') or not pt3.status -%}
{%- if pt3.status == "beta" -%}
<span class="beta", class="subitem">
<span class="beta subitem">
{%- else -%}
<span class="subitem">
{%- endif -%}
{%- endif -%}
{{ pt3.url | safe}}
</span>
{%- endif -%}
{%- endfor -%}{# for pt3 in pt2.part3 #}
</div>
{%- endif -%} {# if pt2.part3 #}
Expand Down Expand Up @@ -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 =
'<button type="button" class="collapsible-chevron open">' +
'<svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<path d="M9 6L15 12L9 18" stroke="currentColor"/>' +
'</svg>' +
'</button>';

// ── Collapsible sub-menu toggles (Elliptic curves, Abstract groups, …) ──
$('.collapsible-container').each(function(index) {
var $container = $(this);
Expand All @@ -102,7 +110,7 @@
var contentId = 'lmfdb-sidebar-entry-' + index;
$content.attr('id', contentId);

var $chev = $('<button type="button" class="collapsible-chevron open"><svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="3"/></svg></button>');
var $chev = $(chevronHTML);
$chev.attr('aria-controls', contentId);
$content.before($chev);

Expand Down Expand Up @@ -141,7 +149,7 @@
$section.attr('id', sectionId);

// Append the chevron into the h2
var $chev = $('<button type="button" class="collapsible-chevron open"><svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="3"/></svg></button>');
var $chev = $(chevronHTML);
$chev.attr('aria-controls', sectionId);
$h2.append($chev);
$h2.css('cursor', 'pointer');
Expand Down
24 changes: 18 additions & 6 deletions lmfdb/templates/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1610,7 +1610,7 @@ div.maassformplot img {

#sidebar table td a {
display: block;
padding: 2px;
padding: 2px 6px;
}

#sidebar table td .subtitle {
Expand Down Expand Up @@ -1640,11 +1640,13 @@ 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%;
padding-left: 2pt;
color: {{color.col_sidebar_header_links}}
padding-left: 6px;
color: {{color.col_sidebar_links}};
}

#sidebar .collapsible-chevron {
Expand All @@ -1662,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;
Expand All @@ -1671,15 +1679,19 @@ 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);
}


#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: 4px;
margin-top: 2px;
padding-left: 6px;
}
Expand All @@ -1690,7 +1702,7 @@ div.maassformplot img {

#sidebar .collapsible-content .subtitle a {
display: block;
padding: 2px;
padding: 3px 6px;
}

#sidebar .section-content {
Expand Down
Loading