Files
Gainsight/Custom_Templates/customer_templates/Douglas Elliman/course_cover.html.liquid

275 lines
7.9 KiB
Plaintext

<header class="uk-navbar uk-navbar-attached uk-border-bottom learning-header slide">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li>
<a href="{{ routes.my_content_path }}" class="uk-border-left uk-button-small">{% t .exit %}</a>
</li>
{% if course.has_forum? %}
<li>
<a href="{{ course.forum_path }}" class="uk-border-left uk-button-small">
<i class="uk-icon-comments-o"></i>
</a>
</li>
{% endif %}
</ul>
</div>
<div class="uk-navbar-content uk-text-center sk-float-remove">
{% if current_school.logo_url %}
<img src="{{ current_school.logo_url }}" class="uk-responsive-height">
{% else %}
{{ current_school.name }}
{% endif %}
</div>
</header>
{% include "side_navigation_bar" %}
{% if preview_banner %}
{{ preview_banner }}
{% endif %}
<div class="uk-container uk-container-center uk-padding-large uk-margin-large-top">
<h4 class="uk-text-muted uk-margin-remove">{{ course.superscript }}</h4>
{% if course.learner_can_retake? %}
<form action="{{ course.course_attempts_path }}" method="POST" onsubmit="retakeButton.disabled = true;">
<button type="submit" class="uk-button uk-float-right completion-button" data-test="retake-course-button" name="retakeButton">{{ course.retake_course }}</button>
</form>
{% else %}
<a href="{{ course.outline_path }}" class="uk-button uk-float-right completion-button" data-test="start-course-button">{{ course.start_or_continue }}</a>
{% endif %}
{% if current_school.filtering_enabled? %}
<h3 class="uk-margin-remove">{{ course.course_category_names }}</h3>
{% endif %}
<h1 data-test="course-name" class="uk-margin-remove">{{ course.name }}</h1>
<hr class="uk-article-divider uk-margin-top">
<div{% if course.has_outline? %} class="uk-grid uk-grid-large"{% endif %}>
<div class="uk-width-medium-1-2 uk-margin-bottom{% unless course.has_outline? %} uk-container-center{% endunless %}">
<article class="uk-article">
<img src="{{ course.featured_image_url }}" />
<h3>{{ course.about_label }}</h3>
<p>{{ course.full_description }}</p>
</article>
{% if course.instructors.count > 0 %}
<article class="uk-article">
<h3>{{ course.instructors_title }}</h3>
{% for instructor in course.instructors %}
<div>
<div class="uk-comment-header">
<img
src="{{ instructor.image_url }}"
alt="{{ instructor.name }}"
class="uk-comment-avatar"
width="80">
<h4 class="uk-comment-title">{{ instructor.name }}</h4>
<div class="uk-comment-meta">{{ instructor.title }}</div>
</div>
<div class="wysiwyg">{{ instructor.bio }}</div>
</div>
{% endfor %}
</article>
{% endif %}
<article class="uk-article">
{{ upcoming_events }}
</article>
{% if course.discover_events_path %}
<a href="{{ course.discover_events_path }}" class="uk-padding-left-remove">{% t .see_all_events %}</a>
{% endif %}
</div>
{% if course.has_outline? %}
<div class="uk-width-medium-1-2">
<h3>{{ course.progress_title }}</h3>
{{ course.progress_bar }}
<h3>{{ course.outline_label }}</h3>
<ol class="uk-list cover-outline">
{% for section in learner_syllabus.sections %}
<li class="uk-margin-large-bottom">
<h3><strong>{{ section.name }}</strong></h3>
{% if section.will_be_published? %}
<div class="uk-margin-top">
{% t .scheduled_info %} {{ section.published_at }}
</div>
{% else %}
<ol class="uk-list cover-outline-section-activities">
{% for activity in section.activities %}
<li class="{% if activity.completed? %}completed {% endif %}{% if activity.locked? %}locked{% endif %}" >
{% if activity.locked? %}
<span>
{% if activity.milestone? %}
<i class="uk-icon-flag"></i>
{% endif %}
{{ activity.title }}
</span>
{% else %}
<a href="{{ activity.path }}">
{% if activity.milestone? %}
<i class="uk-icon-flag"></i>
{% endif %}
{{ activity.title }}
</a>
{% endif %}
</li>
{% endfor %}
</ol>
{% endif %}
</li>
{% endfor %}
</ol>
</div>
{% endif %}
</div>
</div>
<style>
img.uk-responsive-height {
max-height: 95% !important;
}
#learning {
margin-left: 160px;
}
@media only screen and (max-width: 798px) {
#learning {
margin-left: 0px;
}
}
@media only screen and (max-width: 1024px) {
.uk-panel-badge {
right: 10px !important;
}
}
@media only screen and (max-width: 600px) {
.uk-panel-badge {
right: 4px !important;
}
}
.sainte-colombe-regular {
font-family: "Sainte Colombe Regular" !important;
}
.sainte-colombe-medium {
font-family: "Sainte Colombe Medium" !important;
}
.myriad-pro-light {
font-family: "Myriad Pro Regular" !important;
font-weight: lighter !important;
}
.euclid-circular-regular {
font-family: "Euclid Circular Regular" !important;
}
.euclid-circular-light {
font-family: "Euclid Circular Light" !important;
}
.euclid-circular-semibold {
font-family: "Euclid Circular Semibold" !important;
}
.euclid-circular-bold {
font-family: "Euclid Circular Bold" !important;
}
@font-face {
font-family: "Sainte Colombe Regular";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-regular.otf) format('opentype');
font-style: normal;
}
@font-face {
font-family: "Sainte Colombe Medium";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-medium.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Regular";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Regular.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Light";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Light.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Semibold";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Semibold.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Bold";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Bold.otf) format("opentype");
font-style: normal;
}
/* side navigation bar */
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #100B28;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
display: block;
}
.side-navbar-item {
font-size: 18px !important;
color: white !important;
}
.side-navbar-item:hover {
color: rgba(255, 255, 255, 0.434) !important;
}
.sidenav a:hover {
color: #f1f1f1;
}
@media screen and (max-width: 798px) {
.sidenav {
display: none ;
}
.section-margin {
margin-left: 0px !important;
}
}
/* side navigation bar */
#elliman-dropdown {
margin-bottom: 30px;
height: 40px;
font-size: 20px;
width: 100%;
max-width: 250px;
}
</style>