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

Flyout: define position="inline" #500

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Flyout: define position="inline" #500

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
186fde2
Flyout: define `position="inline"`
humitos Jan 16, 2025
9c8806d
Add some padding to the flyout respecting the container
humitos Jan 16, 2025
c242b50
Update tests to pass
humitos Jan 16, 2025
ad9fc4e
Use inline positioning instead of absolute (#501)
agjohnson Jan 20, 2025
f95fae5
I added my changes
humitos Jan 20, 2025
55ab856
Rename CSS classes
humitos Jan 20, 2025
60b9e33
Increase the size of the container and grow with it
humitos Jan 20, 2025
3372883
Fix down/up openings
humitos Jan 20, 2025
fa162e5
adjustments for Sphinx Furo theme
humitos Jan 20, 2025
721cfa7
Caculated properties are not needed
humitos Jan 21, 2025
bf6962c
Calculated width is not neeed here
humitos Jan 21, 2025
4af9427
Use JavaScript to calculate `margin-bottom` based on `main`'s height
humitos Jan 21, 2025
49e6b4e
Same for `.down` class
humitos Jan 21, 2025
8acadc3
Keep `width` because is required in some scenarios
humitos Jan 21, 2025
4e40ec2
Remove JS hack code
humitos Jan 23, 2025
bfde1ec
More CSS tricks
humitos Jan 28, 2025
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
Prev Previous commit
More CSS tricks
  • Loading branch information
@humitos
humitos committed Jan 28, 2025
commit bfde1ec1c6de6eb4c49fe65cceca36c02a65f97b
19 changes: 18 additions & 1 deletion src/flyout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,17 @@
.container {
position: fixed;
max-width: var(--readthedocs-flyout-max-width, 25em);
width: auto;
height: auto;
width: auto;
max-height: calc(100% - 100px);
overflow-y: auto;
line-height: var(--addons-flyout-line-height);
}

.container.closed {
height: 2.5rem;
}

.container.bottom-right:not(.inline) {
right: 20px;
bottom: 50px;
Expand Down Expand Up @@ -52,6 +56,16 @@
overflow: visible;
}

.container.up.inline main {
top: unset;
bottom: 2.5rem;
}

.container.down.inline main {
top: 2.5rem;
bottom: unset;
}

:host > div {
font-family: var(
--readthedocs-flyout-font-family,
Expand Down Expand Up @@ -137,6 +151,9 @@ main {

/* Use full width minus 1em padding added on left and right in `.container.inline main` */
width: calc(100% - 2em);

position: absolute;
margin-top: 0;
}

main.closed,
Expand Down