Skip to content

Flyout: define position="inline" #500

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

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
+84 −11
Open

Flyout: define position="inline" #500

Show file tree
Hide file tree
Changes from 3 commits
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
14 changes: 14 additions & 0 deletions src/flyout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,20 @@
top: 50px;
}

.container.inline {
width: calc(100% - 20px);
padding: 0 10px;
margin: 0;
position: absolute;
bottom: 0;
}

@media screen and (max-width: 768px) {
.container.inline {
max-width: 100%;
}
}

:host > div {
font-family: var(
--readthedocs-flyout-font-family,
Expand Down
4 changes: 1 addition & 3 deletions src/flyout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export class FlyoutElement extends LitElement {
static properties = {
config: { state: true },
opened: { type: Boolean },
floating: { type: Boolean },
position: { type: String },
};

Expand All @@ -37,7 +36,6 @@ export class FlyoutElement extends LitElement {

this.config = null;
this.opened = false;
this.floating = true;
this.position = "bottom-right";
this.readthedocsLogo = READTHEDOCS_LOGO;
}
Expand Down Expand Up @@ -327,7 +325,7 @@ export class FlyoutElement extends LitElement {
}

updateCSSClasses() {
this.classes = { floating: this.floating, container: true };
this.classes = { container: true };
this.classes[this.position] = true;
}

Expand Down
4 changes: 2 additions & 2 deletions tests/__snapshots__/flyout.test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
export const snapshots = {};

snapshots["Flyout addon snapshot flyout completely"] =
`<div class="bottom-right container floating">
`<div class="bottom-right container">
<header>
<img
alt="Read the Docs"
Expand Down Expand Up @@ -121,7 +121,7 @@ snapshots["Flyout addon snapshot flyout completely"] =
/* end snapshot Flyout addon snapshot flyout completely */

snapshots["Flyout addon snapshot flyout with search disabled"] =
`<div class="bottom-right container floating">
`<div class="bottom-right container">
<header>
<img
alt="Read the Docs"
Expand Down