Skip to content

Adds survey banner to the docs site #20444

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.

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

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions docs/_includes/header_custom.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
<link rel="stylesheet" href="{% link assets/css/main.css %}">

<!-- User Engagement Survey Banner -->
<div id="survey-banner">
Copy link
Contributor

Choose a reason for hiding this comment

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

Not a blocker, the header shouldn't contain visual elements:

The element is a container for metadata (data about data) and is placed between the tag and the tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
https://www.w3schools.com/tags/tag_head.asp

The tag defines the document's body.
The element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
https://www.w3schools.com/tags/tag_body.asp

I wonder if there's an alterantive place to add this so it honors HTML semantics

<p>📣 We value your feedback — <a href="https://docs.google.com/forms/d/e/1FAIpQLSd9fgpXmyHOYViSaS6jK_6f1Y1nVSU_eA4UH-fWKYeO5HLvww/viewform" target="_blank" rel="noopener">take our 5-minute survey</a></p>
<button id="close-banner" aria-label="Close banner">&times;</button>
</div>
41 changes: 41 additions & 0 deletions docs/_includes/js/custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,44 @@ jtd.onReady(function(ready) {
}
}
});
/*
* Survey Banner Close Functionality
*
* This section handles the interactive behavior for the user engagement survey banner.
*/
(function() {
function initSurveyBanner() {
const banner = document.getElementById('survey-banner');
const closeButton = document.getElementById('close-banner');
const body = document.body;

if (!banner || !closeButton) {
return;
}

if (localStorage.getItem('surveyBannerClosed') === 'true') {
banner.style.display = 'none';
body.classList.add('banner-closed');
} else {
if (banner.offsetParent === null) {
body.appendChild(banner);
}
banner.style.display = 'flex';
banner.style.visibility = 'visible';
banner.style.opacity = '1';
body.classList.remove('banner-closed');
}

closeButton.addEventListener('click', function() {
banner.style.display = 'none';
body.classList.add('banner-closed');
localStorage.setItem('surveyBannerClosed', 'true');
});
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initSurveyBanner);
} else {
initSurveyBanner();
}
})();
74 changes: 74 additions & 0 deletions docs/assets/css/main.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,80 @@
---
---

/*
* Survey Banner Styles
*
* This stylesheet contains all styling for the user engagement survey banner
* that appears at the top of all pages.
*/
body {
padding-top: 50px !important;
}

body.banner-closed {
padding-top: 0 !important;
}

#survey-banner {
background-color: #2c3e50;
color: white;
padding: 12px 20px;
text-align: center;
font-size: 13px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-sizing: border-box;
border-bottom: 2px solid #34495e;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}

#survey-banner p {
margin: 0;
line-height: 1.4;
flex: 1;
}

#survey-banner a {
color: #3498db;
text-decoration: underline;
}

#survey-banner a:hover {
color: #5dade2;
}

#close-banner {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
flex-shrink: 0;
}

#close-banner:hover {
background-color: rgba(255, 255, 255, 0.1);
}

#close-banner:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}

#main-content p {
text-align: justify;
}
Expand Down