Agriwebb templates. SOme notes and todo cleaning. Other file organization.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,213 @@
|
||||
<button
|
||||
type="button"
|
||||
class="dialog-trigger np-view-all-achievements"
|
||||
data-toggle-class-on-target
|
||||
data-toggle-target="#dialog_achievements"
|
||||
data-toggle-escape
|
||||
data-toggle-modal>
|
||||
View All
|
||||
</button>
|
||||
|
||||
<div class="dialog" id="dialog_achievements">
|
||||
<section class="dialog-container">
|
||||
<header class="dialog-header">
|
||||
<h5>Achievements</h5>
|
||||
<button
|
||||
type="button"
|
||||
data-toggle-trigger-off
|
||||
class="modal-close"
|
||||
>
|
||||
<i class="fal fa-times"></i>
|
||||
</button>
|
||||
</header>
|
||||
<div class="dialog-content acheievements-list row">
|
||||
{% assign courses_by_name = courses.enrolled | sort: "name" %}
|
||||
{% for course in courses_by_name %}
|
||||
{% if course.properties.badges != "NULL" %}
|
||||
<div class="np-card-content-title achievements-card col-xs-12 col-md-6 col-lg-4">
|
||||
<div class="course-badge">
|
||||
<div class="badge-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.progress == 100 %}
|
||||
<img class="np-achievement-icon" src="{{ course.properties.badges }}" />
|
||||
<div class="badge-btns">
|
||||
<a class="badge-btn" onclick="downloadImage('{{ course.properties.badges }}', '{{ course.name }}')"> Download</a>
|
||||
<a class="badge-btn add-to-linkedin" href="https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name={{course.name}}&organizationId=3211815" target="_blank">Add to LinkedIn</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<img class="np-achievement-icon badge-locked" src="{{ course.properties.badges }}" />
|
||||
<div class="badge-btns">
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dialog-trigger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.dialog-trigger:hover,
|
||||
.dialog-trigger:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
.dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
/* padding: 1em; */
|
||||
background-color: rgba(0,0,0,.75);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: .25s ease-out;
|
||||
}
|
||||
.dialog.is-active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.dialog-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
margin: auto;
|
||||
transform: translateY(-1em) scale(.95);
|
||||
background-color: white;
|
||||
transition: transform .25s ease-out;
|
||||
}
|
||||
.dialog.is-active .dialog-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
.dialog-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: 48px 32px;
|
||||
max-width: 1920px;
|
||||
margin: auto;
|
||||
overflow-y: scroll;
|
||||
max-height: 100%;
|
||||
}
|
||||
.dialog-header {
|
||||
background-color: #092344;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
text-align:center;
|
||||
position:relative;
|
||||
}
|
||||
.dialog-header h5 {
|
||||
margin: 0;
|
||||
font-size:1.2rem;
|
||||
}
|
||||
|
||||
.dialog-header button {
|
||||
border: none;
|
||||
color: white;
|
||||
position:absolute;
|
||||
right:12px;
|
||||
top:4px;
|
||||
background: transparent;
|
||||
font-size: 1.7rem;
|
||||
cursor:pointer;
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
.achievements-card {
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.course-badge {
|
||||
padding:16px;
|
||||
text-align:center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.badge-title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3rem;
|
||||
margin: 0 auto 8px;
|
||||
max-width: 200px;
|
||||
flex:1
|
||||
}
|
||||
|
||||
.course-badge img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.badge-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.badge-btns a {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.badge-btn {
|
||||
background: #092344;
|
||||
padding: 12px 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.1s;
|
||||
min-width: 130px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.badge-btn:hover,
|
||||
.badge-btn:hover {
|
||||
background-color:#65bb39;
|
||||
}
|
||||
.badge-locked {
|
||||
filter: grayscale(50) opacity(30%) blur(1px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
async function downloadImage(imageSrc, fileName) {
|
||||
const fileNameFinal = fileName.replaceAll(" ", "-").toLowerCase()
|
||||
const image = await fetch(imageSrc)
|
||||
const imageBlog = await image.blob()
|
||||
const imageURL = URL.createObjectURL(imageBlog)
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.href = imageURL
|
||||
link.download = fileNameFinal
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
// Get month and year and append as date params to linkedin links
|
||||
const date = new Date()
|
||||
const month = date.getMonth() + 1
|
||||
const year = date.getFullYear()
|
||||
|
||||
const issueDateParams = "&issueYear=" + year + "&issueMonth=" + month
|
||||
|
||||
$(".add-to-linkedin").attr('href', function(index, item) {
|
||||
return item + issueDateParams;
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.properties.badges != 'NULL'%}
|
||||
<img class="card-badge" src="{{ course.properties.badges }}" />
|
||||
{% endif %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
|
||||
|
||||
<script>
|
||||
window.intercomSettings = {
|
||||
app_id: "hal1rveh"
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/hal1rveh'
|
||||
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/hal1rveh';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
|
||||
</script>
|
||||
<style>
|
||||
.intercom-lightweight-app-launcher {
|
||||
left:15% !important;
|
||||
bottom: 45px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
<div class="np-dashboard-resources">
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-dashboard-border">
|
||||
<div class="np-card-content-achievements">
|
||||
<div class="achievements-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.badges != 'NULL' and course.progress == 100 %}
|
||||
<div>
|
||||
<div class="np-card-content-title col-12">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<img class="np-achievement-icon" src="{{ course.properties.badges }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% include "achievements_modal" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const noBadgeMsg = "<div class='no-badge-msg'>Complete a course to recieve your first badge!</div>";
|
||||
$('document').ready(function() {
|
||||
if ($(".achievements-carousel").children().length > 0) {
|
||||
$('.achievements-carousel').slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
infinite: true,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 5000,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
responsive: [{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
dots: false
|
||||
}
|
||||
}]
|
||||
})
|
||||
} else {
|
||||
$(".achievements-carousel").append(noBadgeMsg)
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$(".dialog-trigger").click(function() {
|
||||
if (!$("body").hasClass("modal-open")) {
|
||||
$("body").addClass("modal-open");
|
||||
}
|
||||
});
|
||||
|
||||
$(".modal-close").click(function() {
|
||||
$("body").removeClass("modal-open");
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.noBadgeMsg {
|
||||
text-align:center;
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .np-card-content-title {
|
||||
text-align:center;
|
||||
font-size:0.937rem;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-card-content-achievements {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem 2rem .5rem;
|
||||
}
|
||||
|
||||
.np-card-content-achievements .slick-slider {
|
||||
width:100%;
|
||||
max-width: 375px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.np-achievement-icon {
|
||||
color: #bec2c6;
|
||||
margin:14px auto 26px;
|
||||
width:130px;
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
color: #35404E;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.slick-arrow.fa-chevron-left { left:0 }
|
||||
.slick-arrow.fa-chevron-right { right:0; }
|
||||
|
||||
.np-view-all-achievements {
|
||||
color:#092344;
|
||||
font-size:0.8rem;
|
||||
text-transform:uppercase;
|
||||
text-align:center;
|
||||
text-decoration:none;
|
||||
margin-bottom:1.5rem;
|
||||
cursor:pointer;
|
||||
font-weight:500;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.np-view-all-achievements:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
@media (min-width:1024px) {
|
||||
.np-card-content-achievements .slick-slider {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Achievements
|
||||
</div>
|
||||
{% include "widget_achievements" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,7 @@
|
||||
.card-badge {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
.np-card-content-footer {
|
||||
align-items: center;
|
||||
}
|
||||
@ -23,4 +23,4 @@
|
||||
}
|
||||
const observer = new MutationObserver(callback);
|
||||
observer.observe(targetNode, config);
|
||||
}}}
|
||||
}}});
|
||||
|
||||
Reference in New Issue
Block a user