Skip to content

Rich text & course design dark mode revisions #780

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

Open
kchar601 wants to merge 13 commits into
base: master
Choose a base branch
from
+386 −175
Open

Rich text & course design dark mode revisions #780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2199318
Richtext changes
kchar601 Mar 4, 2026
c82beba
learning component + activity box
kchar601 Mar 5, 2026
8a534bb
slighht import fix
kchar601 Mar 5, 2026
55960d7
abbr typo fix
kchar601 Mar 5, 2026
bde51bb
more bug fixes for abbr
kchar601 Mar 5, 2026
c7ca635
Refactor ActivityBox for PR
kchar601 Mar 6, 2026
b6809e2
Remove super method from activity-box.js
kchar601 Mar 6, 2026
851e870
proper fix with DDD in activity-box
kchar601 Mar 6, 2026
13dbd3c
Merge branch 'haxtheweb:master' into richTextRevisions
kchar601 Mar 6, 2026
2d732b5
added hr to docs as per #2611
kchar601 Mar 6, 2026
e6c16f8
documentation updates for DDD (hr and other design treatments)
kchar601 Mar 21, 2026
2be9756
small doc fix
kchar601 Mar 21, 2026
941bc63
Merge branch 'master' into richTextRevisions
kchar601 Mar 21, 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
117 changes: 82 additions & 35 deletions elements/course-design/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,71 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
/>
<title>CourseDesign: course-design Demo</title>
<script>
window.process = window.process || {
env: {
NODE_ENV: "production"
}
NODE_ENV: "production",
},
};
</script>
<script src="../../../node_modules/@haxtheweb/deduping-fix/deduping-fix.js"></script>

<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
<script
src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js"
charset="UTF-8"
></script>
<script type="module">

import "@haxtheweb/demo-snippet/demo-snippet.js";
import '../lib/block-quote.js';
import '../lib/block-quote.js';
import '../lib/ebook-button.js';
import '../lib/lrn-h5p.js';
import '../lib/course-intro.js';
import '../lib/learning-component.js';
import '../lib/activity-box.js';
import '../lib/worksheet-download.js';
import "../lib/block-quote.js";
import "../lib/block-quote.js";
import "../lib/ebook-button.js";
import "../lib/lrn-h5p.js";
import "../lib/course-intro.js";
import "../lib/learning-component.js";
import "../lib/activity-box.js";
import "../lib/worksheet-download.js";
</script>

</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic usage of activity-box</h3>
<demo-snippet>
<template>
<learning-component data-accent="6" data-primary="20" subtitle="Step 2: Interview Potential Customers here is a super long title in order to be able to recreate the bug that was occuring" url="https://www.google.com/" accent-color="orange" title="Learning Objectives here is a super long title in order to be able to recreate the bug that was occuring" icon="courseicons:learning-objectives" type="">

<learning-component
data-accent="6"
data-primary="20"
subtitle="Step 2: Interview Potential Customers here is a super long title in order to be able to recreate the bug that was occuring"
url="https://www.google.com/"
accent-color="orange"
title="Learning Objectives here is a super long title in order to be able to recreate the bug that was occuring"
icon="courseicons:learning-objectives"
type=""
>
<p>This step includes three parts:&nbsp;</p>
<ul>

<li>

<a href="/step2-part1">Part 1: Figure Out What To Ask</a>
</li>
<li>

<a href="/step2-part2">Part 2: Find People To Interview</a>
&nbsp;

&nbsp;
</li>
<li>

<a href="/step2-part3">Part 3: Conduct Customer Interviews</a>
</li>
</ul>
<p>In Step 2, you will be interviewing potential customers to find out if your assumptions are correct or where they fall short. This process helps you make sure that you are building something that solves a real problem for real customers.</p>
<p>
In Step 2, you will be interviewing potential customers to find
out if your assumptions are correct or where they fall short. This
process helps you make sure that you are building something that
solves a real problem for real customers.
</p>
</learning-component>
<learning-component icon="av:explicit">
<div>
Expand Down Expand Up @@ -111,11 +123,25 @@ <h3>Basic usage of activity-box</h3>
<learning-component type="connection" subtitle="Unit 1">
<div>This specific chemistry foundation is related to...</div>
</learning-component>
<learning-component type="strategy" subtitle="Draw a Diagram" url="https://www.google.com/">
<div>In order to better understand this complex process, try drawing a diagam to help undestand the concept..</div>
<learning-component
type="strategy"
subtitle="Draw a Diagram"
url="https://www.google.com/"
>
<div>
In order to better understand this complex process, try drawing a
diagam to help undestand the concept..
</div>
</learning-component>
<learning-component type="strategy" subtitle="Draw a Diagram" url="https://www.google.com/">
<div>In order to better understand this complex process, try drawing a diagam to help undestand the concept..</div>
<learning-component
type="strategy"
subtitle="Draw a Diagram"
url="https://www.google.com/"
>
<div>
In order to better understand this complex process, try drawing a
diagam to help undestand the concept..
</div>
</learning-component>
<learning-component type="assessment" subtitle="Unit 1">
<div>Did you know that the topic in this lessson relates to...</div>
Expand Down Expand Up @@ -207,34 +233,55 @@ <h3>Basic usage of activity-box</h3>
</activity-box>
</template>
</demo-snippet>
<activity-box data-primary="2" data-accent="1" icon="settings">
Drag &amp; drop - drag the icons to the matching descriptions.
</activity-box>
<h3>block-quote</h3>
<demo-snippet>
<template>
<block-quote citation="Albert Einstein" image="https://www.vidavetcare.com/wp-content/uploads/sites/234/2022/04/golden-retriever-dog-breed-info.jpeg">
<block-quote
citation="Albert Einstein"
image="https://www.vidavetcare.com/wp-content/uploads/sites/234/2022/04/golden-retriever-dog-breed-info.jpeg"
>
<span slot="quote">
I was sitting in a chair in the patent office at Bern, when all of a sudden
a thought occurred to me: ‘If a person falls freely, he will not feel his
own weight.
I was sitting in a chair in the patent office at Bern, when all of
a sudden a thought occurred to me: ‘If a person falls freely, he
will not feel his own weight.
</span>
</block-quote>
</template>
</demo-snippet>
<h3>worksheet-download</h3>
<demo-snippet>
<template>
<worksheet-download title="Download site schema" link="https://btopro.com/site.json"></worksheet-download>
<worksheet-download
title="Download site schema"
link="https://btopro.com/site.json"
></worksheet-download>
</template>
</demo-snippet>
<h3>ebook-button</h3>
<demo-snippet>
<template>
<ebook-button title="Check out the website text" link="https://btopro.com/"></ebook-button>
<ebook-button
title="Check out the website text"
link="https://btopro.com/"
></ebook-button>
</template>
</demo-snippet>
<h3>lrn-h5p</h3>
<demo-snippet>
<template>
<lrn-h5p><iframe src="https://h5p.org/h5p/embed/612" width="1090" height="639" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe></lrn-h5p>
<lrn-h5p
><iframe
src="https://h5p.org/h5p/embed/612"
width="1090"
height="639"
frameborder="0"
allowfullscreen="allowfullscreen"
allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"
></iframe
></lrn-h5p>
</template>
</demo-snippet>
</div>
Expand Down
39 changes: 34 additions & 5 deletions elements/course-design/lib/activity-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { LitElement, html, css } from "lit";
import { DDD } from "@haxtheweb/d-d-d/d-d-d.js";
import { css, html } from "lit";

export class ActivityBox extends LitElement {
export class ActivityBox extends DDD {
static get styles() {
return [
super.styles,
css`
:host {
display: block;
Expand All @@ -18,11 +20,38 @@ export class ActivityBox extends LitElement {
margin-bottom: var(--activity-box-container-margin-bottom, 20px);
position: relative;
min-height: 60px;
--simple-icon-color: white;
color: white;
}
:host([data-primary][data-accent]) .container {
background: var(--ddd-theme-primary);
background: -moz-linear-gradient(
-45deg,
var(--ddd-theme-primary) 50%,
var(--ddd-theme-accent) 99%
);
background: -webkit-linear-gradient(
-45deg,
var(--ddd-theme-primary) 50%,
var(--ddd-theme-accent) 99%
);
background: linear-gradient(
135deg,
var(--ddd-theme-primary) 50%,
var(--ddd-theme-accent) 99%
);
color: var(
--ddd-theme-bgContrast,
var(--lowContrast-override, inherit)
);
--simple-icon-color: var(
--ddd-theme-bgContrast,
var(--lowContrast-override, inherit)
);
}
simple-icon {
--simple-icon-height: 80px;
--simple-icon-width: 80px;
--simple-icon-color: white;
float: left;
position: absolute;
top: 0px;
Expand Down Expand Up @@ -52,16 +81,15 @@ export class ActivityBox extends LitElement {
}
.pullout {
padding-left: 48px;
color: white;
margin-top: 0;
font-family: var(--activity-box-content-font-family, inherit);
font-weight: 400;
margin-bottom: 10px;
font-size: 126%;
line-height: 28px;
padding: var(--activity-box-content-padding, 0px 0px 0px 85px);
margin-bottom: 13px !important;
max-width: 100%;
font-size: 24px;
}
:host([icon="null"]) .pullout,
:host([icon="null"]) .tag,
Expand Down Expand Up @@ -101,6 +129,7 @@ export class ActivityBox extends LitElement {
static get haxProperties() {
return new URL("./activity-box.haxProperties.json", import.meta.url).href;
}

static get properties() {
return {
/* The icon to use for the activity box */
Expand Down
21 changes: 13 additions & 8 deletions elements/course-design/lib/block-quote.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { html, css } from "lit";
import "@haxtheweb/simple-icon/lib/simple-icons.js";
import "@haxtheweb/simple-icon/lib/simple-icon-lite.js";
import { DDD } from "@haxtheweb/d-d-d/d-d-d.js";
import "@haxtheweb/simple-icon/lib/simple-icon-lite.js";
import "@haxtheweb/simple-icon/lib/simple-icons.js";
import { css, html } from "lit";

export class BlockQuote extends DDD {
static get properties() {
Expand Down Expand Up @@ -63,11 +63,16 @@ export class BlockQuote extends DDD {
super.styles,
css`
:host {
background-color: var(
--ddd-component-block-quote-background,
var(--ddd-theme-default-limestoneMaxLight, #f5f5f5)
background-color: light-dark(
var(
--ddd-component-block-quote-background,
var(--ddd-theme-default-limestoneMaxLight, inherit)
),
var(
--ddd-component-block-quote-background,
var(--ddd-theme-default-coalyGray, inherit)
)
);
color: var(--ddd-theme-default-potentialMidnight);
display: flex;
align-items: start;
width: 100%;
Expand Down Expand Up @@ -120,7 +125,7 @@ export class BlockQuote extends DDD {
align-self: flex-start;
color: var(
--ddd-component-block-quote-icon,
var(--ddd-theme-accent, var(--ddd-theme-default-potential50))
var(--ddd-theme-accent, inherit)
);
height: var(--ddd-icon-xs);
width: var(--ddd-icon-xs);
Expand Down
Loading
Loading