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

Fix Sidebar Text #411

Open
wants to merge 2 commits into
base: source
Choose a base branch
from
Open

Conversation

dean-krueger
Copy link

@dean-krueger dean-krueger commented Jan 23, 2025

There were three "issues" with the text in the sidebar of fuelcycle.org:

  • There was a huge space between the links and the text that wasn't a link (ie "Join the Cyclus Users mailing list")
  • When you hovered over the link part of those lines, it made a huge box that went all the way to the edge of the sidebar and pushed all the text after the link to a new line. This created a visual bug where if you tried to highlight one of the links it pushed everything to a new line and made the sidebar glitch out. This also made it sort of hard to click on the links
  • The text color of non-links is gray, and the links are red. This looks kind of weird.

This PR addresses the first two bullet points (obvious issues), but leaves the third issue (more of a design choice) for later if others agree that this looks weird.

The CSS that defines the behavior of these elements is mostly found in a file called cloud.css, which I think does not exist in the website folder anywhere, and instead gets imported from somewhere else. Thus, to fix these issues, I simply overwrote the rules that cloud.css sets out inside the cyclus.css_t file. Specifically, I modified:

div.sphinxlocaltoc ul a, div.sphinxglobaltoc ul a{
    display: inline;
    white-space: normal;
    word-wrap: normal;
}

to

div.sphinxlocaltoc ul a, div.sphinxglobaltoc ul a{
    display: inline;
    white-space: normal;
    word-wrap: normal;
    margin: 0 0 0 0;
    padding: 1px 0 3px 0;
}

to remove the spaces between words (cloud.css had left/right margin and padding on those elements)

and added:

div.sphinxsidebar ul li a:hover {
    display: inline !important; 
    min-width: auto !important; 
    background: none !important; 
    border-color: transparent !important; 
}

to override the little yellow highlight box that exists in the :hover behavior. It seemed simplest for me to just get rid of the box rather than mess with making the box look nice, since that would require adding more padding back in which would make a weird space. The new look simply changes the color of the link on :hover to be the same yellow it was before, but without drawing the box (or more specifically, drawing a transparent box).

It's worth noting that, in general, using !important is bad practice unless it's really necessary, however since the specificity of the css rules for those boxes in cloud.css was really high, and these rules are unlikely to be used elsewhere I felt it was okay to use !important here.

Another note: I'm pretty sure that you can get away with margin: 0;, but that hurts my brain (I like to see each one because it's a LOT more readable in my opinion). You cannot, however, get rid of the 0's in the padding: 1px 0 3px 0; block so far as I know.

Final note: The formatting on "Cyclus" vs "CYCLUS" is a little inconsistent. I deleted the span which made "Cyclus" all caps because that line was REALLY long already, and earlier in the sidebar it appears as "Cyclus" but it would be easy enough to add it back if you wanted

Closes #403

@dean-krueger dean-krueger requested a review from gonuke January 23, 2025 18:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix the text for the two mailing list links in the sidebar
1 participant