norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More configuration of some notes with Neorg. Added a few script items.

Browse Source
This commit is contained in:
Norm Rasmussen
2023-08-22 17:19:23 -04:00
parent b4ff268b5a
commit d9938dc94d
8 changed files with 518 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
Custom_Templates/Custom_CSS/RTE_Elements_activities.html Normal file
View File

@ -0,0 +1,88 @@
/*
These are the elements for the courses and activities. To access in Northpass, create a new activity,
select Rich Text, click the < > to open the code block, and paste the appropriate div class that you'd like to use.
*/
/* Accordion Boxes */
<div>
<div class="accordion">
<p style="font-size: 18px;"><strong>Lorem Ipsum</strong></p>
</div>
<div class="accordion-panel">
<div class="accordion-panel-content">
<p style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div>
<div class="accordion">
<p style="font-size: 18px;"><strong>Lorem Ipsum2</strong></p>
</div>
<div class="accordion-panel">
<div class="accordion-panel-content">
<p style="font-size: 16px;">NUMBER 2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
/* Info Boxes */
<div class="info-box general">
General
</div>
<div class="info-box people">
People
</div>
<div class="info-box glossary">
Glossary
</div>
<div class="info-box resources">
<div class="resource-blocks">
<a href="">Resource Block link</a>
<a href="">
<span>Resource Block link bolded</span>
</a>
</div>
</div>
<div class="info-box alert">
Alert
</div>
<div class="info-box course">
<div class="courses-wrapper">
<a href="">
<img src="https://cdn.filestackcontent.com/53avp0MYQoiLIGdPrpOX?policy=eyJjYWxsIjpbImNvbnZlcnQiLCJwaWNrIiwic3RvcmUiLCJyZWFkIl0sImV4cGlyeSI6MTY4OTMyOTU2OX0%3D&signature=6d62f1f1f52a0624c19c69e5291176ade6e058b3e1e9099c721bdac5d2f6b0b8&cache=true" alt="">
<div>
<div class="title">Course Title</div>
<div class="subtitle">Course Subitle</div>
<div class="level">Level</div>
</div>
</a>
<a href="">
<img src="https://cdn.filestackcontent.com/53avp0MYQoiLIGdPrpOX?policy=eyJjYWxsIjpbImNvbnZlcnQiLCJwaWNrIiwic3RvcmUiLCJyZWFkIl0sImV4cGlyeSI6MTY4OTMyOTU2OX0%3D&signature=6d62f1f1f52a0624c19c69e5291176ade6e058b3e1e9099c721bdac5d2f6b0b8&cache=true" alt="">
<div>
<div class="title">Course Title</div>
<div class="subtitle">Course Subitle</div>
<div class="level">Level</div>
</div>
</a>
<a href="">
<img src="https://cdn.filestackcontent.com/53avp0MYQoiLIGdPrpOX?policy=eyJjYWxsIjpbImNvbnZlcnQiLCJwaWNrIiwic3RvcmUiLCJyZWFkIl0sImV4cGlyeSI6MTY4OTMyOTU2OX0%3D&signature=6d62f1f1f52a0624c19c69e5291176ade6e058b3e1e9099c721bdac5d2f6b0b8&cache=true" alt="">
<div>
<div class="title">Course Title</div>
<div class="subtitle">Course Subitle</div>
<div class="level">Level</div>
</div>
</a>
<a href="">
<img src="https://cdn.filestackcontent.com/53avp0MYQoiLIGdPrpOX?policy=eyJjYWxsIjpbImNvbnZlcnQiLCJwaWNrIiwic3RvcmUiLCJyZWFkIl0sImV4cGlyeSI6MTY4OTMyOTU2OX0%3D&signature=6d62f1f1f52a0624c19c69e5291176ade6e058b3e1e9099c721bdac5d2f6b0b8&cache=true" alt="">
<div>
<div class="title">Course Title</div>
<div class="subtitle">Course Subitle</div>
<div class="level">Level</div>
</div>
</a>
</div>
</div>

358
Custom_Templates/Custom_CSS/RTE_elements_customcss.css Normal file
View File

@ -0,0 +1,358 @@
/*
These custom elements should be placed in the Custom CSS tab OR within
the forked LX repo. These will create classes for various RTE elements within a course.
Note that you also need to clone the RTE Elements course from an existing academy (Anthology, G2)
so that the examples can be shown. They create the following elements:
- info-box - general, resources, glossary, courses,
- accordion
*/
<style>
/* Transcript Toggle styles */
.transcriptToggle {
color:#0C3C92;
margin-bottom:10px;
position:relative;
}
.transcriptToggle {
margin-bottom:20px;
}
.transcriptToggle::after {
content:'';
background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L5 5L1 1' stroke='%230C3C92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
height:10px;
width:10px;
background-size:100% auto;
background-repeat: no-repeat;
background-position: center;
position:absolute;
top:50%;
transform:translateY(-50%);
transition:transform 0.2s;
right:0;
}
.transcriptToggle.open::after {
transform:translateY(-50%) rotate(180deg);
}
.transcriptContent {
max-height: 0;
transition: max-height 0.4s ease-out;
overflow: hidden;
}
.transcriptContent.open {
max-height:3000px;
transition: max-height 0.6s ease-in;
padding-bottom:24px;
}
/* Accordion styles */
.fr-view .accordion,
div[data-test='additional-information'] .accordion {
background-color: transparent;
border-top: 1px solid #000;
cursor: pointer;
padding: 25px 0;
width: 100%;
text-align: left;
outline: none;
transition: 0.4s;
font-size: 26px;
line-height: 125%;
position:relative;
}
.fr-view .accordion:before,
div[data-test='additional-information'] .accordion:before,
.fr-view .accordion:after,
div[data-test='additional-information'] .accordion:after {
content: '';
width:24px;
height:24px;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
background-color:#000;
transition:opacity 0.2s;
}
.fr-view .accordion:before,
div[data-test='additional-information'] .accordion:before {
width:14px;
height:2px;
}
.fr-view .accordion:after,
div[data-test='additional-information'] .accordion:after {
width:2px;
height:14px;
right:6px;
}
.fr-view .accordion.active:after,
div[data-test='additional-information'] .accordion.active:after {
opacity:0;
}
.fr-view .accordion-panel,
div[data-test='additional-information'] .accordion-panel {
padding: 0;
background-color: transparent;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
font-size: 20px;
line-height: 150%;
}
.fr-view .accordion-panel .accordion-panel-content,
div[data-test='additional-information'] .accordion-panel .accordion-panel-content {
padding-bottom:25px;
max-width:600px;
}
.fr-view .accordion-panel p,
div[data-test='additional-information'] .accordion-panel p {
font-size: 20px;
line-height: 150%;
}
.fr-view .accordion-panel:last-of-type,
div[data-test='additional-information'] .accordion-panel:last-of-type {
border-bottom:1px solid #000;
}
/* Labels styling */
.fr-view .info-box, div[data-test='additional-information'] .info-box {
padding: 64px 20px 20px;
background: #f0f0ff;
border-left: 4px solid #2d29fc;
position: relative;
font-weight: 500;
font-size: 16px;
line-height: 150%;
margin-bottom: 25px;
}
.fr-view .info-box:after, div[data-test='additional-information'] .info-box:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
top: 20px;
left: 20px;
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.fr-view .info-box.general, div[data-test='additional-information'] .info-box.general {
background: #f0f0ff;
}
.fr-view .info-box.general:after, div[data-test='additional-information'] .info-box.general:after {
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.fr-view .info-box.people, div[data-test='additional-information'] .info-box.people {
background: #ead9e3;
font-weight: 600;
}
.fr-view .info-box.people:after, div[data-test='additional-information'] .info-box.people:after {
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 21V15L3 15V21' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M21 21V15H18.5' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.fr-view .info-box.glossary, div[data-test='additional-information'] .info-box.glossary {
background: #e8e8e8;
}
.fr-view .info-box.glossary:after, div[data-test='additional-information'] .info-box.glossary:after {
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3H6V21L12 17L18 21V3Z' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
}
.fr-view .info-box.resources, div[data-test='additional-information'] .info-box.resources {
background: #eff8fa;
}
.fr-view .info-box.resources .resource-blocks, div[data-test='additional-information'] .info-box.resources .resource-blocks {
display: flex;
flex-direction: column;
}
.fr-view .info-box.resources .resource-blocks a, div[data-test='additional-information'] .info-box.resources .resource-blocks a {
color: #333132;
background-color: #fff;
padding: 20px 20px 54px;
display: block;
font-weight: 400;
font-size: 20px;
line-height: 150%;
margin-bottom: 25px;
width: 100%;
position: relative;
}
.fr-view .info-box.resources .resource-blocks a span, div[data-test='additional-information'] .info-box.resources .resource-blocks a span {
display: block;
font-weight: 600;
font-size: 14px;
line-height: 150%;
}
.fr-view .info-box.resources .resource-blocks a:hover, div[data-test='additional-information'] .info-box.resources .resource-blocks a:hover {
color: #2d29fc;
}
.fr-view .info-box.resources .resource-blocks a:after, div[data-test='additional-information'] .info-box.resources .resource-blocks a:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
bottom: 20px;
right: 20px;
background-image: url("data:image/svg+xml,%0A%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.32812 17L17.3281 7' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M7.32812 7H17.3281V17' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.fr-view .info-box.resources:after, div[data-test='additional-information'] .info-box.resources:after {
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.2417 7.76001L14.1217 14.12L7.76172 16.24L9.88172 9.88001L16.2417 7.76001Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
.fr-view .info-box.alert, div[data-test='additional-information'] .info-box.alert {
background: #fff0f0;
border-left: 4px solid #ff2a26;
}
.fr-view .info-box.alert:after, div[data-test='additional-information'] .info-box.alert:after {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.76619 20L12 2.94365L22.2338 20H1.76619Z' stroke='%23990300' stroke-width='2'/%3E%3Cpath d='M12 9V13' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 17H12.01' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fr-view .info-box.alert a, div[data-test='additional-information'] .info-box.alert a {
color: #990300;
}
.fr-view .info-box.course, div[data-test='additional-information'] .info-box.course {
background-color: #f5f6ff;
border-left: 4px solid #2e29fc;
}
.fr-view .info-box.course:after, div[data-test='additional-information'] .info-box.course:after {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='album 1'%3E%3Cpath id='Vector' d='M11 3V11L14 8L17 11V3' stroke='%232D29FC' stroke-width='2' stroke-linecap='square'/%3E%3Crect id='Rectangle 566' x='3' y='3' width='18' height='18' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath id='Vector 115' d='M7 3V21' stroke='%232D29FC' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.fr-view .info-box.course .courses-wrapper, div[data-test='additional-information'] .info-box.course .courses-wrapper {
display: flex;
flex-wrap: wrap;
}
.fr-view .info-box.course .courses-wrapper a, div[data-test='additional-information'] .info-box.course .courses-wrapper a {
color: #333132;
background-color: #fff;
padding: 15px;
display: flex;
font-weight: 400;
font-size: 20px;
line-height: 150%;
margin-bottom: 10px;
width: 100%;
position: relative;
}
.fr-view .info-box.course .courses-wrapper a img, div[data-test='additional-information'] .info-box.course .courses-wrapper a img {
margin-right: 20px;
width: 140px;
object-fit: cover;
}
.fr-view .info-box.course .courses-wrapper a > div, div[data-test='additional-information'] .info-box.course .courses-wrapper a > div {
display: flex;
flex-direction: column;
}
.fr-view .info-box.course .courses-wrapper a .title, div[data-test='additional-information'] .info-box.course .courses-wrapper a .title {
color: #242424;
font-size: 18px;
line-height: normal;
font-weight: 600;
margin-bottom: 10px;
}
.fr-view .info-box.course .courses-wrapper a .subtitle, div[data-test='additional-information'] .info-box.course .courses-wrapper a .subtitle {
color: #6b686a;
font-size: 11px;
font-weight: 500;
line-height: 14px;
}
.fr-view .info-box.course .courses-wrapper a .level, div[data-test='additional-information'] .info-box.course .courses-wrapper a .level {
color: #2e29fc;
font-size: 12px;
font-weight: 600;
margin-top: auto;
}
.fr-view .info-box.course .courses-wrapper a:after, div[data-test='additional-information'] .info-box.course .courses-wrapper a:after {
content: "";
position: absolute;
width: 24px;
height: 24px;
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E");
background-size: contain;
background-position: center;
right: 15px;
bottom: 15px;
}
.fr-view .info-box.course .courses-wrapper a:hover, div[data-test='additional-information'] .info-box.course .courses-wrapper a:hover {
text-decoration: none;
}
@media (min-width: 768px) {
.fr-view .info-box, div[data-test='additional-information'] .info-box {
padding: 20px 20px 20px 64px;
}
.fr-view .info-box.resources .resource-blocks, div[data-test='additional-information'] .info-box.resources .resource-blocks {
flex-direction: row;
}
.fr-view .info-box.resources .resource-blocks a, div[data-test='additional-information'] .info-box.resources .resource-blocks a {
margin: 0 10px;
}
.fr-view .info-box.resources .resource-blocks a:first-child, div[data-test='additional-information'] .info-box.resources .resource-blocks a:first-child {
margin-left: 0;
}
.fr-view .info-box.resources .resource-blocks a:last-child, div[data-test='additional-information'] .info-box.resources .resource-blocks a:last-child {
margin-right: 0;
}
.fr-view .info-box.course .courses-wrapper, div[data-test='additional-information'] .info-box.course .courses-wrapper {
margin-left: -10px;
margin-right: -10px;
}
.fr-view .info-box.course .courses-wrapper a, div[data-test='additional-information'] .info-box.course .courses-wrapper a {
margin: 0 10px 20px;
width: calc(50% - 20px);
}
}
</style>
<script>
window.addEventListener("DOMContentLoaded", () => {
handleAccordions()
window.Northpass.subscribe("activityRender", (data) => {
handleAccordions()
})
})
function handleAccordions() {
if (
document.querySelectorAll(".accordion").length > 0 &&
document.querySelectorAll(".accordion-panel").length > 0
) {
var acc = document.getElementsByClassName("accordion");
toggleAccordions(acc);
}
}
function toggleAccordions(acc) {
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
}
</script>