Skip to content

Commit

Permalink
add styles to the navbar on product page (#2020)
Browse files Browse the repository at this point in the history
  • Loading branch information
@annagav
annagav authored Dec 13, 2023
1 parent c7e299b commit b7b33d6
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 42 deletions.
32 changes: 24 additions & 8 deletions cms/templates/product_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,32 @@ <h1>{{ page.title }}</h1>
</section>
</div>

<nav id="tab-bar">
{# Non-Mobile only #}
<nav id="tab-bar" class="sticky-top d-none d-md-block">
<ul class="nav">
{% if page.about %}<li class="nav-item"><a href="#about-this-class">About</a></li>{% endif %}
{% if page.is_program_page %}<li class="nav-item"><a href="#program-courses">Courses</a></li>{% endif %}
{% if page.what_you_learn %}<li class="nav-item"><a href="#what-youll-learn">What you'll learn</a></li>{% endif %}
{% if page.prerequisites %}<li class="nav-item"><a href="#prerequisites">Prerequisites</a></li>{% endif %}
{% if instructors %}<li class="nav-item"><a href="#instructors">Instructors</a></li>{% endif %}
{% if page.faq_url %}<li class="nav-item"><a href="{{page.faq_url}}" target="_blank">FAQs</a></li>{% endif %}
{% if page.about %}<li class="nav-item"><a class="nav-link" href="#about-this-class">About</a></li>{% endif %}
{% if page.is_program_page %}<li class="nav-item"><a class="nav-link" href="#program-courses">Courses</a></li>{% endif %}
{% if page.what_you_learn %}<li class="nav-item"><a class="nav-link" href="#what-youll-learn">What you'll learn</a></li>{% endif %}
{% if page.prerequisites %}<li class="nav-item"><a class="nav-link" href="#prerequisites">Prerequisites</a></li>{% endif %}
{% if instructors %}<li class="nav-item"><a class="nav-link" href="#instructors">Instructors</a></li>{% endif %}
{% if page.faq_url %}<li class="nav-item"><a class="nav-link" href="{{page.faq_url}}" target="_blank">FAQs</a></li>{% endif %}
</ul>
</nav>

{# Mobile only #}
<nav id="tab-bar" class="sticky-top d-block d-md-none">
<div class="nav dropdown">
<a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">About</a>
<ul class="dropdown-menu">
{% if page.about %}<li class="nav-item"><a class="nav-link dropdown-item" href="#about-this-class">About</a></li>{% endif %}
{% if page.is_program_page %}<li class="nav-item"><a class="nav-link dropdown-item" href="#program-courses">Courses</a></li>{% endif %}
{% if page.what_you_learn %}<li class="nav-item"><a class="nav-link dropdown-item" href="#what-youll-learn">What you'll learn</a></li>{% endif %}
{% if page.prerequisites %}<li class="nav-item"><a class="nav-link dropdown-item" href="#prerequisites">Prerequisites</a></li>{% endif %}
{% if instructors %}<li class="nav-item"><a class="nav-link dropdown-item" href="#instructors">Instructors</a></li>{% endif %}
{% if page.faq_url %}<li class="nav-item"><a class="nav-link dropdown-item" href="{{page.faq_url}}" target="_blank">FAQs</a></li>{% endif %}
</ul>
</div>
</nav>
<div class="scroll-spy-content">
{% if page.about %}<section class="about-this-class about-richtext-container" id="about-this-class">
{{ page.about | richtext | expand }}
</section>{% endif %}
Expand Down Expand Up @@ -133,6 +148,7 @@ <h3 id="instructor-name-{{ member.id }}" data-instructor-id="{{ member.id }}" cl
</div>
</section>
{% endif %}
</div>

<section class="ofac-message border">
<div class="container">
Expand Down
94 changes: 67 additions & 27 deletions frontend/public/scss/product-page/product-details.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,60 @@ body.new-design {
}

#tab-bar {
background-color: #edf2f4;
padding: 15px 19px;
margin: 2em 0;
padding: 0;
border-bottom: 1px solid #DFE5EC;
background-color: #EFF3F6;

ul li.nav-item {
padding: 0;
padding-right: 40px;
color: #35607a;
font-weight: normal;
@include media-breakpoint-down(md) {
padding: 15px;
margin: 0 -15px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}

li.nav-item {
a {
color: #35607a;
color: #2A6D87;
text-decoration: none;
padding: 18px 20px;
font-size: 16px;
line-height: 19px;
}
a.active, a.active:hover {
color: $primary;
border-bottom: 1px solid $primary;
}
a:hover {
color: #061e2d;
}
a.nav-link.dropdown-item {
color: black;
text-decoration: none;
border-bottom: none;
}
}
.dropdown-menu {
box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #DFE5EC;
margin: -2px 0 0 0;
}
.dropdown-toggle {
border: 1px solid #DFE5EC;
padding: 10px 15px;
background-color: white;
width: 100%;
color: #03152D;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
.dropdown-menu.show {
width: 100%;
}
.dropdown-item.active {
background-color: #8c8a8a42;
color: #061e2d;
}
}

Expand Down Expand Up @@ -115,7 +155,7 @@ body.new-design {

section.about-this-class {
color: #000;
/* TODO: this requires a different font and colors */
/* TODO: this requires a different font and colors */
h2, h3, h4, h5, h6 {
font-size: smaller;
}
Expand Down Expand Up @@ -173,32 +213,32 @@ body.new-design {
height: 64px;
border: none;
border-radius: 50%;

&:hover {
opacity: 0.6;
}
}

.vjs-poster {
height: fit-content;
}
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
top: 0.3em;
}

.vjs-youtube {

.vjs-big-play-button {
display: none;
}
}

.video-holder {
background: $sirocco;
margin-top: 10px;

img {
display: block;
width: 100%;
Expand Down Expand Up @@ -286,7 +326,7 @@ body.new-design {
.enrollment-info-icon {
max-width: 20px;
margin-right: 12px;

img {
max-width: 20px;
}
Expand Down Expand Up @@ -373,7 +413,7 @@ body.new-design {
}
}

ul {
ul {
padding: 0;
}

Expand All @@ -393,7 +433,7 @@ body.new-design {

label {
font-weight: bold;
line-height: 24px; /* 160% */
line-height: 24px; /* 160% */
}

select {
Expand All @@ -409,7 +449,7 @@ body.new-design {
}
}

div.certificate-pricing-row {
div.certificate-pricing-row {
border-radius: 5px;
border: 1px solid var(--BorderGrey, #DFE5EC);
background: rgba(3, 21, 45, 0.05);
Expand Down Expand Up @@ -456,9 +496,9 @@ body.new-design {
padding: 0px;
justify-content: space-between;
align-items: center;
align-self: stretch;
align-self: stretch;

// border-bottom: 1px solid var(--BorderGrey, #DFE5EC);
// border-bottom: 1px solid var(--BorderGrey, #DFE5EC);
border: none;

div {
Expand All @@ -478,7 +518,7 @@ body.new-design {

div.upsell-messaging-header {
margin: 20px 1px;

div {
font-weight: 700;
}
Expand Down Expand Up @@ -521,11 +561,11 @@ body.new-design {
height: 0;
z-index: 9;
}

h5 {
margin-left: -9999px;
}

button.close {
border: 0;
border-radius: 100%;
Expand All @@ -539,7 +579,7 @@ body.new-design {
}
}
}

.modal-body {
padding-left: 50px;
padding-right: 50px;
Expand Down
10 changes: 4 additions & 6 deletions frontend/public/src/components/CourseInfoBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,12 +208,10 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp

<ul>
{course.programs.map(elem => (
<>
<li>
{" "}
<a href={`/programs/${elem.readable_id}/`}>{elem.title}</a>
</li>
</>
<li key={elem.readable_id}>
{" "}
<a href={`/programs/${elem.readable_id}/`}>{elem.title}</a>
</li>
))}
</ul>
</div>
Expand Down
16 changes: 16 additions & 0 deletions frontend/public/src/entry/django.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,20 @@ $(document).ready(function() {
slidesToScroll: 4
})
$(".slick-slide").removeAttr("tabindex")

$("body").scrollspy({
target: "#tab-bar",
smoothScroll: true,
rootMargin: "0px 0px 0px 0px"
})
$(".nav .nav-link").on("click", function() {
$(".nav .dropdown-toggle").text($(this).text())
const self = this
setTimeout(function() {
$(".nav")
.find(".active")
.removeClass("active")
$(self).addClass("active")
}, 300)
})
})
2 changes: 1 addition & 1 deletion main/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
{% endblock %}
{% endspaceless %}
</head>
<body class="{% block bodyclass %}{% endblock %}">
<body class="{% block bodyclass %}{% endblock %}" tabindex="0">
<div class="main-panel">
<a href="#main" class="visually-hidden visually-hidden-focusable">Skip to main content</a>
{% include "partials/gtm_body.html" %}
Expand Down

0 comments on commit b7b33d6

Please sign in to comment.