Skip to content

[DO NOT MERGE] GAUD-9165 - Page Templates - Version 2 #6875

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
svanherk wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[DO NOT MERGE] GAUD-9165 - Page Templates - Version 2 #6875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fadb1e8
GAUD-9165 - Page Templates - Version 2
svanherk Apr 27, 2026
0ee1f11
Remove console log
svanherk Apr 27, 2026
f90f08d
Remove reference component copied from lms-core
svanherk Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
292 changes: 292 additions & 0 deletions components/page/demo/demo-navs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
import { css, html, LitElement } from 'lit';

const sharedStyles = css`
:host {
display: block;
}
:host([hidden]) {
display: none;
}
.nav-shadow {
background-color: rgba(0, 0, 0, 0.02);
bottom: -4px;
display: block;
height: 4px;
pointer-events: none;
position: absolute;
width: 100%;
z-index: 1;
}
.nav-band {
background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) 1.5rem, #ffffff 0%);
min-height: 4px;
}
.nav-icon-btn {
align-items: center;
background: none;
border: none;
border-radius: 4px;
color: var(--d2l-color-ferrite);
cursor: pointer;
display: inline-flex;
font-size: 0.8rem;
gap: 4px;
justify-content: center;
min-height: 42px;
min-width: 42px;
padding: 6px;
}
.nav-icon-btn:hover,
.nav-icon-btn:focus-visible {
background-color: var(--d2l-color-gypsum);
color: var(--d2l-color-celestine);
}
`;

/**
* Temporary full navigation demo component - to be replaced by official navigation components
*/
class DemoNav extends LitElement {

static get styles() {
return [sharedStyles, css`
.nav-wrapper {
position: relative;
}
.nav-header {
align-items: center;
display: flex;
height: 90px;
margin-inline: var(--d2l-page-margin-inline);
max-width: var(--d2l-page-header-top-max-width);
padding: 0 30px;
}
@media (max-width: 767px) {
.nav-header {
height: 72px;
}
}
@media (max-width: 615px) {
.nav-header {
padding: 0 15px;
}
}
.nav-header-left {
align-items: center;
display: flex;
flex: 0 1 auto;
gap: 12px;
height: 100%;
}
.nav-header-spacer {
flex: 1 1 auto;
min-width: 30px;
}
@media (max-width: 615px) {
.nav-header-spacer {
min-width: 15px;
}
}
.nav-header-right {
align-items: center;
display: flex;
flex: 0 0 auto;
gap: 6px;
height: 100%;
}
.nav-logo {
background-color: var(--d2l-color-celestine);
border-radius: 4px;
color: white;
font-size: 0.8rem;
font-weight: 700;
padding: 8px 14px;
}
.nav-separator {
background-color: var(--d2l-color-mica);
height: 26px;
margin: 0 6px;
width: 1px;
}
.nav-footer {
border-bottom: 1px solid rgba(124, 134, 149, 0.18);
border-top: 1px solid rgba(124, 134, 149, 0.18);
}
.nav-footer-inner {
align-items: center;
display: flex;
gap: 4px;
margin: 0 auto;
max-width: 1230px;
padding: 0 30px;
}
@media (max-width: 615px) {
.nav-footer-inner {
padding: 0 15px;
}
}
.nav-footer-link {
border-bottom: 4px solid transparent;
color: var(--d2l-color-ferrite);
display: inline-block;
font-size: 0.7rem;
padding: 8px 12px;
text-decoration: none;
}
.nav-footer-link:hover,
.nav-footer-link:focus-visible {
border-bottom-color: var(--d2l-color-celestine);
color: var(--d2l-color-celestine);
}
`];
}

render() {
return html`
<div class="nav-wrapper">
<div class="nav-band"></div>
<div class="nav-header">
<div class="nav-header-left">
<span class="nav-logo">Logo</span>
<div class="nav-separator"></div>
<button class="nav-icon-btn">📚 Courses</button>
</div>
<div class="nav-header-spacer"></div>
<div class="nav-header-right">
<button class="nav-icon-btn" title="Alerts">🔔</button>
<button class="nav-icon-btn" title="Settings">⚙️</button>
<button class="nav-icon-btn" title="Profile">👤</button>
</div>
</div>
<div class="nav-footer">
<div class="nav-footer-inner">
<a class="nav-footer-link" href="javascript:void(0)">Content</a>
<a class="nav-footer-link" href="javascript:void(0)">Assignments</a>
<a class="nav-footer-link" href="javascript:void(0)">Quizzes</a>
<a class="nav-footer-link" href="javascript:void(0)">Grades</a>
<a class="nav-footer-link" href="javascript:void(0)">Classlist</a>
</div>
</div>
<div class="nav-shadow"></div>
</div>
`;
}
}

/**
* Temporary immersive navigation demo component - to be replaced by official navigation components
*/
class DemoNavImmersive extends LitElement {

static get styles() {
return [sharedStyles, css`
.immersive-wrapper {
background-color: white;
border-bottom: 1px solid var(--d2l-color-mica);
position: relative;
}
.immersive-container {
align-items: center;
display: flex;
height: 3.1rem;
justify-content: space-between;
margin-inline: var(--d2l-page-margin-inline);
max-width: var(--d2l-page-header-top-max-width);
overflow: hidden;
padding: 0 30px;
}
@media (max-width: 929px) {
.immersive-container {
padding: 0 24px;
}
}
@media (max-width: 767px) {
.immersive-container {
padding: 0 18px;
}
}
@media (max-width: 615px) {
.immersive-container {
height: 2.8rem;
}
}
.immersive-left {
align-items: center;
color: var(--d2l-color-tungsten);
display: flex;
flex: 0 0 auto;
font-size: 0.8rem;
letter-spacing: 0.2px;
}
.immersive-back-link {
align-items: center;
color: var(--d2l-color-tungsten);
display: inline-flex;
gap: 4px;
text-decoration: none;
}
.immersive-back-link:hover,
.immersive-back-link:focus-visible {
color: var(--d2l-color-celestine);
}
.immersive-back-icon {
font-size: 1rem;
}
.immersive-middle {
border-inline-end: 1px solid var(--d2l-color-gypsum);
border-inline-start: 1px solid var(--d2l-color-gypsum);
flex: 0 1 auto;
font-size: 0.8rem;
margin: 0 24px;
min-width: 0;
overflow: hidden;
padding: 0 24px;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
@media (max-width: 615px) {
.immersive-middle {
margin: 0 18px;
padding: 0 18px;
}
}
.immersive-right {
align-items: center;
display: flex;
flex: 0 0 auto;
gap: 8px;
}
.immersive-right .nav-icon-btn {
font-size: 0.7rem;
}
`];
}

render() {
return html`
<div class="immersive-wrapper">
<div class="nav-band"></div>
<div class="immersive-container">
<div class="immersive-left">
<a class="immersive-back-link" href="javascript:void(0)">
<span class="immersive-back-icon">‹</span>
Back to Course
</a>
</div>
<div class="immersive-middle">
Assignment 1 - Introduction to Economics
</div>
<div class="immersive-right">
<button class="nav-icon-btn">‹ Prev</button>
<button class="nav-icon-btn">Next ›</button>
</div>
</div>
<div class="nav-shadow"></div>
</div>
`;
}
}

customElements.define('d2l-demo-nav', DemoNav);
customElements.define('d2l-demo-nav-immersive', DemoNavImmersive);
67 changes: 67 additions & 0 deletions components/page/demo/page-simple-immersive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
<script type="module">
import '../../demo/demo-page.js';
import '../page.js';
import '../page-main.js';
import './demo-navs.js';
</script>
</head>
<body>
<d2l-page width-type="normal">
<d2l-demo-nav-immersive slot="header"></d2l-demo-nav-immersive>
<d2l-page-main>
<div slot="header">
<d2l-switch id="switch-width-type" text="Fullscreen"></d2l-switch>
</div>
<p>I'm in the <b>default</b> slot of the <b>d2l-page-main</b> component!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales.
</p>
<p>Additional content to demonstrate scrolling behavior and layout. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus.</p>
<p>Vivamus interdum pretium libero dictum eleifend. Donec eros tortor, facilisis eget maximus in, malesuada a magna. Nulla ac felis turpis. Donec pellentesque est in rhoncus tempus.</p>
<p>Maecenas nunc nulla, viverra ut ornare id, luctus eu nulla. Pellentesque massa turpis, porta ut tincidunt ut, ullamcorper vitae urna. Nam congue euismod placerat.</p>
<p>Vestibulum aliquet, metus vitae viverra posuere, lacus urna hendrerit turpis, vel laoreet ligula odio et nisl. Mauris id lectus magna. Sed gravida tincidunt sapien quis dapibus.</p>
<p>Curabitur at semper augue. Integer id ex id metus euismod laoreet. Nunc viverra leo arcu, at dapibus neque efficitur sit amet. Integer efficitur neque et elementum sollicitudin.</p>
<p>Sed nec ullamcorper tortor. Donec ullamcorper ligula id iaculis volutpat. Integer venenatis, arcu vitae luctus facilisis, est libero hendrerit ipsum, at blandit purus risus in orci.</p>
<p>Praesent placerat, velit eget finibus posuere, sem mauris sodales mauris, sed feugiat orci felis sit amet risus. Proin non neque nec nibh vestibulum placerat sit amet non purus.</p>
<p>Phasellus consequat leo et placerat ultricies. Aliquam a lorem ut lectus faucibus interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Integer dictum, nibh eget congue pretium, risus dolor sagittis odio, a tempor urna justo sit amet erat. Suspendisse potenti. Quisque ut sagittis libero, ut maximus arcu.</p>
<p>Duis mattis, arcu nec posuere consequat, lacus augue vulputate arcu, sed pulvinar lorem lacus sit amet felis. Fusce at orci justo. Sed dapibus ornare purus, ut cursus velit.</p>
<p>Etiam convallis urna non purus lacinia, in cursus metus pretium. Integer dictum, nibh eget congue pretium, risus dolor sagittis odio, a tempor urna justo sit amet erat.</p>
<p>Morbi bibendum, nisl sit amet posuere ullamcorper, lectus turpis efficitur augue, nec viverra nisl dui vel erat. Nulla facilisi. Vivamus volutpat accumsan laoreet.</p>
<p>Nam nec velit sed nisl finibus posuere. Sed justo ipsum, viverra ut nunc quis, blandit euismod nunc. Integer ac tristique risus. Donec ut erat vitae tellus facilisis posuere.</p>
<p>In aliquam, arcu a interdum consequat, massa libero semper mi, id blandit risus arcu non odio. Vestibulum convallis justo non nisi bibendum, nec viverra enim tempor.</p>
<p>Aliquam erat volutpat. Aenean commodo suscipit felis, vitae dapibus nisl efficitur ut. Cras consequat, lorem et tincidunt semper, risus metus scelerisque sapien, at interdum odio urna a tortor.</p>
<p>Nulla a lacus ac magna accumsan venenatis. Sed porttitor, neque in iaculis iaculis, felis mi dapibus mi, vitae lacinia velit lorem at odio.</p>
<p>Ut vel elit sed dolor malesuada tincidunt. Suspendisse luctus faucibus neque, in commodo elit malesuada non. Aliquam pharetra, ipsum non facilisis tempus, dolor lacus vulputate est, in molestie odio augue ac tortor.</p>
<p>Donec varius neque quis lacus fermentum, a porta turpis aliquam. Phasellus pretium, ante sit amet volutpat posuere, arcu lorem iaculis nibh, sed suscipit risus purus id mi.</p>
<p>Vivamus sodales fermentum mauris, non aliquam arcu facilisis ac. Nam vitae faucibus dolor. Pellentesque non diam ut dolor hendrerit tempor ut et tellus.</p>
<p>Sed tristique, mauris at malesuada aliquam, tortor nisl auctor nunc, vitae congue ante dui nec ante. Mauris lobortis justo quis tincidunt cursus. Integer ultricies finibus commodo.</p>
<p>In aliquam, arcu a interdum consequat, massa libero semper mi, id blandit risus arcu non odio. Vestibulum convallis justo non nisi bibendum, nec viverra enim tempor.</p>
<p>Aliquam erat volutpat. Aenean commodo suscipit felis, vitae dapibus nisl efficitur ut. Cras consequat, lorem et tincidunt semper, risus metus scelerisque sapien, at interdum odio urna a tortor.</p>
<p>Nulla a lacus ac magna accumsan venenatis. Sed porttitor, neque in iaculis iaculis, felis mi dapibus mi, vitae lacinia velit lorem at odio.</p>
<p>Ut vel elit sed dolor malesuada tincidunt. Suspendisse luctus faucibus neque, in commodo elit malesuada non. Aliquam pharetra, ipsum non facilisis tempus, dolor lacus vulputate est, in molestie odio augue ac tortor.</p>
<p>Donec varius neque quis lacus fermentum, a porta turpis aliquam. Phasellus pretium, ante sit amet volutpat posuere, arcu lorem iaculis nibh, sed suscipit risus purus id mi.</p>
<p>Vivamus sodales fermentum mauris, non aliquam arcu facilisis ac. Nam vitae faucibus dolor. Pellentesque non diam ut dolor hendrerit tempor ut et tellus.</p>
<p>Sed tristique, mauris at malesuada aliquam, tortor nisl auctor nunc, vitae congue ante dui nec ante. Mauris lobortis justo quis tincidunt cursus. Integer ultricies finibus commodo.</p>
</d2l-page-main>
<div slot="footer">
I'm in the <b>footer</b> slot of the <b>d2l-page</b> component!
</div>
</d2l-page>
<script>
const page = document.querySelector('d2l-page');
const widthSwitch = document.querySelector('#switch-width-type');

widthSwitch.addEventListener('change', (e) => {
page.setAttribute('width-type', e.target.on ? 'fullscreen' : 'normal');
});

</script>
</body>
</html>
Loading
Loading