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.

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

Fixing page width overflow after bottom cards change #276

Merged
merged 4 commits into from
Oct 28, 2024
Merged

Fixing page width overflow after bottom cards change #276

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
004206f
Fixing width after bottom cards change
lidiazuin Oct 23, 2024
1a219ab
New class .bottom-cards
lidiazuin Oct 24, 2024
713c765
fixing card size in hub pages
lidiazuin Oct 24, 2024
0e1490f
Adding Neils changes to the PR
lidiazuin Oct 25, 2024
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
4 changes: 2 additions & 2 deletions src/css/docs-ndl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -734,8 +734,8 @@ body.docs-ndl .widget.highlights:nth-of-type(even) .openblock {
}

/* For the bottom cards */
body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody {
flex: 0 0 152%;
body.docs-ndl .cards:nth-last-child(-n+2) .sectionbody>div.sect2 {
flex: 0 0 49%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think targeting >div.sect2 is the right way to go, but we need something more specific, because this also affects cards on other pages. Any page where there is a cards section will have this applied to the last set of cards.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I've been looking at nth-child and nth-last-child and while there's some things we can do with it, we might want to just create a class that displays two cards on a row and then add that as a role on sections of pages where we want to use it.

Or we could have something slightly 'interesting'...

body.docs-ndl .doc > div:nth-child(even of .cards) .sectionbody > div:nth-child(-n + 2 of .sect2) {
  flex: 0 0 49%;
}

In every even numbered set of cards, the first two cards will be half-width.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we will need a new class. Even this suggestion that you made is breaking the subpages too. I will see what I can do.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this change would apply to those pages as well.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I fixed it now, but one thing that was broken in the ui preview was in the hub page, icons with bigger resolution would expand and overflow, and icons with smaller resolutions and png wouldn't "grow". We could enforce a max-width, but on the live website, all icons seem to be in the right size and in case some are not, I can just re-upload to the proper size.

}

body.docs-ndl body.docs-ndl .cards .sect2 .icon img {
Expand Down
Loading