MATTR templates and tripleseat head file for custom fonts. Todos.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,227 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="homepage-header np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" style="position:relative;" class="homepage-form">
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="np-homepage-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="What do you want to learn?"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="user-intro np-flex">
|
||||
<div class="profile-circle">
|
||||
{{current_person.first_name | slice: 0}}{{current_person.last_name | slice: 0}}
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
Welcome back,<br> <span>{{current_person.first_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-main-content np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-4 col-lg-3">
|
||||
<div class="homepage-section-header">MATTR BADGES</div>
|
||||
{% include "homepage_scoreboard" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 col-lg-9">
|
||||
<div class="homepage-section-header">COURSES</div>
|
||||
{% include 'homepage_categories' %}
|
||||
{% include 'homepage_list_headers' %}
|
||||
{% include 'homepage_courses' %}
|
||||
<div class="accordion-catalog-courses" id="catalog-accordion">
|
||||
<div class="accordion-label">
|
||||
Show Optional Courses
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'homepage_catalog_courses' %}
|
||||
{% include "footer" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var acc = document.getElementById("catalog-accordion");
|
||||
var i;
|
||||
|
||||
|
||||
acc.addEventListener("click", function() {
|
||||
/* Toggle between adding and removing the "active" class,
|
||||
to highlight the button that controls the panel */
|
||||
this.classList.toggle("active");
|
||||
|
||||
/* Toggle between hiding and showing the active panel */
|
||||
var panel = document.getElementById("accordion-panel");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
acc.querySelector(".accordion-label").innerHTML = "Show Optional Courses <i class='fa fa-chevron-down'></i>"
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
acc.querySelector(".accordion-label").innerHTML = "Hide Optional Courses <i class='fa fa-chevron-up'></i>"
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.homepage-section-header {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #6B686A;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.homepage-header {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.homepage-form {
|
||||
max-width:317px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.np-homepage-search-input {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
outline: none;
|
||||
padding: 14px 100px 14px 44px;
|
||||
width: 100%;
|
||||
background-color:#FAFAFA;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#333132;
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-intro {
|
||||
padding: 32px 0;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.profile-circle {
|
||||
background-color: #EAD9E3;
|
||||
width:64px;
|
||||
height:64px;
|
||||
min-width:64px;
|
||||
border-radius:50%;
|
||||
font-weight: 600;
|
||||
font-size: 25.6px;
|
||||
line-height: 150%;
|
||||
color: #333132;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right:32px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-weight:600;
|
||||
font-size:24px;
|
||||
line-height:28px;
|
||||
}
|
||||
|
||||
.intro-text > span {
|
||||
color: #2D29FC;
|
||||
}
|
||||
|
||||
.homepage-main-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.accordion-catalog-courses {
|
||||
color: #333132;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
position:relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:32px 0;
|
||||
}
|
||||
|
||||
.accordion-catalog-courses:before {
|
||||
content: "";
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:0;
|
||||
transform:translateY(-50%);
|
||||
background: #DCDADB;
|
||||
height:4px;
|
||||
color: #333132;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
.accordion-label {
|
||||
background: #DCDADB;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
transition: 0.2s;
|
||||
padding:6px 12px;
|
||||
border-radius:30px;
|
||||
}
|
||||
|
||||
.accordion-catalog-courses.active .accordion-label {
|
||||
background-color: #6B686A;
|
||||
color:#fff
|
||||
}
|
||||
|
||||
.accordion-catalog-courses.active:before {
|
||||
background-color: #6B686A;
|
||||
}
|
||||
|
||||
#accordion-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
margin-bottom:50px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.homepage-header {
|
||||
padding: 80px 64px;
|
||||
}
|
||||
|
||||
.homepage-header > .row {
|
||||
flex-direction:row-reverse;
|
||||
}
|
||||
|
||||
.homepage-form {
|
||||
margin:0 0 0 auto;
|
||||
}
|
||||
|
||||
.user-intro {
|
||||
padding: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size:40px;
|
||||
line-height:47px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user