Skip to content

Commit

Permalink
Merge pull request #161 from gsbdarc/QA
Browse files Browse the repository at this point in the history 
Qa
  • Loading branch information
@natalya-patrikeeva
natalya-patrikeeva authored Feb 13, 2025
2 parents 6e02a50 + 3e32861 commit 30fb29a
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 152 deletions.
309 changes: 163 additions & 146 deletions docs/js/announcement-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ document.addEventListener("DOMContentLoaded", function () {
// 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇
// setAnnouncmentBar(type="ALERT", message=shortMessage+linkedText+longMessage); // FOR TESTING

// TEMPORARY –– TO BE REMOVED: Announcing the new site
setAnnouncmentBar(type="INFORMATION", 'Hey There 👋 Welcome to the new GSB Research Computing Site! This site is the new and improved version of <a href="https://rcpedia.stanford.edu" target="_blank"> RCpedia</a>. If you are a member of the Stanford community, please <a href="https://app.slack.com/client/E7SAV7LAD/C01JXJ6U4E5" target="_blank">join our Slack channel</a> and tell us what you think!');
// TEMPORARY –– MSG TO BE REMOVED: Announcing the new site
setAnnouncmentBar(type="INFORMATION", 'Hey There! 👋 Welcome to the new GSB Research Computing Site! This site is the new and improved version of RCpedia. If you are a member of the Stanford community, please <a href="https://app.slack.com/client/E7SAV7LAD/C01JXJ6U4E5" target="_blank">join our Slack channel</a> and tell us what you think!');

// 👆 👆 👆 👆 👆 👆 👆 👆 👆 👆

Expand All @@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function () {
// setAnnouncmentBar(type="ALERT", message='The Yen servers are scheduled for a routine reboot next <b>Thursday, January 23, 2025</b>.');
// setAnnouncmentBar(type="SUCCESS", 'The issues with JupyterHub have been resolved. Please visit the <a href="/status">Status page</a> or <a href="https://app.slack.com/client/E7SAV7LAD/C01JXJ6U4E5" target="_blank">join our Slack channel </a>to be informed of any server status changes.');


console.log(localStorage.getItem("announcementDismissed"));
// ======================== F U N C T I O N ========================
function setAnnouncmentBar(type, message) {
`
Expand All @@ -32,164 +32,181 @@ document.addEventListener("DOMContentLoaded", function () {
- type options: WARNING, ALERT, INFORMATION, SUCCESS, or ERROR.
- message (string): The announcement content. Use <a> tags for links.
`
if (localStorage.getItem("announcementDismissed") === "false") {

console.log("Setting announcement bar");

console.log("Setting announcement bar");

const banner = document.querySelector(".md-banner");
if (!banner) {
console.warn("⚠️ .md-banner element not found!");
return;
}

const bannerContent = banner.querySelector(".md-banner__inner");
bannerContent.style.display = "flex";
bannerContent.style.alignItems = "flex-start"; // Align everything to the top
bannerContent.style.justifyContent = "space-between";
bannerContent.style.flexWrap = "wrap"; // Allows wrapping
bannerContent.style.gap = "10px";

const closeButton = document.querySelector(".md-banner__button.md-icon");
const existingSvg = closeButton.querySelector("svg");
if (existingSvg) existingSvg.remove();

const alertIcon = document.createElement("img");
const closeIcon = document.createElement("img");

switch (type.toUpperCase()) {
case "WARNING":
banner.style.backgroundColor = "#FEC51D";
bannerContent.style.color = "black";
alertIcon.src = "/assets/svg/warn-triangle-icon-solid.svg";
break;
case "ALERT":
banner.style.backgroundColor = "#EAEAEA";
bannerContent.style.color = "black";
alertIcon.src = "/assets/svg/bell-icon-solid.svg";
break;
case "INFORMATION":
banner.style.backgroundColor = "#006CB8";
alertIcon.src = "/assets/svg/check-circle-icon-solid.svg";
alertIcon.style.filter = "invert(100%)";
closeIcon.style.filter = "invert(100%)";
break;
case "SUCCESS":
banner.style.backgroundColor = "#008566";
alertIcon.src = "/assets/svg/check-circle-icon-solid.svg";
alertIcon.style.filter = "invert(100%)";
closeIcon.style.filter = "invert(100%)";
break;
case "ERROR":
banner.style.backgroundColor = "#B1040E";
alertIcon.src = "/assets/svg/error-circle-icon-solid.svg";
alertIcon.style.filter = "invert(100%)";
closeIcon.style.filter = "invert(100%)";
break;
default:
console.error("ERROR: Invalid announcement type – Use WARNING, ALERT, INFORMATION, SUCCESS, or ERROR");
const banner = document.querySelector(".md-banner");
if (!banner) {
console.warn("⚠️ .md-banner element not found!");
return;
}
}

banner.style.padding = "10px";
alertIcon.alt = "Alert Icon";
alertIcon.style.width = "20px";
alertIcon.style.height = "20px";
alertIcon.style.marginRight = "10px";
alertIcon.style.verticalAlign = "top";
alertIcon.style.position = "relative";
alertIcon.style.top = "2px";

closeIcon.src = "/assets/svg/x-close-circle-solid.svg";
closeIcon.alt = "Close Button";
closeIcon.style.width = "20px";
closeIcon.style.height = "20px";

// Create a new span for the text "DISMISS"
const dismissText = document.createElement("span");
dismissText.textContent = "DISMISS";
dismissText.style.letterSpacing = "2px";
dismissText.style.fontWeight = "bold";
dismissText.style.marginRight = "8px";

// Create a container for the dismiss button and text
const dismissContainer = document.createElement("div");
dismissContainer.style.display = "flex";
dismissContainer.style.alignItems = "center";
dismissContainer.appendChild(dismissText);
dismissContainer.appendChild(closeIcon);

closeButton.innerHTML = "";
closeButton.appendChild(dismissContainer);

// Create the type text
const typeText = document.createElement("b");
typeText.style.letterSpacing = "2px";
typeText.style.marginRight = "10px";
typeText.style.verticalAlign = "top";
typeText.textContent = `${type}:`;

// Create a container for message text
const tempContainer = document.createElement("div");
tempContainer.innerHTML = message;
tempContainer.style.flex = "1";
tempContainer.style.minWidth = "200px";
tempContainer.style.verticalAlign = "top";

// Style the <a> tag within the message
const links = tempContainer.querySelectorAll("a");
links.forEach(link => {
link.style.textDecoration = "underline"; // Apply underline to each link
});
const bannerContent = banner.querySelector(".md-banner__inner");
bannerContent.style.display = "flex";
bannerContent.style.alignItems = "flex-start"; // Align everything to the top
bannerContent.style.justifyContent = "space-between";
bannerContent.style.flexWrap = "wrap"; // Allows wrapping
bannerContent.style.gap = "10px";

const closeButton = document.querySelector(".md-banner__button.md-icon");
closeButton.id = "dismissButton";
const alertIcon = document.createElement("img");
const closeIcon = document.createElement("img");

switch (type.toUpperCase()) {
case "WARNING":
banner.style.backgroundColor = "#FEC51D";
bannerContent.style.color = "black";
alertIcon.src = "/assets/svg/warn-triangle-icon-solid.svg";
break;
case "ALERT":
banner.style.backgroundColor = "#EAEAEA";
bannerContent.style.color = "black";
alertIcon.src = "/assets/svg/bell-icon-solid.svg";
break;
case "INFORMATION":
banner.style.backgroundColor = "#006CB8";
alertIcon.src = "/assets/svg/check-circle-icon-solid.svg";
alertIcon.style.filter = "invert(100%)";
closeIcon.style.filter = "invert(100%)";
break;
case "SUCCESS":
banner.style.backgroundColor = "#008566";
alertIcon.src = "/assets/svg/check-circle-icon-solid.svg";
alertIcon.style.filter = "invert(100%)";
closeIcon.style.filter = "invert(100%)";
break;
case "ERROR":
banner.style.backgroundColor = "#B1040E";
alertIcon.src = "/assets/svg/error-circle-icon-solid.svg";
alertIcon.style.filter = "invert(100%)";
closeIcon.style.filter = "invert(100%)";
break;
default:
console.error("ERROR: Invalid announcement type – Use WARNING, ALERT, INFORMATION, SUCCESS, or ERROR");
return;
}

// Create a flex container to align the message properly
const messageContainer = document.createElement("div");
messageContainer.style.display = "flex";
messageContainer.style.alignItems = "flex-start"; // Ensures everything is aligned at the top
messageContainer.style.gap = "10px";
messageContainer.style.flexWrap = "wrap";
messageContainer.style.flex = "1";

messageContainer.appendChild(alertIcon);
messageContainer.appendChild(typeText);
messageContainer.appendChild(tempContainer);

bannerContent.innerHTML = "";
bannerContent.appendChild(messageContainer);
bannerContent.appendChild(closeButton);

// **Responsive Behavior - Move the dismiss button to a new line on mobile**
function adjustLayout() {
if (window.innerWidth <= 768) {
// On small screens, wrap dismiss button to a new line
closeButton.style.width = "100%"; // Make it take full width
closeButton.style.display = "flex"; // Enable flexbox
closeButton.style.justifyContent = "flex-end"; // Align to the right
closeButton.style.textAlign = "right"; // Ensure text is aligned correctly
bannerContent.style.flexDirection = "column"; // Stack elements vertically
} else {
// On larger screens, keep everything inline
closeButton.style.width = "auto";
closeButton.style.textAlign = "left";
bannerContent.style.flexDirection = "row";
banner.style.padding = "10px";
alertIcon.alt = "Alert Icon";
alertIcon.style.width = "20px";
alertIcon.style.height = "20px";
alertIcon.style.marginRight = "10px";
alertIcon.style.verticalAlign = "top";
alertIcon.style.position = "relative";
alertIcon.style.top = "2px";

closeIcon.src = "/assets/svg/x-close-circle-solid.svg";
closeIcon.alt = "Close Button";
closeIcon.style.width = "20px";
closeIcon.style.height = "20px";

// Create a new span for the text "DISMISS"
const dismissText = document.createElement("span");
dismissText.textContent = "DISMISS";
dismissText.style.letterSpacing = "2px";
dismissText.style.fontWeight = "bold";
dismissText.style.marginRight = "8px";

// Create a container for the dismiss button and text
const dismissContainer = document.createElement("div");
dismissContainer.style.display = "flex";
dismissContainer.style.alignItems = "center";
dismissContainer.appendChild(dismissText);
dismissContainer.appendChild(closeIcon);

// const innerTextContent = document.querySelector(".md-banner__inner");
// innerTextContent.innerHTML += "hi"

closeButton.innerHTML = "";
closeButton.appendChild(dismissContainer);

// Create the type text
const typeText = document.createElement("b");
typeText.style.letterSpacing = "2px";
typeText.style.marginRight = "10px";
typeText.style.verticalAlign = "top";
typeText.textContent = `${type}:`;

// Create a container for message text
const tempContainer = document.createElement("div");
tempContainer.innerHTML = message;
tempContainer.style.flex = "1";
tempContainer.style.minWidth = "200px";
tempContainer.style.verticalAlign = "top";

// Style the <a> tag within the message
const links = tempContainer.querySelectorAll("a");
links.forEach(link => {
link.style.textDecoration = "underline"; // Apply underline to each link
});

// Create a flex container to align the message properly
const messageContainer = document.createElement("div");
messageContainer.style.display = "flex";
messageContainer.style.alignItems = "flex-start"; // Ensures everything is aligned at the top
messageContainer.style.gap = "10px";
messageContainer.style.flexWrap = "wrap";
messageContainer.style.flex = "1";

messageContainer.appendChild(alertIcon);
messageContainer.appendChild(typeText);
messageContainer.appendChild(tempContainer);

bannerContent.prepend(messageContainer); // bannerContent.appendChild(closeButton);

// **Responsive Behavior - Move the dismiss button to a new line on mobile**
function adjustLayout() {
if (window.innerWidth <= 768) {
// On small screens, wrap dismiss button to a new line
closeButton.style.width = "100%"; // Make it take full width
closeButton.style.display = "flex"; // Enable flexbox
closeButton.style.justifyContent = "flex-end"; // Align to the right
closeButton.style.textAlign = "right"; // Ensure text is aligned correctly
bannerContent.style.flexDirection = "column"; // Stack elements vertically
} else {
// On larger screens, keep everything inline
closeButton.style.width = "auto";
closeButton.style.textAlign = "left";
bannerContent.style.flexDirection = "row";
}
}
}

// Run once on page load
adjustLayout();
// Run once on page load
adjustLayout();

// Update on window resize
window.addEventListener("resize", adjustLayout);
// Update on window resize
window.addEventListener("resize", adjustLayout);
}
}

const bannerContent = document.querySelector(".md-banner__inner");

// If the banner content is unset, remove it
if (bannerContent.textContent.trim() == "‎") { //
function removeBanner(){
const banner = document.querySelector(".md-banner");
if (banner) {
console.log("Removing banner because the content has not been set above.")
banner.remove();
}
}

// const bannerContent = document.querySelector(".md-banner__inner");
// // If the banner content is unset, remove it
// if (bannerContent.textContent.trim() == "‎") { //
// removeBanner()
// }

});

document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("dismissButton"); // Change this to match your button's ID

localStorage.setItem("announcementDismissed", "false"); // Store the button initial state

// Event listener for button click
if (button) {
button.addEventListener("click", function () {
localStorage.setItem("announcementDismissed", "true"); // Store the button click
console.log("Button clicked and stored in cache!");
});
}
});
6 changes: 4 additions & 2 deletions docs/stylesheets/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@
.md-banner .icon {
margin-left: 0.2em;
}

.md-banner {
background-color: #006CB8;
}
/* Header logo */
.md-header-nav__button img {
width: auto; /* Maintain aspect ratio */
Expand Down Expand Up @@ -77,7 +79,7 @@
height: auto;
}
.md-search__icon svg {
fill: #B1040E; /* Change this to your desired color */
fill: #B1040E;
}
#searchForm1 {
background-color: #c4c4c4;
Expand Down
2 changes: 1 addition & 1 deletion mkdocs.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@ extra_css:
- stylesheets/custom.css

extra_javascript:
# - js/announcement-bar.js
- js/footer.js
- js/announcement-bar.js

watch:
- docs
Expand Down
3 changes: 1 addition & 2 deletions overrides/main.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{% extends "base.html" %}

{% block announce %}
<!-- This is necessary for the default announcement bar to be overridden -->
<!-- Custom message and styling code can be found in js/announcement-bar.js -->
‎
Hey There! 👋 Welcome to the new GSB Research Computing Site! This site is the new and improved version of RCpedia. If you are a member of the Stanford community, please <a href="https://app.slack.com/client/E7SAV7LAD/C01JXJ6U4E5" target="_blank" style="text-decoration: underline;">Join our Slack channel</a> and tell us what you think!
{% endblock %}
Loading

0 comments on commit 30fb29a

Please sign in to comment.