Skip to content

Use CSS instead of JS for floating docs banner [#1988] #2075

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

Closed
wants to merge 21 commits into from
Closed

Use CSS instead of JS for floating docs banner [#1988] #2075

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
770ae28
Fixed incorrect pluralization of LocalDjangoCommunity in admin - Issu…
arpan8925 Nov 16, 2024
b051a8d
Merge pull request #1 from arpan8925/arpan8925-issue1739
arpan8925 Nov 16, 2024
2b5ac70
Merge branch 'django:main' into main
arpan8925 Nov 20, 2024
6b3ec85
update
arpan8925 Nov 23, 2024
a44d056
atomic transaction issue - fixed
arpan8925 Nov 23, 2024
276b6fd
Update
arpan8925 Nov 23, 2024
656e5f7
Merge pull request #2 from arpan8925/Issue-1764
arpan8925 Nov 23, 2024
f3ab5ef
Merge branch 'django:main' into arpan8925---issue1764
arpan8925 Nov 23, 2024
f2f4632
Merge pull request #3 from arpan8925/arpan8925---issue1764
arpan8925 Nov 23, 2024
4075d2a
Merge branch 'main' of https://github.com/arpan8925/djangoproject.com
arpan8925 Nov 23, 2024
69c1b5e
Merge remote-tracking branch 'upstream/main'
arpan8925 May 14, 2025
765fa77
Fully Running state
arpan8925 May 14, 2025
e39c210
Issue #1988 Fixed
arpan8925 May 14, 2025
c5830db
Untrack venv and add it to .gitignore
arpan8925 May 15, 2025
577e696
Untrack venv and add it to .gitignore
arpan8925 May 15, 2025
2d60be7
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 15, 2025
7adc7dc
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 15, 2025
5af8620
1988 resolved
arpan8925 May 17, 2025
b2d8d15
Added fallback styles and JS for doc warning banner without :has() su…
arpan8925 May 20, 2025
455568d
Merge branch 'arpan_issue_1988' of https://github.com/arpan8925/djang…
arpan8925 May 20, 2025
2af3c9c
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] May 20, 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
45 changes: 42 additions & 3 deletions djangoproject/scss/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,39 @@ CSS rendered with Libsass 0.7.0
*/

//------------------- Globals
/* Fallback for browsers that don't support :has() */
html {
scroll-padding-top: 38px;
}

body {
/* Add a class to the body element when the warning is present */
&.has-doc-warning {
margin-top: 38px;
}
}

/* Modern browsers that support :has() */
@supports selector(:has(a, b)) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This doesn't seem to work.

❯ make compile-scss
python -m pysassc djangoproject/scss/output.scss djangoproject/static/css/output.css --style=compressed
pysassc.py: error: Error: Invalid CSS after "@supports ": expected @supports condition (e.g. (display: flexbox)), was "selector(:has(a, b)"
        on line 28:10 of djangoproject/scss/_style.scss
        from line 4:1 of djangoproject/scss/output.scss
>> @supports selector(:has(a, b)) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok Checking

Copy link
Contributor Author

@arpan8925 arpan8925 May 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

The issue was happening for, actually pysassc does not support modern selector-based feature queries like: @supports selector(:has(#dev-warning)) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

So I left with 2 Options acutally

Using JavaScript-based detection only
or
Using PostCSS or Dart Sass via a JS or Node build chain instead of LibSass of pysassc .

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, unfortunately I think we're stuck with the JavaScript approach for now. Do you agree @marksweb?

html {
scroll-padding-top: 0; /* Reset */

&:has(#dev-warning, #outdated-warning) {
scroll-padding-top: 38px;
}
}

body {
&.has-doc-warning {
margin-top: 0; /* Reset */
}

&:has(#dev-warning, #outdated-warning) {
margin-top: 38px;
}
}
}

body {
@include serif;
@include font-size(18);
Expand Down Expand Up @@ -2357,9 +2390,11 @@ h2+.list-link-soup {

#dev-warning,
#outdated-warning {
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 38px;
padding: 8px 20px 8px;
box-sizing: border-box;
background-image: linear-gradient(135deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
Expand All @@ -2368,10 +2403,14 @@ h2+.list-link-soup {
text-align: center;
background-color: $warning-bg;
color: $text;
z-index: 1000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

@include respond-min(768px) {
position: fixed;
min-width: 768px;
white-space: normal;
overflow: visible;
}
}

Expand Down
33 changes: 4 additions & 29 deletions djangoproject/static/js/djangoproject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,37 +151,12 @@ document.querySelectorAll('.btn-clipboard').forEach(function (el) {
});
});

// Compensate for floating warning element when scrolling to a URL hash in docs
// Add a class to the body element when a warning is present
// This is a fallback for browsers that don't support the :has() selector
(function () {
const warning_el = document.querySelector('.doc-floating-warning');

if (!warning_el) {
return;
}

// This element will dynamically enforce the correct amount of top spacing
const warning_el_copy = warning_el.cloneNode(true);

warning_el_copy.style.position = 'relative';

document.body.prepend(warning_el_copy);

function scroll_to_hash(e) {
const target_el = document.querySelector(window.location.hash || null);

if (!target_el) {
return;
}

const y_position = target_el.getBoundingClientRect().top + window.scrollY;
const correction = -warning_el.offsetHeight - 4;

window.scrollTo(0, y_position + correction);
if (document.querySelector('#dev-warning, #outdated-warning')) {
document.body.classList.add('has-doc-warning');
}

setTimeout(scroll_to_hash, 50);

window.addEventListener('hashchange', scroll_to_hash);
})();

// Update donate button text on fundraising page based on interval selection
Expand Down
Loading