[matrix] Refactor JS & add searchbar to mobile.
This commit is contained in:
Josh
GitHub
parent
2d441cc533
commit
3ce7ab2fc4
22
docs/_static/copy.js
vendored
22
docs/_static/copy.js
vendored
@ -17,18 +17,18 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
let allCodeblocks = document.querySelectorAll("div[class='highlight']");
|
||||
|
||||
for (let codeblock of allCodeblocks) {
|
||||
codeblock.parentNode.className += " relative-copy";
|
||||
let copyEl = document.createElement("span");
|
||||
copyEl.addEventListener('click', () => copy(codeblock));
|
||||
copyEl.className = "copy";
|
||||
copyEl.setAttribute("aria-label", "Copy Code");
|
||||
copyEl.setAttribute("title", "Copy Code");
|
||||
codeblock.parentNode.className += " relative-copy";
|
||||
let copyEl = document.createElement("span");
|
||||
copyEl.addEventListener('click', () => copy(codeblock));
|
||||
copyEl.className = "copy";
|
||||
copyEl.setAttribute("aria-label", "Copy Code");
|
||||
copyEl.setAttribute("title", "Copy Code");
|
||||
|
||||
let copyIcon = document.createElement("span");
|
||||
copyIcon.className = "material-icons";
|
||||
copyIcon.textContent = COPY;
|
||||
copyEl.append(copyIcon);
|
||||
let copyIcon = document.createElement("span");
|
||||
copyIcon.className = "material-icons";
|
||||
copyIcon.textContent = COPY;
|
||||
copyEl.append(copyIcon);
|
||||
|
||||
codeblock.prepend(copyEl);
|
||||
codeblock.prepend(copyEl);
|
||||
}
|
||||
});
|
||||
|
||||
204
docs/_static/custom.js
vendored
204
docs/_static/custom.js
vendored
@ -1,140 +1,69 @@
|
||||
'use-strict';
|
||||
|
||||
let activeModal = null;
|
||||
let activeLink = null;
|
||||
let bottomHeightThreshold, sections;
|
||||
let settingsModal;
|
||||
let hamburgerToggle;
|
||||
let mobileSearch;
|
||||
let sidebar;
|
||||
|
||||
function resizeSidebar() {
|
||||
let rect = sidebar.getBoundingClientRect();
|
||||
sidebar.style.height = `calc(100vh - 1em - ${rect.top + document.body.offsetTop}px)`;
|
||||
}
|
||||
|
||||
function closeModal(modal) {
|
||||
activeModal = null;
|
||||
modal.hidden = true;
|
||||
}
|
||||
|
||||
function openModal(modal) {
|
||||
if (activeModal) {
|
||||
closeModal(activeModal);
|
||||
class Modal {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
activeModal = modal;
|
||||
modal.hidden = false;
|
||||
}
|
||||
|
||||
function changeDocumentation(element) {
|
||||
window.location = element.value;
|
||||
}
|
||||
|
||||
function updateSetting(element) {
|
||||
let value;
|
||||
switch (element.type) {
|
||||
case "checkbox":
|
||||
localStorage.setItem(element.name, element.checked);
|
||||
value = element.checked;
|
||||
break;
|
||||
case "radio":
|
||||
localStorage.setItem(element.name, `"${element.value}"`);
|
||||
value = element.value;
|
||||
break;
|
||||
close() {
|
||||
activeModal = null;
|
||||
this.element.hidden = true;
|
||||
}
|
||||
if (element.name in settings) {
|
||||
settings[element.name]["setter"](value);
|
||||
}
|
||||
}
|
||||
|
||||
function LoadSetting(name, defaultValue) {
|
||||
let value = JSON.parse(localStorage.getItem(name));
|
||||
return value === null ? defaultValue : value;
|
||||
}
|
||||
|
||||
function getRootAttributeToggle(attributeName, valueName) {
|
||||
function toggleRootAttribute(set) {
|
||||
if (set) {
|
||||
document.documentElement.setAttribute(`data-${attributeName}`, valueName);
|
||||
} else {
|
||||
document.documentElement.removeAttribute(`data-${attributeName}`);
|
||||
open() {
|
||||
if (activeModal) {
|
||||
activeModal.close();
|
||||
}
|
||||
}
|
||||
return toggleRootAttribute;
|
||||
}
|
||||
|
||||
function setTheme(value) {
|
||||
if (value === "automatic") {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute(`data-theme`, "dark");
|
||||
} else{
|
||||
document.documentElement.setAttribute(`data-theme`, "light");
|
||||
}
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute(`data-theme`, value);
|
||||
activeModal = this;
|
||||
this.element.hidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
const settings = {
|
||||
useSerifFont: {
|
||||
settingType: "checkbox",
|
||||
defaultValue: false,
|
||||
setter: getRootAttributeToggle('font', 'serif')
|
||||
},
|
||||
setTheme: {
|
||||
settingType: "radio",
|
||||
defaultValue: "automatic",
|
||||
setter: setTheme
|
||||
}
|
||||
};
|
||||
class Search {
|
||||
|
||||
Object.entries(settings).forEach(([name, setting]) => {
|
||||
let { defaultValue, setter, ..._ } = setting;
|
||||
let value = LoadSetting(name, defaultValue);
|
||||
try {
|
||||
setter(value);
|
||||
} catch (error) {
|
||||
console.error(`Failed to apply setting "${name}" With value:`, value);
|
||||
console.error(error);
|
||||
constructor() {
|
||||
this.box = document.querySelector('nav.mobile-only');
|
||||
this.bar = document.querySelector('nav.mobile-only input[type="search"]');
|
||||
this.openButton = document.getElementById('open-search');
|
||||
this.closeButton = document.getElementById('close-search');
|
||||
}
|
||||
});
|
||||
|
||||
open() {
|
||||
this.openButton.hidden = true;
|
||||
this.closeButton.hidden = false;
|
||||
this.box.style.top = "100%";
|
||||
this.bar.focus();
|
||||
}
|
||||
|
||||
close() {
|
||||
this.openButton.hidden = false;
|
||||
this.closeButton.hidden = true;
|
||||
this.box.style.top = "0";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
mobileSearch = new Search();
|
||||
|
||||
bottomHeightThreshold = document.documentElement.scrollHeight - 30;
|
||||
sections = document.querySelectorAll('section');
|
||||
settingsModal = document.querySelector('div#settings.modal');
|
||||
hamburgerToggle = document.getElementById("hamburger-toggle");
|
||||
sidebar = document.getElementById("sidebar");
|
||||
hamburgerToggle = document.getElementById('hamburger-toggle');
|
||||
|
||||
resizeSidebar();
|
||||
|
||||
sidebar.addEventListener("click", (e) => {
|
||||
// If we click a navigation, close the hamburger menu
|
||||
if (e.target.tagName == "A" && sidebar.classList.contains("sidebar-toggle")) {
|
||||
sidebar.classList.remove("sidebar-toggle");
|
||||
let button = hamburgerToggle.firstElementChild;
|
||||
button.textContent = "menu";
|
||||
|
||||
// Scroll a little up to actually see the header
|
||||
// Note: this is generally around ~55px
|
||||
// A proper solution is getComputedStyle but it can be slow
|
||||
// Instead let's just rely on this quirk and call it a day
|
||||
// This has to be done after the browser actually processes
|
||||
// the section movement
|
||||
setTimeout(() => window.scrollBy(0, -100), 75);
|
||||
}
|
||||
})
|
||||
|
||||
hamburgerToggle.addEventListener("click", (e) => {
|
||||
sidebar.classList.toggle("sidebar-toggle");
|
||||
hamburgerToggle.addEventListener('click', (e) => {
|
||||
sidebar.element.classList.toggle('sidebar-toggle');
|
||||
let button = hamburgerToggle.firstElementChild;
|
||||
if (button.textContent == "menu") {
|
||||
button.textContent = "close";
|
||||
if (button.textContent == 'menu') {
|
||||
button.textContent = 'close';
|
||||
}
|
||||
else {
|
||||
button.textContent = "menu";
|
||||
button.textContent = 'menu';
|
||||
}
|
||||
});
|
||||
|
||||
@ -145,59 +74,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// insert ourselves after the element
|
||||
parent.insertBefore(table, element.nextSibling);
|
||||
});
|
||||
|
||||
Object.entries(settings).forEach(([name, setting]) => {
|
||||
let { settingType, defaultValue, ..._ } = setting;
|
||||
let value = LoadSetting(name, defaultValue);
|
||||
if (settingType === "checkbox") {
|
||||
let element = document.querySelector(`input[name=${name}]`);
|
||||
element.checked = value;
|
||||
} else {
|
||||
let element = document.querySelector(`input[name=${name}][value=${value}]`);
|
||||
element.checked = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let currentSection = null;
|
||||
|
||||
if (window.scrollY + window.innerHeight > bottomHeightThreshold) {
|
||||
currentSection = sections[sections.length - 1];
|
||||
}
|
||||
else {
|
||||
if (sections) {
|
||||
sections.forEach(section => {
|
||||
let rect = section.getBoundingClientRect();
|
||||
if (rect.top + document.body.offsetTop < 1) {
|
||||
currentSection = section;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (activeLink) {
|
||||
activeLink.parentElement.classList.remove('active');
|
||||
}
|
||||
|
||||
if (currentSection) {
|
||||
activeLink = document.querySelector(`#sidebar a[href="#${currentSection.id}"]`);
|
||||
if (activeLink) {
|
||||
let headingChildren = activeLink.parentElement.parentElement;
|
||||
let heading = headingChildren.previousElementSibling.previousElementSibling;
|
||||
|
||||
if (heading && headingChildren.style.display === "none") {
|
||||
activeLink = heading;
|
||||
}
|
||||
activeLink.parentElement.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
resizeSidebar();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.keyCode == 27 && activeModal) {
|
||||
closeModal(activeModal);
|
||||
if (event.code == "Escape" && activeModal) {
|
||||
activeModal.close();
|
||||
}
|
||||
});
|
||||
|
||||
106
docs/_static/settings.js
vendored
Normal file
106
docs/_static/settings.js
vendored
Normal file
@ -0,0 +1,106 @@
|
||||
'use-strict';
|
||||
|
||||
let settingsModal;
|
||||
|
||||
class Setting {
|
||||
constructor(name, defaultValue, setter) {
|
||||
this.name = name;
|
||||
this.defaultValue = defaultValue;
|
||||
this.setValue = setter;
|
||||
}
|
||||
|
||||
setElement() {
|
||||
throw new TypeError('Abstract methods should be implemented.');
|
||||
}
|
||||
|
||||
load() {
|
||||
let value = JSON.parse(localStorage.getItem(this.name));
|
||||
this.value = value === null ? this.defaultValue : value;
|
||||
try {
|
||||
this.setValue(value);
|
||||
} catch (error) {
|
||||
console.error(`Failed to apply setting "${this.name}" With value:`, this.value);
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
throw new TypeError('Abstract methods should be implemented.');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class CheckboxSetting extends Setting {
|
||||
|
||||
setElement() {
|
||||
let element = document.querySelector(`input[name=${this.name}]`);
|
||||
element.checked = this.value;
|
||||
}
|
||||
|
||||
update(element) {
|
||||
localStorage.setItem(this.name, element.checked);
|
||||
this.setValue(element.checked);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class RadioSetting extends Setting {
|
||||
|
||||
setElement() {
|
||||
let element = document.querySelector(`input[name=${this.name}][value=${this.value}]`);
|
||||
element.checked = true;
|
||||
}
|
||||
|
||||
update(element) {
|
||||
localStorage.setItem(this.name, `"${element.value}"`);
|
||||
this.setValue(element.value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getRootAttributeToggle(attributeName, valueName) {
|
||||
function toggleRootAttribute(set) {
|
||||
if (set) {
|
||||
document.documentElement.setAttribute(`data-${attributeName}`, valueName);
|
||||
} else {
|
||||
document.documentElement.removeAttribute(`data-${attributeName}`);
|
||||
}
|
||||
}
|
||||
return toggleRootAttribute;
|
||||
}
|
||||
|
||||
function setTheme(value) {
|
||||
if (value === 'automatic') {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
}
|
||||
else {
|
||||
document.documentElement.setAttribute('data-theme', value);
|
||||
}
|
||||
}
|
||||
|
||||
const settings = [
|
||||
new CheckboxSetting('useSerifFont', false, getRootAttributeToggle('font', 'serif')),
|
||||
new RadioSetting('setTheme', 'automatic', setTheme)
|
||||
]
|
||||
|
||||
function updateSetting(element) {
|
||||
let setting = settings.find((s) => s.name == element.name);
|
||||
if (setting) {
|
||||
setting.update(element);
|
||||
}
|
||||
}
|
||||
|
||||
for (const setting of settings) {
|
||||
setting.load();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
settingsModal = new Modal(document.querySelector('div#settings.modal'));
|
||||
for (const setting of settings) {
|
||||
setting.setElement();
|
||||
}
|
||||
});
|
||||
141
docs/_static/sidebar.js
vendored
141
docs/_static/sidebar.js
vendored
@ -1,4 +1,64 @@
|
||||
function collapseSection(icon) {
|
||||
class Sidebar {
|
||||
constructor(element) {
|
||||
this.element = element;
|
||||
this.activeLink = null;
|
||||
|
||||
this.element.addEventListener('click', (e) => {
|
||||
// If we click a navigation, close the hamburger menu
|
||||
if (e.target.tagName == 'A' && this.element.classList.contains('sidebar-toggle')) {
|
||||
this.element.classList.remove('sidebar-toggle');
|
||||
let button = hamburgerToggle.firstElementChild;
|
||||
button.textContent = 'menu';
|
||||
|
||||
// Scroll a little up to actually see the header
|
||||
// Note: this is generally around ~55px
|
||||
// A proper solution is getComputedStyle but it can be slow
|
||||
// Instead let's just rely on this quirk and call it a day
|
||||
// This has to be done after the browser actually processes
|
||||
// the section movement
|
||||
setTimeout(() => window.scrollBy(0, -100), 75);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createCollapsableSections() {
|
||||
let toc = this.element.querySelector('ul');
|
||||
let allReferences = toc.querySelectorAll('a.reference.internal:not([href="#"])');
|
||||
|
||||
for (let ref of allReferences) {
|
||||
|
||||
let next = ref.nextElementSibling;
|
||||
|
||||
if (next && next.tagName === "UL") {
|
||||
|
||||
let icon = document.createElement('span');
|
||||
icon.className = 'material-icons collapsible-arrow expanded';
|
||||
icon.innerText = 'expand_more';
|
||||
|
||||
if (next.parentElement.tagName == "LI") {
|
||||
next.parentElement.classList.add('no-list-style')
|
||||
}
|
||||
|
||||
icon.addEventListener('click', () => {
|
||||
if (icon.classList.contains('expanded')) {
|
||||
collapseSection(icon);
|
||||
} else {
|
||||
expandSection(icon);
|
||||
}
|
||||
})
|
||||
|
||||
ref.classList.add('ref-internal-padding')
|
||||
ref.parentNode.insertBefore(icon, ref);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
resize() {
|
||||
let rect = this.element.getBoundingClientRect();
|
||||
this.element.style.height = `calc(100vh - 1em - ${rect.top + document.body.offsetTop}px)`;
|
||||
}
|
||||
|
||||
collapseSection(icon) {
|
||||
icon.classList.remove('expanded');
|
||||
icon.classList.add('collapsed');
|
||||
icon.innerText = 'chevron_right';
|
||||
@ -6,45 +66,62 @@ function collapseSection(icon) {
|
||||
// <arrow><heading>
|
||||
// --> <square><children>
|
||||
children.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function expandSection(icon) {
|
||||
expandSection(icon) {
|
||||
icon.classList.remove('collapse');
|
||||
icon.classList.add('expanded');
|
||||
icon.innerText = 'expand_more';
|
||||
let children = icon.nextElementSibling.nextElementSibling;
|
||||
children.style.display = "block";
|
||||
}
|
||||
|
||||
setActiveLink(section) {
|
||||
if (this.activeLink) {
|
||||
this.activeLink.parentElement.classList.remove('active');
|
||||
}
|
||||
if (section) {
|
||||
this.activeLink = document.querySelector(`#sidebar a[href="#${section.id}"]`);
|
||||
if (this.activeLink) {
|
||||
let headingChildren = this.activeLink.parentElement.parentElement;
|
||||
let heading = headingChildren.previousElementSibling.previousElementSibling;
|
||||
|
||||
if (heading && headingChildren.style.display === 'none') {
|
||||
this.activeLink = heading;
|
||||
}
|
||||
this.activeLink.parentElement.classList.add('active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getCurrentSection() {
|
||||
let currentSection;
|
||||
if (window.scrollY + window.innerHeight > bottomHeightThreshold) {
|
||||
currentSection = sections[sections.length - 1];
|
||||
}
|
||||
else {
|
||||
if (sections) {
|
||||
sections.forEach(section => {
|
||||
let rect = section.getBoundingClientRect();
|
||||
if (rect.top + document.body.offsetTop < 1) {
|
||||
currentSection = section;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return currentSection;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
let sidebar = document.getElementById('sidebar');
|
||||
let toc = sidebar.querySelector('ul');
|
||||
let allReferences = toc.querySelectorAll('a.reference.internal:not([href="#"])');
|
||||
sidebar = new Sidebar(document.getElementById('sidebar'));
|
||||
sidebar.resize();
|
||||
sidebar.createCollapsableSections();
|
||||
|
||||
for (let ref of allReferences) {
|
||||
|
||||
let next = ref.nextElementSibling;
|
||||
|
||||
if (next && next.tagName === "UL") {
|
||||
|
||||
let icon = document.createElement('span');
|
||||
icon.className = 'material-icons collapsible-arrow expanded';
|
||||
icon.innerText = 'expand_more';
|
||||
|
||||
if (next.parentElement.tagName == "LI") {
|
||||
next.parentElement.classList.add('no-list-style')
|
||||
}
|
||||
|
||||
icon.addEventListener('click', () => {
|
||||
if (icon.classList.contains('expanded')) {
|
||||
collapseSection(icon);
|
||||
} else {
|
||||
expandSection(icon);
|
||||
}
|
||||
})
|
||||
|
||||
ref.classList.add('ref-internal-padding')
|
||||
ref.parentNode.insertBefore(icon, ref);
|
||||
}
|
||||
}
|
||||
window.addEventListener('scroll', () => {
|
||||
sidebar.setActiveLink(getCurrentSection());
|
||||
sidebar.resize();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
56
docs/_static/style.css
vendored
56
docs/_static/style.css
vendored
@ -233,22 +233,44 @@ a:hover {
|
||||
|
||||
/* headers */
|
||||
|
||||
header {
|
||||
header.grid-item {
|
||||
grid-area: h;
|
||||
background-color: var(--sub-header-background);
|
||||
color: var(--main-text);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header > nav {
|
||||
background-color: var(--sub-header-background);
|
||||
padding: 0.8em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
header > nav > a {
|
||||
header > nav a {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
header > nav.mobile-only {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
padding-top: 0;
|
||||
transition: top 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
header > nav.mobile-only .search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header > nav.mobile-only .search-wrapper {
|
||||
background-color: var(--sub-header-background);
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -402,18 +424,20 @@ aside .material-icons,
|
||||
|
||||
/* search button stuff */
|
||||
|
||||
.searchwrapper {
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.searchwrapper > input[type=search] {
|
||||
.search-wrapper > input[type=search] {
|
||||
font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.searchwrapper > input[type=search],
|
||||
.searchwrapper > button[type=submit] {
|
||||
.search-wrapper > input[type=search],
|
||||
.search-wrapper > button[type=submit] {
|
||||
background-color: var(--sub-header-background);
|
||||
border: none;
|
||||
color: var(--search-text);
|
||||
@ -422,28 +446,28 @@ aside .material-icons,
|
||||
flex: 9;
|
||||
}
|
||||
|
||||
.searchwrapper {
|
||||
.search-wrapper {
|
||||
border-bottom: 1px solid var(--search-border);
|
||||
}
|
||||
|
||||
.searchwrapper:focus-within {
|
||||
.search-wrapper:focus-within {
|
||||
border-bottom: 1px solid var(--search-focus);
|
||||
}
|
||||
|
||||
/* .searchwrapper > input[type=search] {
|
||||
/* .search-wrapper > input[type=search] {
|
||||
border: 1px solid var(--search-border);
|
||||
border-right: none;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.searchwrapper > input[type=search]:focus,
|
||||
.search-wrapper > input[type=search]:focus,
|
||||
button[type=submit]:focus ~ input[type=search] {
|
||||
border: 1px solid var(--search-focus);
|
||||
border-right: none;
|
||||
} */
|
||||
|
||||
.searchwrapper > button[type=submit] {
|
||||
.search-wrapper > button[type=submit] {
|
||||
color: var(--search-button);
|
||||
/* border: 1px solid var(--search-border); */
|
||||
/* border-left: none; */
|
||||
@ -453,13 +477,13 @@ button[type=submit]:focus ~ input[type=search] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* .searchwrapper > button[type=submit]:focus,
|
||||
/* .search-wrapper > button[type=submit]:focus,
|
||||
input[type=search]:focus ~ button[type=submit] {
|
||||
border: 1px solid var(--search-focus);
|
||||
border-left: none;
|
||||
} */
|
||||
|
||||
.searchwrapper > button[type=submit]:hover {
|
||||
.search-wrapper > button[type=submit]:hover {
|
||||
background-color: var(--search-border);
|
||||
color: var(--search-button-hover);
|
||||
}
|
||||
@ -1088,6 +1112,10 @@ div.code-block-caption {
|
||||
background-color: var(--black);
|
||||
}
|
||||
|
||||
header > nav {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
31
docs/_templates/layout.html
vendored
31
docs/_templates/layout.html
vendored
@ -62,14 +62,25 @@
|
||||
<a href="https://github.com/Rapptz/discord.py" title="GitHub"><span class="material-icons custom-icons">github</span></a>
|
||||
<a href="{{ discord_invite }}" title="{{ _('Discord') }}"><span class="material-icons custom-icons">discord</span></a>
|
||||
<a href="{{ pathto('faq') }}" title="FAQ"><span class="material-icons">help_center</span></a>
|
||||
<a href="{{ pathto('search') }}" title="{{ _('Search') }}" class='mobile-only'><span class="material-icons">search</span></a>
|
||||
{#- If we have more links we can put them here #}
|
||||
<a onclick="mobileSearch.open();" title="{{ _('Search') }}" id="open-search" class="mobile-only"><span class="material-icons">search</span></a>
|
||||
<a onclick="mobileSearch.close();" title="{{ _('Close') }}" id="close-search" class="mobile-only" hidden><span class="material-icons">close</span></a>
|
||||
</nav>
|
||||
<nav class="mobile-only">
|
||||
<form role="search" class="search" action="search.html" method="get">
|
||||
<div class="search-wrapper">
|
||||
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
|
||||
<button type="submit">
|
||||
<span class="material-icons">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</nav>
|
||||
</header>
|
||||
{#- The sub-header with search and extension related selection #}
|
||||
<div class="sub-header grid-item">
|
||||
<label for="documentation_select">{{ _('View Documentation For') }}</label>
|
||||
<select id="documentation_select" onchange="changeDocumentation(this)">
|
||||
<select id="documentation_select" onchange="window.location = this.value;">
|
||||
{%- if pagename is prefixedwith 'ext/' %}
|
||||
<option value="{{ pathto(master_doc)|e }}">discord</option>
|
||||
{%- else %}
|
||||
@ -80,21 +91,21 @@
|
||||
{%- endfor %}
|
||||
</select>
|
||||
<form role="search" class="search" action="search.html" method="get">
|
||||
<div class="searchwrapper">
|
||||
<div class="search-wrapper">
|
||||
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
|
||||
<button type="submit">
|
||||
<span class="material-icons">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<a accesskey="S" class="settings" onclick="openModal(settingsModal);"><span class="material-icons">settings</span></a>
|
||||
<a accesskey="S" class="settings" onclick="settingsModal.open();"><span class="material-icons">settings</span></a>
|
||||
</div>
|
||||
{#- The sidebar component #}
|
||||
<aside class="grid-item">
|
||||
<span id="hamburger-toggle">
|
||||
<span class="material-icons">menu</span>
|
||||
</span>
|
||||
<span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
|
||||
<span id="settings-toggle" class="settings" onclick="settingsModal.open();">
|
||||
<span class="material-icons">settings</span>
|
||||
</span>
|
||||
<div id="sidebar">
|
||||
@ -125,7 +136,7 @@
|
||||
</div>
|
||||
{%- if READTHEDOCS %}
|
||||
<script>
|
||||
if (typeof READTHEDOCS_DATA !== 'undefined') {
|
||||
if (typeof READTHEDOCS_DATA !== "undefined") {
|
||||
if (!READTHEDOCS_DATA.features) {
|
||||
READTHEDOCS_DATA.features = {};
|
||||
}
|
||||
@ -134,15 +145,15 @@
|
||||
</script>
|
||||
{%- endif %}
|
||||
|
||||
<div id="settings" class="modal" onclick="if (event.target == this){ closeModal(settingsModal); }" hidden>
|
||||
<div id="settings" class="modal" onclick="if (event.target == this){ settingsModal.close(); }" hidden>
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeModal(settingsModal);" title="Close">
|
||||
<span class="close" onclick="settingsModal.close();" title="Close">
|
||||
<span class="material-icons">close</span>
|
||||
</span>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<h2>Font</h2>
|
||||
<div class='setting'>
|
||||
<div class="setting">
|
||||
<h3>Use a serif font:
|
||||
<label class="toggle"
|
||||
title="Use a serif font? Your system font will be used, falling back to serif.">
|
||||
@ -153,7 +164,7 @@
|
||||
</div>
|
||||
|
||||
<h2>Theme</h2>
|
||||
<div class='setting'>
|
||||
<div class="setting">
|
||||
<h3>
|
||||
<label class="toggle" title="Set your theme">
|
||||
<input type="radio" name="setTheme" onclick="updateSetting(this);" value="automatic" checked>
|
||||
|
||||
@ -244,6 +244,7 @@ html_search_scorer = '_static/scorer.js'
|
||||
|
||||
html_js_files = [
|
||||
'custom.js',
|
||||
'settings.js',
|
||||
'copy.js',
|
||||
'sidebar.js'
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user