jnj addition
This commit is contained in:
Norm Rasmussen
@ -1,4 +1,4 @@
|
||||
<div class="np-card">
|
||||
{% comment %} <div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top">
|
||||
</div>
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
<p class="course-title-vision">
|
||||
{{ course.name }}
|
||||
</p>
|
||||
<div class="np-card-content-footer">
|
||||
@ -36,40 +36,49 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}" >
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top"> </div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
<p class="course-title-vision">
|
||||
{{ course.name }}
|
||||
</p>
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.np-card {
|
||||
text-decoration:none;
|
||||
}
|
||||
.fas.fa-star {
|
||||
line-height: 1.15;
|
||||
}
|
||||
.course-card-content {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.course-card-content {
|
||||
color: black!important;
|
||||
padding: 22px 16px 16px;
|
||||
}
|
||||
|
||||
.np-card {
|
||||
margin-bottom: 10px!important;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button:hover {
|
||||
background: #006161!important;
|
||||
color: white!important;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button {
|
||||
background: white!important;
|
||||
color: #006161!important;
|
||||
}
|
||||
|
||||
.course-title-vision {
|
||||
height: 70px;
|
||||
font-family: Lexend !important;
|
||||
}
|
||||
</style>
|
||||
@ -25,8 +25,7 @@
|
||||
<div class="np-card-content-footer" style='display: flex; justify-content: space-between;'>
|
||||
<div class='np-card-content-footer-left'style='display: flex; justify-content: left;'>
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(90deg, #006161 0%, #006161 100%); font-weight: 800;
|
||||
border-radius: 8px; margin-right: 24px;'
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='margin-right: 24px;'
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
@ -68,36 +67,6 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.np-card-content.np-card-padding.np-card-content-vertical {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.np-card-image {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
.np-card-image {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button:hover {
|
||||
background: #006161!important;
|
||||
color: white!important;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button {
|
||||
background: white!important;
|
||||
color: #006161!important;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
color: #006161!important;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div class="col-xs-12 np-top-image-spacing np-course-banner">
|
||||
<div class="np-course-banner-overlay"></div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="np-card-container">
|
||||
<div class="row np-course-content np-card-padding-dynamic" style='background: #00283D;'>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
{% include "course_banner" %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{% include "course_description" %}
|
||||
@ -23,7 +23,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
<div class="np-top-cta" style="border-radius:0;">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
|
||||
@ -40,9 +40,6 @@
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: #00283D !important;
|
||||
}
|
||||
@media only screen and (max-width: 630px) {
|
||||
.np-course-info.np-course-banner-info {
|
||||
position: absolute;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title" style='color: #FFFFFF; opacity: 0.5;'>
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
|
||||
@ -4,15 +4,14 @@
|
||||
</div>
|
||||
<div class="np-progress-bar-container" style='border-radius: 40px;'>
|
||||
<div
|
||||
style="width: {{ course.progress }}%; background: #006161; border-radius: 40px;"
|
||||
style="width: {{ course.progress }}%; border-radius: 40px;background-color:#cc0033;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
"
|
||||
style='color: #006161;'>
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
@ -20,14 +19,14 @@
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big" style='background: linear-gradient(90deg, #006161 0%, #006161 100%); font-weight: 800; border-radius: 8px;'>
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big" style=' border-radius: 40px;'>
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
style='background: linear-gradient(90deg, #006161 0%, #006161 100%); font-weight: 800; border-radius: 8px; margin-right: 24px;'
|
||||
style=' margin-right: 24px;'
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
<div class="np-progress-bar-container" style='border-radius: 40px;'>
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%; background: #006161; border-radius: 40px;"
|
||||
style="width: {{ learning_path.progress }}%; border-radius: 40px;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
style='background: linear-gradient(90deg, #006161 0%, #006161 100%); border-radius: 8px;'
|
||||
style='border-radius: 40px;'
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
{% include "homepage_hero_carousel" %}
|
||||
{% include "sub_navigation" %}
|
||||
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
<div class="np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-3 courses-left-small">
|
||||
<div class="col-12 col-lg-4 courses-left-small">
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
@ -41,6 +41,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% include "section_faqs" %}
|
||||
|
||||
@ -52,12 +55,21 @@
|
||||
|
||||
<style>
|
||||
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 0 22px 50px;
|
||||
max-width: 1920px;
|
||||
}
|
||||
|
||||
.np-homepage .np-subpage-container > .row {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.np-homepage-headline {
|
||||
color: black!important;
|
||||
}
|
||||
|
||||
.np-card-content {
|
||||
background: GhostWhite!important;
|
||||
background: #f4f4f4!important;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
@ -67,8 +79,6 @@
|
||||
|
||||
.courses-left-small {
|
||||
padding-top: 190px;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -53,9 +53,9 @@ body {
|
||||
font-family: "Lexend", "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
div {
|
||||
/* div {
|
||||
color: #fff;
|
||||
}
|
||||
} */
|
||||
.np-color-white {
|
||||
color: #fff;
|
||||
}
|
||||
@ -107,7 +107,7 @@ div {
|
||||
}
|
||||
|
||||
.np-top-cta {
|
||||
background: #555269;
|
||||
/* background: #555269; */
|
||||
border-radius: 0;
|
||||
}
|
||||
.np-text-light {
|
||||
@ -245,7 +245,7 @@ div {
|
||||
max-height: 475px;
|
||||
}
|
||||
.np-homepage-hero-content {
|
||||
padding: 5rem 4rem 2.25rem;
|
||||
padding: 5rem 4rem 5rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@ -386,11 +386,11 @@ div {
|
||||
2.4 - COURSE COVER PAGE
|
||||
*/
|
||||
#course-desktop .np-course-content {
|
||||
background: #062531;
|
||||
background: #fff;
|
||||
color:#212121;
|
||||
padding: 0;
|
||||
}
|
||||
#course-mobile .np-card-container {
|
||||
background: #062531;
|
||||
margin-top: 0;
|
||||
}
|
||||
.np-content-instructors-content-name {
|
||||
@ -589,11 +589,7 @@ div {
|
||||
.np-footer + .np-powered-by {
|
||||
background: #002532 !important;
|
||||
}
|
||||
.np-footer-navigation-link,
|
||||
.np-footer-social-links-icon.np-button-color,
|
||||
.np-footer-support-link.np-button-color {
|
||||
color: #2bb24c;
|
||||
}
|
||||
|
||||
.np-footer-support-item {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@ -618,10 +614,20 @@ div {
|
||||
.np-button.np-background-color,
|
||||
.np-button.np-top-button,
|
||||
.np-card-content-footer .np-button {
|
||||
background: linear-gradient(90deg, #298e4e 0%, #035161 100%);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.np-button.np-top-button {
|
||||
border-radius:40px;
|
||||
border:1px solid #006161;
|
||||
transition:background-color 0.1s;
|
||||
}
|
||||
|
||||
.np-button.np-top-button:hover {
|
||||
background-color:transparent;
|
||||
color:#006161;
|
||||
}
|
||||
|
||||
button.enwYlE,
|
||||
button.enwYlE:hover {
|
||||
background-color: transparent;
|
||||
@ -648,7 +654,7 @@ button.jryxug {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.np-text-title {
|
||||
color: #fff;
|
||||
/* color: #fff; */
|
||||
font-size: 0.937rem;
|
||||
}
|
||||
|
||||
@ -668,12 +674,11 @@ button.jryxug {
|
||||
.np-card-container {
|
||||
height: auto;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
/* color: #fff; */
|
||||
}
|
||||
|
||||
.np-card-container,
|
||||
.np-card-container-training-session {
|
||||
background: #555269;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -965,55 +970,56 @@ button.jryxug {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: bold;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-course-banner-image {
|
||||
margin: 0 0 0 auto;
|
||||
width: 50%;
|
||||
width: 45%;
|
||||
border-radius:0!important;
|
||||
}
|
||||
|
||||
.np-course-banner-overlay {
|
||||
background: linear-gradient(
|
||||
238.17deg,
|
||||
rgba(3, 81, 97, 0) 55.34%,
|
||||
#298e4e 111.28%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
#035262 0%,
|
||||
#035161 49.48%,
|
||||
rgba(3, 82, 98, 0) 73.44%
|
||||
);
|
||||
background: #006161;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
width: 54%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-course-info.np-course-banner-info {
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
width: 75%;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
.np-course-banner .np-course-title {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.np-course-info.np-course-banner-info {
|
||||
width: 54%;
|
||||
background: #006161;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 32px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1170px) {
|
||||
.np-course-info.np-course-banner-info {
|
||||
bottom: 5.25rem;
|
||||
left: 6.25rem;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.np-course-banner .np-course-title {
|
||||
font-size: 4.125rem;
|
||||
margin-bottom: 3.125rem;
|
||||
font-size: 55px;
|
||||
line-height: 62px;
|
||||
}
|
||||
|
||||
.np-course-banner-info .np-course-details {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1063,24 +1069,19 @@ button.jryxug {
|
||||
*/
|
||||
.np-card-progress-bar-container,
|
||||
.np-progress-bar-container {
|
||||
background: #263e47;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.np-card-progress-bar {
|
||||
border-radius: 0;
|
||||
background-color: #2bb24c;
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title {
|
||||
color: #fff;
|
||||
/* color: #fff; */
|
||||
text-transform: none;
|
||||
margin-top: 0.7rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
.np-top-cta-progress-text {
|
||||
color: #2bb24c;
|
||||
}
|
||||
|
||||
/*
|
||||
3.12 - COURSE OUTLINE
|
||||
@ -1093,22 +1094,6 @@ button.jryxug {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-list {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-link {
|
||||
color: #809299;
|
||||
font-size: 0.937rem;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-link-completed {
|
||||
color: #fff;
|
||||
font-size: 0.937rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.np-course-outline-content-activity-icon,
|
||||
.np-course-outline-content-activity-title {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
@ -1134,7 +1119,7 @@ button.jryxug {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background-color: #006161;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user