diff --git a/assets/sass/helpers.sass b/assets/sass/helpers.sass index 57feeea95..c7c00aa6c 100644 --- a/assets/sass/helpers.sass +++ b/assets/sass/helpers.sass @@ -13,7 +13,7 @@ .is-hero-logo +logo(60%, 75%) - + .is-footer-logo +logo(40%, 75%) @@ -62,6 +62,7 @@ hr.color +touch margin-right: 0.5rem + .content .img &:hover @@ -72,7 +73,7 @@ hr.color display: block overflow-x: auto white-space: nowrap - + .is-page display: flex flex-direction: column @@ -80,3 +81,92 @@ hr.color .is-main flex: 1 + + +// ---- NEW TABLE MODAL + WRAPPER STYLES ---- + +.table-expanded + position: fixed + top: 5vh + left: 5vw + width: 90vw + height: 90vh + background: white + z-index: 9999 + overflow: auto + padding: 1.5rem + white-space: normal + border-radius: 6px + box-shadow: 0 0 20px rgba(0,0,0,0.08) + + table + width: 100% + table-layout: auto + white-space: normal + border-collapse: collapse + + th, td + border: 1px solid rgba(0,0,0,0.08) + padding: 0.5rem 0.75rem + vertical-align: top + + // ---- NEW FIXED CLOSE BUTTON ---- + .table-close-btn + position: sticky // keeps button visible during scroll + top: 0.5rem + float: right + margin-bottom: 1rem + background: rgba(255,255,255,0.9) + border: 1px solid rgba(0,0,0,0.12) + padding: 0.35rem 0.5rem + border-radius: 4px + font-size: 1rem + cursor: pointer + box-shadow: 0 2px 6px rgba(0,0,0,0.06) + z-index: 10000 + + .table-close-btn:focus + outline: none + box-shadow: 0 0 0 3px rgba(0,0,0,0.06) + + +// ---- OVERLAY ---- + +.table-modal-overlay + position: fixed + top: 0 + left: 0 + width: 100vw + height: 100vh + background: rgba(255,255,255,0.35) + -webkit-backdrop-filter: blur(6px) + backdrop-filter: blur(6px) + z-index: 10 + + +// ---- TABLE LIST PAGE WRAPPING ---- + +.table-wrapper + position: relative + margin-bottom: 1.25rem + + .table-scroll + overflow-x: auto + -webkit-overflow-scrolling: touch + + .table-enlarge-btn + position: absolute + top: 0.5rem + right: 0.5rem + background: rgba(0,0,0,0.6) + color: white + border: none + padding: 0.35rem 0.5rem + border-radius: 3px + cursor: pointer + font-size: 0.85rem + z-index: 2 + + .table-enlarge-btn:focus + outline: none + box-shadow: 0 0 0 2px rgba(0,0,0,0.12) diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html index ed0ab9c07..70d2ca1d1 100644 --- a/layouts/partials/javascript.html +++ b/layouts/partials/javascript.html @@ -23,4 +23,5 @@ function load() { if (window.location.hash) shiftWindow(); } console.log("OK"); - \ No newline at end of file + + diff --git a/static/js/table-popout.js b/static/js/table-popout.js new file mode 100644 index 000000000..4262f9615 --- /dev/null +++ b/static/js/table-popout.js @@ -0,0 +1,123 @@ +document.addEventListener("DOMContentLoaded", function () { + const tables = document.querySelectorAll(".content table"); + if (!tables.length) return; + + tables.forEach(function (table) { + if (table.closest(".table-wrapper")) return; + + const wrapper = document.createElement("div"); + wrapper.className = "table-wrapper"; + + const scroll = document.createElement("div"); + scroll.className = "table-scroll"; + + const btn = document.createElement("button"); + btn.className = "table-enlarge-btn"; + btn.type = "button"; + btn.title = "Enlarge table"; + btn.innerText = "⤢"; + + table.parentNode.insertBefore(wrapper, table); + wrapper.appendChild(scroll); + scroll.appendChild(table); + wrapper.appendChild(btn); + + btn.addEventListener("click", function () { + openTableModal(table); + }); + }); + + function openTableModal(table) { + const modal = document.createElement("div"); + modal.className = "table-expanded"; + + // overlay to blur background and intercept clicks + const overlay = document.createElement("div"); + overlay.className = "table-modal-overlay"; + + const closeBtn = document.createElement("button"); + closeBtn.type = "button"; + closeBtn.title = "Close"; + closeBtn.innerText = "✕"; + closeBtn.className = "table-close-btn"; + + const cloned = table.cloneNode(true); + cloned.style.width = "100%"; + cloned.style.display = "table"; + cloned.style.tableLayout = "auto"; + cloned.style.whiteSpace = "normal"; + cloned.style.borderCollapse = "collapse"; + + try { + const comp = window.getComputedStyle(table); + if (comp) { + if (comp.fontSize) cloned.style.fontSize = comp.fontSize; + if (comp.fontWeight) cloned.style.fontWeight = comp.fontWeight; + if (comp.fontFamily) cloned.style.fontFamily = comp.fontFamily; + if (comp.color) cloned.style.color = comp.color; + } + + const srcCell = table.querySelector("th, td"); + const tgtCells = cloned.querySelectorAll("th, td"); + if (srcCell && tgtCells.length) { + const cellStyle = window.getComputedStyle(srcCell); + tgtCells.forEach(function (c) { + if (cellStyle.borderTopWidth) + c.style.borderTop = + cellStyle.borderTopWidth + + " " + + cellStyle.borderTopStyle + + " " + + cellStyle.borderTopColor; + if (cellStyle.borderRightWidth) + c.style.borderRight = + cellStyle.borderRightWidth + + " " + + cellStyle.borderRightStyle + + " " + + cellStyle.borderRightColor; + if (cellStyle.borderBottomWidth) + c.style.borderBottom = + cellStyle.borderBottomWidth + + " " + + cellStyle.borderBottomStyle + + " " + + cellStyle.borderBottomColor; + if (cellStyle.borderLeftWidth) + c.style.borderLeft = + cellStyle.borderLeftWidth + + " " + + cellStyle.borderLeftStyle + + " " + + cellStyle.borderLeftColor; + if (cellStyle.padding) c.style.padding = cellStyle.padding; + }); + } + } catch (e) { + // ignore + } + + modal.appendChild(closeBtn); + modal.appendChild(cloned); + // append overlay then modal so overlay is below modal + document.body.appendChild(overlay); + document.body.appendChild(modal); + + function close() { + if (modal && modal.parentNode) modal.parentNode.removeChild(modal); + if (overlay && overlay.parentNode) + overlay.parentNode.removeChild(overlay); + document.removeEventListener("keydown", onKey); + } + + closeBtn.addEventListener("click", close); + // clicking overlay also closes modal + overlay.addEventListener("click", close); + + function onKey(e) { + if (e.key === "Escape") close(); + } + + document.addEventListener("keydown", onKey); + } +});