diff --git a/pep_sphinx_extensions/pep_processor/parsing/pep_banner_directive.py b/pep_sphinx_extensions/pep_processor/parsing/pep_banner_directive.py index d0f1cbee2..6b247bcc5 100644 --- a/pep_sphinx_extensions/pep_processor/parsing/pep_banner_directive.py +++ b/pep_sphinx_extensions/pep_processor/parsing/pep_banner_directive.py @@ -34,6 +34,9 @@ class PEPBanner(rst.Directive): else: pre_text = self.admonition_pre_text + close_button_node = nodes.paragraph('', '', nodes.Text('×'), classes=['close-button']) + close_button_node['classes'].append('close-button') + pre_text_node = nodes.paragraph(pre_text) pre_text_node.line = self.lineno pre_node, pre_msg = self.state.inline_text(pre_text, self.lineno) @@ -50,6 +53,7 @@ class PEPBanner(rst.Directive): "\n".join(source_lines), classes=["pep-banner"] + self.css_classes) admonition_node.append(pre_text_node) + admonition_node.append(close_button_node) if self.content: self.state.nested_parse( self.content, self.content_offset, admonition_node) diff --git a/pep_sphinx_extensions/pep_theme/static/sticky_banner.js b/pep_sphinx_extensions/pep_theme/static/sticky_banner.js index cc2ceb3dd..e20f62d2d 100644 --- a/pep_sphinx_extensions/pep_theme/static/sticky_banner.js +++ b/pep_sphinx_extensions/pep_theme/static/sticky_banner.js @@ -22,6 +22,16 @@ document.addEventListener("DOMContentLoaded", () => { node.replaceChildren(text); } + const closeButton = document.querySelector('.close-button'); + if (closeButton) { + closeButton.addEventListener('click', () => { + const stickyBanner = document.querySelector('.sticky-banner'); + if (stickyBanner) { + stickyBanner.style.display = 'none'; + } + }); + } + adjustBannerMargin(); document.addEventListener("resize", adjustBannerMargin); document.addEventListener("load", adjustBannerMargin); diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css index 36393159a..9428e8c42 100644 --- a/pep_sphinx_extensions/pep_theme/static/style.css +++ b/pep_sphinx_extensions/pep_theme/static/style.css @@ -407,8 +407,31 @@ dl.footnote > dd { } /* Sticky banners */ +/* Default styles, sticky for larger screens */ .sticky-banner { top: 0; position: sticky; z-index: 1; } + +/* Override for smaller screens, non-sticky */ +@media (max-width: 600px) { + .sticky-banner { + position: static; + padding: 5px; + font-size: 12px; + } +} + +.close-button { + cursor: pointer; + position: absolute; + top: 0; + right: 0; + padding: 0.5em; + font-size: 1.5em; + border: none; + background: transparent; + color: inherit; + margin-top: 0; +} \ No newline at end of file