CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-21 01:49:54 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

trying to fix sidebar

Browse Source
This commit is contained in:
Guy Sandler 2026-05-21 18:06:02 -07:00
parent cbdda56e4b
commit 62b7112954
1 changed files with 64 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
js/content.js
View File

@ -1492,7 +1492,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
const layoutMode = mode === "course" || mode === "dash" ? mode : getSidebarLayoutMode(); const layoutMode = mode === "course" || mode === "dash" ? mode : getSidebarLayoutMode();
const mainWrapper = document.querySelector(".ic-Layout-contentWrapper"); const mainWrapper = document.querySelector(".ic-Layout-contentWrapper");
if (!mainWrapper) return; if (!mainWrapper) return;
let courseLinks;
let expanded = await getSidebarExpandedState(layoutMode); let expanded = await getSidebarExpandedState(layoutMode);
mainWrapper.style.display = "flex"; mainWrapper.style.display = "flex";
mainWrapper.style.alignItems = "stretch"; mainWrapper.style.alignItems = "stretch";
@ -1510,10 +1509,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
contentMain.style.flex = "1"; contentMain.style.flex = "1";
contentMain.style.minWidth = "0"; contentMain.style.minWidth = "0";
} }
courseLinks = getCourseLinks();
document.querySelector(".ic-app-nav-toggle-and-crumbs")?.style.setProperty("display", "none");
const leftSide = document.getElementById("left-side");
if (leftSide) leftSide.style.display = "none";
} }
let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container", let sidebarList = makeElement("div", mainWrapper, { id: "better-sidebar-container",
@ -1527,40 +1522,6 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) {
// Populate sidebar from Canvas navigation menu dynamically // Populate sidebar from Canvas navigation menu dynamically
populateSidebarFromNav(sidebarContent); populateSidebarFromNav(sidebarContent);
if (layoutMode == "course") {
const courseLinksContainer = makeElement("div", sidebarContent, {
id: "better-course-links",
style: "display:flex;flex-direction:column;gap:12px;width:calc(100% - 16px);align-items:stretch;margin:15px 8px 0;padding:12px;border-radius:8px;background:linear-gradient(135deg, rgba(var(--bc-primary-rgb), 0.08) 0%, rgba(var(--bc-primary-rgb), 0.04) 100%);border:1px solid rgba(var(--bc-primary-rgb), 0.15);"
});
if (courseLinks && courseLinks.length > 0) {
makeElement("div", courseLinksContainer, {
id: "better-course-links-title",
textContent: "Course Pages",
style: "font-size:11px;color:var(--bctext-0);margin:0;font-weight:600;white-space:nowrap;text-align:center;display:block;letter-spacing:0.5px;text-transform:uppercase;opacity:0.8;"
})
makeElement("div", courseLinksContainer, {
style: "height:1px;background:linear-gradient(90deg, transparent, rgba(var(--bctext-0-rgb), 0.2), transparent);margin:2px 0;"
})
courseLinks.forEach((link) => {
createSidebarButton(
link.name,
domain + link.url,
courseLinksContainer,
`<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M7.05025 1.53553C8.03344 0.552348 9.36692 0 10.7574 0C13.6528 0 16 2.34721 16 5.24264C16 6.63308 15.4477 7.96656 14.4645 8.94975L12.4142 11L11 9.58579L13.0503 7.53553C13.6584 6.92742 14 6.10264 14 5.24264C14 3.45178 12.5482 2 10.7574 2C9.89736 2 9.07258 2.34163 8.46447 2.94975L6.41421 5L5 3.58579L7.05025 1.53553Z" fill="white"></path>
<path d="M7.53553 13.0503L9.58579 11L11 12.4142L8.94975 14.4645C7.96656 15.4477 6.63308 16 5.24264 16C2.34721 16 0 13.6528 0 10.7574C0 9.36693 0.552347 8.03344 1.53553 7.05025L3.58579 5L5 6.41421L2.94975 8.46447C2.34163 9.07258 2 9.89736 2 10.7574C2 12.5482 3.45178 14 5.24264 14C6.10264 14 6.92742 13.6584 7.53553 13.0503Z" fill="white"></path>
<path d="M5.70711 11.7071L11.7071 5.70711L10.2929 4.29289L4.29289 10.2929L5.70711 11.7071Z" fill="white"></path>
</g>
</svg>`
);
});
}
}
let expander = makeElement("div", sidebarList, { let expander = makeElement("div", sidebarList, {
className: "better-sidebar-expander", className: "better-sidebar-expander",
@ -1612,69 +1573,76 @@ function populateSidebarFromNav(sidebarContent) {
}; };
const navMenu = document.getElementById("menu"); const navMenu = document.getElementById("menu");
if (!navMenu) return; let hasDashboardButton = false;
const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a"); if (navMenu) {
menuItems.forEach(item => { const menuItems = navMenu.querySelectorAll("a[id^='global_nav'], .globalNavExternalTool a");
const itemId = item.id; menuItems.forEach(item => {
if (excludeIds.includes(itemId)) return; const itemId = item.id;
if (excludeIds.includes(itemId)) return;
const href = item.getAttribute("href"); const href = item.getAttribute("href");
let textEl = item.querySelector(".menu-item__text"); let textEl = item.querySelector(".menu-item__text");
let text = textEl?.textContent?.trim(); let text = textEl?.textContent?.trim();
// If text not found, try other sources // If text not found, try other sources
if (!text) { if (!text) {
text = item.getAttribute("aria-label")?.trim() || text = item.getAttribute("aria-label")?.trim() ||
item.getAttribute("title")?.trim() || item.getAttribute("title")?.trim() ||
item.textContent?.trim(); item.textContent?.trim();
} }
if (!text || !href) return; if (!text || !href) return;
let icon = customIcons[itemId] || ""; let icon = customIcons[itemId] || "";
if (!icon) { if (!icon) {
const svg = item.querySelector("svg"); const svg = item.querySelector("svg");
if (svg) { if (svg) {
icon = svg.outerHTML; icon = svg.outerHTML;
// Detect and scale down large viewBox SVGs // Detect and scale down large viewBox SVGs
const viewBoxMatch = icon.match(/viewBox="([^"]+)"/); const viewBoxMatch = icon.match(/viewBox="([^"]+)"/);
if (viewBoxMatch) { if (viewBoxMatch) {
const [, viewBox] = viewBoxMatch; const [, viewBox] = viewBoxMatch;
const parts = viewBox.split(/\s+/); const parts = viewBox.split(/\s+/);
const width = parseFloat(parts[2]); const width = parseFloat(parts[2]);
const height = parseFloat(parts[3]); const height = parseFloat(parts[3]);
// If viewBox is large, add fixed size to scale it down // If viewBox is large, add fixed size to scale it down
if (width > 32 || height > 32) { if (width > 32 || height > 32) {
// Check if svg already has a style attribute // Check if svg already has a style attribute
if (icon.includes('style="')) { if (icon.includes('style="')) {
// Append to existing style // Append to existing style
icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`); icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`);
} else { } else {
// Add new style attribute // Add new style attribute
icon = icon.replace("<svg", '<svg style="width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"'); icon = icon.replace("<svg", '<svg style="width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"');
} }
} else { } else {
// Smaller SVG - just add colors // Smaller SVG - just add colors
if (icon.includes('style="')) { if (icon.includes('style="')) {
icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;flex-shrink:0;"`); icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;flex-shrink:0;"`);
} else { } else {
icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;flex-shrink:0;"'); icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;flex-shrink:0;"');
} }
} }
} else { } else {
// No viewBox - just add colors // No viewBox - just add colors
if (icon.includes('style="')) { if (icon.includes('style="')) {
icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;"`); icon = icon.replace(/style="([^"]*)"/, `style="$1 fill:white;stroke:white;"`);
} else { } else {
icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;"'); icon = icon.replace("<svg", '<svg style="fill:white;stroke:white;"');
} }
} }
} }
} }
createSidebarButton(text, href, sidebarContent, icon); if (itemId === "global_nav_dashboard_link") hasDashboardButton = true;
}); createSidebarButton(text, href, sidebarContent, icon);
});
}
if (!hasDashboardButton) {
createSidebarButton("Dashboard", `${domain}/`, sidebarContent, customIcons["global_nav_dashboard_link"]);
}
} }
function updateSidebar(expanded, sidebarList, expander) { function updateSidebar(expanded, sidebarList, expander) {
const scale = getSidebarScale(); const scale = getSidebarScale();