rust/comprehensive-rust
1
0
Fork 0
mirror of https://github.com/google/comprehensive-rust.git synced 2025-11-27 00:21:07 +02:00
Code Issues Releases Activity

Add a dev theme to help with slide aspect ratio (#1842)

Browse Source 
Added a dev theme to help with slide aspect ratio while updating content
or for reviewing PRs.

Fixes #1796.

---------

Co-authored-by: Dustin J. Mitchell <djmitche@google.com>
Co-authored-by: Martin Geisler <martin@geisler.net>
This commit is contained in:
Manichand Kondapaka
2024-03-05 16:03:42 +05:30
committed by GitHub
parent c509dbd9e4
commit 0761f936ca
6 changed files with 67 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
theme/css/redbox.css Normal file
View File

@@ -0,0 +1,20 @@
div#aspect-ratio-helper {
position: fixed;
top: 8px;
left: 8px;
right: 8px;
z-index: 1000;
pointer-events: none;
}
div#aspect-ratio-helper div {
outline: 3px dashed red;
margin: 0 auto;
/* At this width, the theme fonts are readable in a 16
person conference room. If the browser is wider, the
text becomes too small to be legible. */
max-width: 980px;
/* On a standard 16/9 monitor, we expect to lose a bit
of vertical space to borders. */
aspect-ratio: 16/8.5;
}

38
theme/redbox.js Normal file
View File

@@ -0,0 +1,38 @@
(function redBoxButton() {
// Create a new div element
var newDiv = document.createElement("div");
// Set the id attribute of the new div
newDiv.id = "aspect-ratio-helper";
// Create a nested div inside the new div
var nestedDiv = document.createElement("div");
// Append the nested div to the new div
newDiv.appendChild(nestedDiv, newDiv.firstChild);
// Get the parent element where you want to append the new div
var parentElement = document.body; // Change this to your desired parent element
// Append the new div to the parent element
parentElement.insertBefore(newDiv, parentElement.firstChild);
// Create the button element
var hideShowButton = document.createElement("button");
hideShowButton.innerHTML = '<i class="fa fa-square-o"></i>';
hideShowButton.className = "icon-button";
hideShowButton.type = "button";
hideShowButton.title =
"Outline the area that fits on one screen while teaching the course.";
hideShowButton.id = "Dev";
var navbarButtons = document.getElementsByClassName("left-buttons");
navbarButtons[0].insertBefore(hideShowButton, navbarButtons.firstChild);
//Default hiding the redbox
document.getElementById("aspect-ratio-helper").style.display = "none";
//Add Event listener to button to perform on click action.
hideShowButton.addEventListener("click", function () {
if (
document.getElementById("aspect-ratio-helper").style.display === "none"
) {
document.getElementById("aspect-ratio-helper").style.display = "block";
hideShowButton.innerHTML = '<i class="fa fa-square"></i>';
} else {
document.getElementById("aspect-ratio-helper").style.display = "none";
hideShowButton.innerHTML = '<i class="fa fa-square-o"></i>';
}
});
})();